Search code examples
htmlcssimportfontsgoogle-fonts

Upgrade google font Source Sans (and others) to variable fonts

TL/DR: where can I download the woff/woff2 variable font file from Google so we can host it on our server.

I am trying to update several google fonts from older versions to variable font files.

Our client wants us to host them on the site, as when we used the google import css property it adds Google cookies which we want to bypass.

In our current repo we have the following (truncated):

source-sans-pro-v21-latin-600.woff            
source-sans-pro-v21-latin-600.woff2           
source-sans-pro-v21-latin-regular.woff        
source-sans-pro-v21-latin-regular.woff2       
source-serif-pro-v15-latin-600italic.woff     
source-serif-pro-v15-latin-600italic.woff2    
source-serif-pro-v15-latin-700italic.woff     
source-serif-pro-v15-latin-700italic.woff2    
source-serif-pro-v15-latin-italic.woff        
source-serif-pro-v15-latin-italic.woff2

When going to the new Source family https://fonts.google.com/specimen/Source+Sans+3/about?query=Paul+D.+Hunt If I download the files I get ttf (for working on desktop).

I don't actually know where I can download the new woff2 file from if we want to serve it.

If I inspect the page I can see the Source woff2 in the inspector. Is this the right way to go about this? I want to make sure I am on the right track. But manually downloading woff files via the inspector does not seem like the right way to do this (there are 5 font families in total in addition to Source, Inter, Montserrat etc).

enter image description here

This issue came about as the client noticed problems with Czech and Slovak characters for the existing font (I believe we require latin-ext for this) but we will also have Greek and Israeli alphabets to deal with. I assume the variable font handles this. It seems to look much better in the font tester at https://fonts.google.com/specimen/Source+Sans+3/tester?query=Paul+D.+Hunt

I also checked the github repo which is quite confusing:

Can anyone tell me the right way to go about this?

Solution

  • The folder in the github repo you referenced, https://github.com/adobe-fonts/source-sans/tree/release/WOFF2/VF, has the WOFF2 files you're looking for.

    There are two with ".otf" in the filename, and two with ".ttf" in the file name. The extension ".otf" is indicating that those are implemented using CFF or CFF2 format (a derivative of Postscript) for glypyh outlines. The ".ttf" extension indicates those are implemented using TrueType outlines. For use on the Web, either would be fine; you don't need both.

    "-Upright" and "-Italic" in the filenames should be self-explanatory.

    This issue came about as the client noticed problems with Czech and Slovak characters for the existing font (I believe we require latin-ext for this) but we will also have Greek and Israeli alphabets to deal with. I assume the variable font handles this.

    Variable capabilities in a font are completely independent of what characters are supported in the font. You can see information about the characters supported here: https://fonts.google.com/specimen/Source+Sans+3/glyphs?query=Paul+D.+Hunt. It appears that the font does support Greek, as well as Czech and Slovak, but not Hebrew. You'll have to find a different font for that.