If you have noticed outage, I must apologize. I was experimenting with what can be or should be done with Google Fonts. Of many things Google offers for free, Google Fonts is the platform caters to creative purposes without extra charge. Many font creators contribute towards the goal, and some of the fonts, such as Nanum series from Naver, became de facto Korean fonts for many. And Google is open to let other websites to take advantage of it.

The conventional method, linking to Google Fonts on the stylesheet, however, does not comply with GDPR; and without a doubt, other regulations from other countries would soon follow. In 2022, there was a ruling in Germany embedded Google Fonts is not GDPR-compliant. Those are the bad news; the good news is Google does not charge fees for self-hosting the fonts either.

Instructions

Most new fonts are now offered in both variable and static. If you have a choice, I recommend choosing variable fonts (not to be confused with variable-width), as most modern browsers support the format.

1. Download the font of your choice from Google Fonts.
2. Unzip the file. The files are likely in .ttf, and we want woff2 for speed. There are free woff2 converter available online, feel free to use any of them to covert the files.
3. Create a folder named fonts in the theme folder* and upload both .ttf and .woff2 files.
4. For variable fonts, replace the bracketed [font_name] and [font_filename] to match your font. Insert the lines in your .css stylesheet **.

//For variable font
@font-face {
    font-family: "[font_name]"; 
    src: url('fonts/[font_filename].woff2') format("woff2 supports variations"), 
        url('fonts/[font_filename].woff2') format("woff2-variations"),
        url('fonts/[font_filename].ttf') format('truetype'); 
}

For static fonts, replace the bracketed parts as well. The only difference is that you need to look up font-weight in numbers and font-style, likely normal or italic, from Google Fonts.

//For static font
@font-face {
    font-family: "[font_name]"; 
    src: url('fonts/[font_filename].woff2') format('woff2'),
        url('fonts/[font_filename].ttf') format('truetype'); 
    font-weight: [number];
    font-style: [normal, italic, or oblique];
}

5. Once done, you can remove the existing Google Fonts links. Now the audience would be served with fonts directly from your server.

*If you are using a child theme, upload it under child theme folder. The folder should be in the same folder as the stylesheet. The default path would be wp-contents/themes/[your name].

** For clarification, it has to come after the first @import statement to load parent theme’s stylesheet. If you are unsure, add it at the bottom of the .css file.

Afterthoughts

When I first started exploring fonts for web designing, simply linking it to Google Fonts was more than enough. Google’s own servers were almost always faster than whatever hosting service I would be using. Nowadays, even the most basic WordPress blogs are served via CDN, — and most hosting services have WordPress cache plugins pre-installed — and if your contents are loading slowly anyway, it’s likely a moot point to serve fonts any faster. Though debatable, some even suggest self-hosting can have better performance by lessening the need to make additional lookups.

The other thing I noticed is that there are paid services, in forms of plugins most of the time, that promise to provide Google Fonts in GDPR compliant way. I suppose it is indeed an option. If you decided to pay for every GDPR-related services, I would seriously suggest moving the entire site to a hosting service provider that takes care of it for you. It may be quite demanding to keep up with the new changes; nevertheless, these are the changes that were meant to happen one way or the other for the sake of privacy.