I switched a website from Google Font API to delivering the font files myself. That has the advantage that you have no legal problems because of loading some external files.
First we have to download the wanted fonts from https://fonts.google.com. The archives you have downloaded needs to be extracted. In the folder you will find multiple ttf files. The file we are searching is for the Variable Font the file name looks like this “Roboto-VariableFont_wght.ttf” for the Roboto font.
Next we need to convert the ttf file into the woff2 format to make it usable for our site.
woff2_compress Roboto-VariableFont_wght.ttfThen a file Roboto-VariableFont_wght.woff2 is created. This files needs to be copied into the directory of the website the example would be “/theme/static/fonts/Roboto”.
To adjust the css file necessary for we can use the css file generated by the Google Font API. The link looks like this https://fonts.googleapis.com/css?family=Roboto and in the file we will find multiple blocks like the following:
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}We can save the file from Google. I removed several of the blocks because I don’t use cyrillic or vietnamese letters. I saved the file to “theme/static/css/fonts.css”, this path needs to replace the link to the Google Font API. The last step is to change the link in the fonts.css file to direct to the woff2 file we created previously.
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../fonts/Roboto/Roboto-VariableFont_wght.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}