Site speed slowed by font

Hi there, I recently switched to using this theme for my website and and have found that it has slowed my side down. The biggest issues by far seem to be due to the fonts.

The screenshots attached show their messages that I’m getting, I was wondering if anyone could give me some advice on how to fix them. I would really appreciate some advice, as my site speed is very important to me :slight_smile:


The first issue is one which Hummingbird (my site optimisation plugin) sort of explains, but I don’t understand it without the coding experience.

It asks me:
"To add the font-display property for Google Fonts, you can pass the desired value in the query string display parameter as shown in the example below:

https://fonts.googleapis.com/css?family=Roboto&display=swap"

OR:
"For fonts hosted locally, add the font-display property to the @font-face CSS rule as shown below:

@font-face{
font-family: ‘myWebFont’;
font-display: swap;
src: url(‘myfont.woff2’) format(‘woff2’);
}"

However, I have no idea what these mean and don’t know how I could use these codes to solve the issue relating to the screenshot attached.

The other issue is that the fonts apparently have no linked URL which means that I can’t compress the file size. Is there a URL or something that I can somehow I had to fix this? The font file names are: ‘alizee-headings-fonts’ and ‘alizee-body-fonts’. Thanks a lot in advance, I hope this makes sense and I look forward to hearing from anyone with the know-how!

Kind Regards,
James

Hello James,

You can try to replace this code in functions.php file (row 153-162):

if( $headings_font ) {
	wp_enqueue_style( 'alizee-headings-fonts', '//fonts.googleapis.com/css?family='. $headings_font );	
} else {
	wp_enqueue_style( 'alizee-headings-fonts', '//fonts.googleapis.com/css?family=Open+Sans+Condensed:700');
}	
if( $body_font ) {
	wp_enqueue_style( 'alizee-body-fonts', '//fonts.googleapis.com/css?family='. $body_font );	
} else {
	wp_enqueue_style( 'alizee-body-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700');
}

…with this:

if( $headings_font ) {
	wp_enqueue_style( 'alizee-headings-fonts', '//fonts.googleapis.com/css?family='. $headings_font . '&display=swap');	
} else {
	wp_enqueue_style( 'alizee-headings-fonts', '//fonts.googleapis.com/css?family=Open+Sans+Condensed:700&display=swap');
}	
if( $body_font ) {
	wp_enqueue_style( 'alizee-body-fonts', '//fonts.googleapis.com/css?family='. $body_font . '&display=swap' );	
} else {
	wp_enqueue_style( 'alizee-body-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&display=swap');
}

That should fix Google fonts (you might have to repeat it after each theme update). I don’t think that it’s applicable to Font Awesome because it’s an icons font and it can’t be replaced with a fallback font easily.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Thanks a lot for the response! I did try what you said, but unfortunately even more features of the theme are having a drastic impact on my website speed :c

It seems I’ll have to seek an alternative. Thanks once again for your help!

Kind Regards,
James

Okay, you are welcome James.

Kind Regards, Roman.
aThemes Support