Hi there

We have included Google Open Sans font on a website with two weights: 300 and 400. The Buildr template creates the link:
fonts.googleapis.com/css?family=Open+Sans:400:latin%7COpen+Sans:300:latin

This downloads the Latin set in both 300 and 400 weights which is fine. Unfortunately it also includes, for each weight (certainly on a Windows 7 PC):
latin-ext
cyrillic
cyrillic-ext
greek
greek-ext
vietnamese
So we end up with 14 fonts instead of just 2.

I suspect this is probably to do with the way Google Fonts handles the Open Sans font. However does anyone know if there is a way to stop the downloading of the font subsets we don't require?

Thank you for your help.

Brian

Hi Brian,

Do you have a link for the site?

Thanks
Paul

Hi Paul

I decided to raise a ticket with this query. Please see below the replies given by Rob which may be of some use or interest to other JB members.

Thank you Paul and Rob for your help.

Brian

*****************


Hi Brian,

This looks to be more of an issue on Google's end. Calling a single file from Google also results in all subsets being loaded, eg:

fonts.googleapis.com/css?family=Open+Sans

There are a couple of options.

You could try using the javascript font loader, which might be more specific but can result in a small delay before the font is loaded on the page

docs.joomlabamboo.com/zen-grid-framework-4/fonts/font-loader

Or you could download the font from Google and serve it locally. Font squirrel makes it easy to create the right css and files: www.fontsquirrel.com/tools/webfont-generator

I'm just going through Googles bug tracker now so will let you know if this has been reported.

Regards,

Rob


Hi Brian,

This seems to be a feature of Google fonts where browsers that support unicode ranges get served all the font locations and only download the ones they need according to the content on the page.

In non-supporting browsers, they will get only the subsets specified.

github.com/google/fonts/issues/113

When I check the network tab of dev tools on your page, only one font file is downloaded, the others are just registered incase they are needed.

Regards,

Rob


Rob went on to say....

Looking at the css file served from Google, you can actually see the range that the file supports under each @font-face rule. For example, Greek shows as

unicode-range: U+0370-03FF;

The feature isn't supported in edge/ie and when I load the same file in those browsers, only the subsets specified are shown.

I learnt something new today


Hi Rob

Thank you for researching this. So if my understanding is correct it seems that although the font link, depending on browser used, may list all the subsets only the ones required are actually downloaded.

The yellow labs (yellowlab.tools/) checker highlights it as being 14 fonts but it now looks like the font test might be a "dumb" check i.e. it just counts how many are listed in the URL rather than how many are actually downloaded.

I have thought, before, about hosting the font locally but I read somewhere that this approach might mean the sites concerned would lose the benefits of the fonts being served directly from google e.g. google selects the best version of the font to serve up according to browser and device used whereas I would imagine hosting it on the site itself might lose these nuances? I suppose it is something I could try and see how it goes. Loading stuff from third party sites such as fonts or google maps is always a bit worrying from a security point of view and usually adds to page loading time.

Thanks again

Brian


Hi Brian,

There are pros and cons with both methods.

You get the benefit of the browser specific css and if the font is popular then there is a good chance that the user might already have it cached and not need to download it at all (Open Sans, raleway, arimo and some others are used on a lot of websites).

On the other hand, the browser caching time for Google fonts is quite low and you can't control that when you use their hosted files. If you host them yourself you can tell browsers to cache them for a long time so users only need to download it once.

If you have a very fast site then hosting the files yourself also cuts out an ip lookup, but as that takes milliseconds it would not make much of a difference to most sites.

Regards,

Rob

*****************************

Thanks Brian for the comprehensive post

For me personally I'd stick with Google - I'm confident in Google's security with the maps and fonts

I'd look to optimise as much as I can especially with images and requests

Cheers
Paul

Hi Paul

I agree that google maps and fonts are pretty secure.

But I do think it is advisable to keep resources that are loaded from third party URLs, including from google, to a minimum for security and load time reasons.

Thanks

Brian

Hi Brian,

Yep agree 100%

Cheers
Paul