Search code examples
webfontsgoogle-font-apiwoff

How can I only use Latin subset with Google Fonts WOFF2 files?

I wanted to add a font with Google Fonts, and I have noticed an odd behavior.

I want to add a font with only the latin subset, I do not want latin-ext, cyrillic or cyrillic-ext subset, in order to lighten the code. I understand that's the default behavior, so I've done like this:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher">

In Firefox (and the other browsers that do not support WOFF2), I get a correct output:

@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLbrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}

But in Chrome, I get this:

/* cyrillic */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLV4sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLZQV2lvL5Ba9FjAYK6Lx0Qk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

I thought, maybe the latin subset is not a default behavior anymore, so I added to my <link> the subset GET parameter:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin">

But it didn't change the output. When I go with a &subset=cyrillic, it changes in Firefox, but the Chrome output is the same.

Is there a way to output only the latin subset?

Or is just that the WOFF2 and unicode-range won't be downloaded if there is no need on the page? And in this last case, the gain from stripping the cyrillic call is just 8 lines of code ine the css file, that to say ~300 bytes, and it just doesn't worth anything?

Solution

  • The trick lies with this optimization:

    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

    With this, the browser knows whether it needs to download the font, depending on the characters it just loaded in the html. Chrome is currently the only one with full support for this.

    MDN lists Firefox 36+ as completely ignoring this spec, therefore Google Fonts has to serve it a minimal font-face specification. The same happens with Safari.

    EDIT: In Nov 2022 browser support is over 98%.

    Anyway, that was an interesting 30 minute journey on the internet which I hope helps any further internet travellers. This should lend weight towards why you could use Google Fonts as a CDN for hosting fonts for optimal performance as opposed to serving it yourself.