How can I use Google web fonts statically instead of dynamically?

Question

In Germany, lawyers can legally demand money from people who use dynamic web fonts on their websites, if they do not ask the user for permission. (Because of IP data storage.) I used to have this code on a site

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin,cyrillic" rel="stylesheet" type="text/css" />

Now I have to download the fonts and use them statically, storing them in my own website. (This is allowed.) What do I need to do exactly?

I guess I have to put all the fonts in a subdirectory "fonts". But how do I tell the html page to get them there? Which html line has to be used instead of the above line?

The URL https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,cyrillic has the following content:

/* latin-ext */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVQUwaEQbjB_mQ.woff) format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVQUwaEQbjA.woff) format('woff');
  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;
}

However, downloading the fonts only gives ttf files, not woff files. How does one use them?

Answer 1

You can use the Google Webfonts Helper which bills itself as "A Hassle-Free Way to Self-Host Google Fonts". You will just need to:

1. Select a font
2. Choose the character range and font weights you want to use
3. Copy the generated CSS
4. Download all the font files for hosting locally

It should be safe to select the version for "Modern Browsers" and just use the .woff files. According to Can I Use, 98.58% of users can view .woff fonts. It is only Opera Mini users and a tiny sliver of old Android browser users who will be out of luck.

Answer 2

You can host the font yourself and use src:url in the css to reference the file.

 @font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Regular.ttf");
  }
  .Montserrat {
  font-family: "Montserrat";
  font-weight: normal;
  }

If you do so check copyright licensing for the font ... https://fonts.google.com/specimen/Montserrat/about?query=Julieta+Ulanovsky ... all fonts on google have a about and license tab. But I don't know how Germany has decided to write their law. It would be terrible if you had to pay to use a font you yourself created!

On Julieta's github page for the font, (found on the about and license tag) ... https://github.com/JulietaUla/Montserrat ... she has other formats OTF Woff, and Woff2. and a license statement ... https://github.com/JulietaUla/Montserrat/blob/master/OFL.txt ... if that is what you require.

Open Sans license is here: https://github.com/googlefonts/opensans/blob/main/OFL.txt ... it is in TTF and variable font formats.

---

Font file formats,

caniuse lists all the font files as usable. Microsoft and adobe worked togeather on TTF and it has been license to all operating systems to use. None the less it is still a license and those who work on standards want open standards not licensed which is under the control of the companies that own the format. OpenType (OTF) is standards also supported across systems and browsers, WOFF is basically OTF or TTF with metadata and compression supported by all major browsers. The WOFF2 format offers a 30% average compression gain over the original WOFF.

---

Benefit to google hosting the font.

Google hosting is on a distributed network, so it is fast. If you are not interested in changing the fonts or don't need to use them as a stand alone web application such as PWA. They are a good host. But, if you need the font without a internet connection then ... And, now in Germany there may be another reason. Sadly if Germany is doing this because of storage on Google's systems, they may put a much higher storage on non-google systems to have copies of the same data. And, increase network load because there is a chance the font from Google was cached, (IE already downloaded from google so it does not need to be downloaded again).

Website fined by German court

Looking at this article ... https://www.theregister.com/2022/01/31/website_fine_google_fonts_gdpr/ ... it seems they want the user's IP address to only access your site.

A snippet of the article.

The decision, by Landgericht München's third civil chamber in Munich, found that the website, by including Google-Fonts-hosted font on its pages, passed the unidentified plaintiff's IP address to Google without authorization and without a legitimate reason for doing so. And that violates Europe's General Data Protection Regulation (GDPR).

... the page made the user's browser fetch a font from Google Fonts to use for some text, and this disclosed the netizen's IP address to the US internet giant. This kind of hot-linking is normal with Google Fonts; the issue here is that the visitor apparently didn't give permission for their IP address to be shared. The website could have avoided this drama by self-hosting the font, ...

If that stands to avoid Google's servers you will need to host the font on your own website.

Answer 3

CSS (Cascading Style Sheets) are codes stored inside of files written inside and alongside other files of your website.

The styling codes are written, a browser then understands them, but since not all the fonts are stored in the computer and therefore become dynamic.. css has the ability to import them using @import function to make them static, when this function gets called to grab a font from google as an example.. It stores it, but it doesn't mean it will be applied unless that font is set for each html div, paragraph etc,

To make sure the font of your content is always imported rather than dynamically called. You need to make sure of a few things,

1. That the font is imported in the same page as your content by two ways and site structures,

• 1.1 Importing the font in css file e,g style.css, and then linking that file to each content page using this code : <link href="<link of the css file>" rel="stylesheet" type="text/css" />
• 1.2 importing the file each time by using <style> & </style> in html and putting the css @import of the link in between, you can even add that to pages you are not sure the main css will be applied at.

Worth reiterating is that, it's necessary to use font-family: <name of font>; at the specific paragraphs or use .p { font-family: <name of font>; } to generalize all.

It's also better to import all the font at once from Google, let's say I want to import Gentium Book Basic, which isn't stored in computers :

1. I search the font.
2. After finding it, I scroll down, a while until I see Style
3. I click the Plus symbol to add
4. I click Import
5. Copy that code which starts with <style> to your html page of the content.

Then :

Viel Glück !