[CogniSensParticipant]

Hi,

My page is having trouble with https://developers.google.com/speed/pagespeed/insights/

One of the few remaining issues is that my CSS Delivery is making multiple trips to google to get the 5 fonts I want:

https://fonts.googleapis.com/…%3A300%2C400%2C600%2C700%2C800&ver=4.6.1
https://fonts.googleapis.com/…%2C500%2C600%2C700%2C800%2C900&ver=4.6.1
https://fonts.googleapis.com/…family=Droid+Serif%3A400%2C700&ver=4.6.1
https://fonts.googleapis.com/…2C700&subset=latin%2Clatin-ext&ver=4.6.2
https://fonts.googleapis.com/css?family=Raleway%3A400%2C500%2C600

Google posted on their blog that you can combine all font requests into one by using | as a separator like this: <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Droid +Sans|Lobster”>

[Prasant RaiModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[CogniSensParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for the URL, actually you can combine the request of those Google font. Please go to https://fonts.google.com/ find your fonts and click the red + icon that corresponding to it to create a font families. It will automatically generate a request link that is something like this:

<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|David+Libre|Lato|Open+Sans|Roboto|Slabo+27px" rel="stylesheet">

Or the @import statement:

@import 'https://fonts.googleapis.com/css?family=Baloo+Bhaina|David+Libre|Lato|Open+Sans|Roboto|Slabo+27px';

Hope it helps, Cheers!

[CogniSensParticipant]

Thanks Friech, I can definitely do that, could you also direct me to the proper place to put that link afterwards?

Will I also have to clean up some code to get rid of the old urls or does X manage all of this somewhere?

[FriechModerator]

Hi There,

You can add the @import statement on top of your child theme’s style.css file. Yes, please remove those old Google fonts request to avoid redundancy. Just make sure you included all your needed fonts on your @import statement.

Let us know how it goes.

Cheers!

[Author]

Posts