improve page load times with google fonts

[5high-photohub]

Hi,

I’m looking to improve the page load time as it’s truly awful – between 6 – 2 secs! However I’m making some progress and would like to ask you if there’s any way to improve how the Google fonts are loaded.

From my webpagetest results – as attached – it shows how the google fonts have to be linked to their site/server and so requires it’s own SSL handshake and then the DNS check and then the load time etc. Is there a way to improve this? Or is the only option to avoid this extra load time is just to not choose a google font in the theme options?!

Thanks.

[5high-photohub]

sorry, forgot the screenshots…

Attachments:

You must be logged in to view attached files.

[Radu]

Hello,

Please take a look here : https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization and here : http://googlewebfonts.blogspot.ro/2010/09/optimizing-use-of-google-font-api.html

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Hi Radu,

Thanks for the informative links – I am aware that it’s best to use a limited number of fonts (for many reasons) and I will double check that we’re only using the subsets of them, but I think we are. Plus I’m looking at ensuring the max-time is increased for caching of static resources.

I guess what I’d like to know is whether the Kleo theme has integrated best practice into it’s use of google fonts? and of the fontello icons, as they are another one that needs a seperate SSL validation on page load?

many thanks,

J

[Radu]

Hi,

From my point of view the best practice to use google fonts on your website is to download the fonts on your server, then you can cache that resources and set expire time.

http://stackoverflow.com/questions/8966740/how-to-host-google-web-fonts-on-my-own-server?answertab=votes#tab-top

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Hi Radu,

Brilliant resource, thank you. This is all new to me but it does seem ‘doable’ especially using the http://www.localfont.com/ link (though it doesn’t actually include the css in it’d download files, but does gives the css needed seperately. I presume I could put them into any part of wp-content? or is there a recommended folder for fonts?

Thanks again for your help,

J

[Radu]

You can host fonts anywhere as you wish, but if you will have a structure something like that : wp-content/fonts/ or wp-content/themes/kleo/fonts/ will be nice.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Many thanks – am reading all about it before i commit to self-hosting. Once sorted I’ll post ‘easy steps’ in case others like me are interested.
Cheers.

[5high-photohub]

Update:
downloaded the fonts and obtained the css for them via http://www.localfont.com/ which is an excellent resource.
uploaded the fonts themselves into a new font folder in my child-theme/assets/font/
edited the url in the css code to reflect the fonts location on my server
added this code into the top of my child theme style.css as per recommendations

The css i used was this (+ the one for the Open Sans too):

COPY CODE

@font-face {
  font-family: 'Roboto Condensed';
  font-weight: 300;
  font-style: normal;
  src: url('https://www.mysite.com/wp-content/themes/kleo-child/assets/font/Roboto-Condensed-300.eot');
  src: url('https://www.mysite.com/wp-content/themes/kleo-child/assets/font/Roboto-Condensed-300.eot?#iefix') format('embedded-opentype'),
       local('Roboto Condensed Light'),
       local('Roboto-Condensed-300'),
       url('https://www.mysite.com/wp-content/themes/kleo-child/assets/font/Roboto-Condensed-300.woff2') format('woff2'),
       url('https://www.mysite.com/wp-content/themes/kleo-child/assets/font/Roboto-Condensed-300.woff') format('woff'),
       url('https://www.mysite.com/wp-content/themes/kleo-child/assets/font/Roboto-Condensed-300.ttf') format('truetype'),
       url('https://www.mysite.com/wp-content/themes/kleo-child/assets/font/Roboto-Condensed-300.svg') format('svg');
}

All works OK, but on review in the webpagetest results, although it is now using the fonts from my server it’s still calling/accessing http://fonts.googleapis.com.

So i have 2 questions:

1. Do you know where the http://fonts.googleapis.com is being called from? is it being called by the Kleo theme anyway? If so, from where, and how would I stop it? Or is my css code incorrect?

2. in one of your original links (http://stackoverflow.com/questions/8966740/how-to-host-google-web-fonts-on-my-own-server?answertab=votes#tab-top it states you need to add some info into the .htaccess file to stop errors from popping up in Chrome Dev Tools, like this:

COPY CODE

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Is this still needed?

Many thanks – and have attached a screenshot showing the latest page test a/a.

Any help much appreciated, though I understand this is a bit beyond the scope of your support forum!

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

1. You can remove google fonts like this

COPY CODE

function wpse_dequeue_google_fonts() {
    wp_dequeue_style( 'kleo-google-fonts' );
}
add_action( 'wp_enqueue_scripts', 'wpse_dequeue_google_fonts', 20 );

2. Leave them in htaccess.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[5high-photohub]

Thanks Radu,

On review of some webpage tests it actually looks like the actual fonts load more slowly from our server, than when they came from Google Fonts – possibly because we’re on a slower hosting system…

So, after all this I’m going to uninstall our locally hosted fonts and just get them from Google after all!

But hopefully this might help inform others though – maybe good if you have a fast hosting package, but probably not if you’re on a shared hosting environment.

Cheers,
J

[Author]

Posts