In the year 2022, Munich Regional Court (Germany) concluded that embedding dynamic objects such as Google Fonts without the visitors’ consent is a ground for the EU citizens to sue for injunctive relief. Thereafter some website operators with embedded Google Fonts are receiving fines. The administrative fine can be 100 to 250,000 euros or, worse decisions.
Using Adobe Fonts may put you in a similar situation plus there is a slight performance penalty (in terms of page loading speed). Unlike Google Fonts, you are not allowed by Adobe to download fonts from Adobe Fonts for self-hosting.
Now, self-hosting font is a big topic itself because of licensing. You have to either use fonts which has GNU GPL 3.0 compatible license such as Roboto (by Google). There are a lot of free fonts today available with such easy licensing. If you want to self-host the paid fonts then you have to purchase the license from the designer or the foundry (which will cost you more and the cost can dependent on pageviews). There are fonts officially available via GitHub but you can not use them. For example, the fonts of The Guardian:
---
1 | https://github.com/guardian/fonts/tree/main |
They have written “The font files in this repo and the CDN URLs at which they are hosted may only be used for Guardian websites or apps. No one is licensed to use them anywhere else.”
The cheapest way of getting paid fonts for self-hosting purposes is purchasing via DesignCutts. Sometimes they put a bundle of 12 fonts at $29 per bundle for sale.
Self-Hosted Fonts vs. Cloud-Hosted Fonts: Which is Better
If you want performance, you should not deliver any web font.
You are getting highly costly fonts via Adobe Fonts at a fraction of the price as a part of an Adobe Creative Cloud subscription. Fonts such as Proxima Nova costs extremely high ($100 per year per “variant” for 1,00,000 page views per month). Adobe Font is cost-effective. Also, your server and CDN bandwidth are getting saved.
Google Fonts serve a limited number of fonts with a license which works with their business model. But, loading from your dedicated server or CDN allows you to do some performance optimization and you have full control. But what will be the actual result that depends on real-life tests? The performance penalty is minor, it is of few milliseconds if you are using https://. There are numerous websites which claim that the performance is too much. That is not true. Using local font gives some extra advantages which are not related to page loading speed.
One of them is GDPR compliance, which is the present topic of this article.
The above artwork is created by David Mcleod, davidmcleod.com.
How To Serve Self-Hosted Fonts in WordPress
WordPress has a lot of plugins for this purpose. But we are demonstrating the manual way via CSS and optionally with JavaScript.
The main difference between using web fonts and hosting ourselves is that there’s no need to use a third-party service and we can add @font-face code to our main stylesheet. The CSS to use is practically the same, only for self-hosted, you can use the path to the font file such as ../fonts/FONT_NAME.woff2 rather than an absolute URL (such as https://fonts.gstatic.com/[...]/FONT_NAME.woff2. These are things you’ll need to know for CSS:
@font-face: We refer to the fontfont-family: This tells the name of our fontsrc: Path to get loadedfont-weight: Default is 400, we can add the specific valuefont-style: italicize, bold, normal etcfont-display: Options are auto, swap, fallback, optional
We want FOUT (flash of unstyled text) because the users can read words written with system fonts and font-display: swap gives you that ability. You’ll get excellent documentation here:
1 2 3 4 | https://fonts.google.com/knowledge/glossary/fout https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide |
The cost of font increases with the support of special features. This a basic example of loading font via CSS, you have to download Arvo-Regular.woff2, Arvo-Regular.ttf etc font files and place it at /wp-content/themes/twentytwentytwo/fonts/ for this example:
1 2 3 4 5 6 7 | @font-face { font-family: Arvo; src: url(http://example.com/wp-content/themes/twentytwentytwo/fonts/Arvo-Regular.woff2); src: url(http://example.com/wp-content/themes/twentytwentytwo/fonts/Arvo-Regular.woff); src: url(http://example.com/wp-content/themes/twentytwentytwo/fonts/Arvo-Regular.ttf); font-weight: normal; } |
At least load woff2, woff and ttf since not all the browsers will recognize all the formats.
You can load self-hosted font via JavaScript too:
1 2 | https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load |
TypeKit has webfont loader:
1 | https://github.com/typekit/webfontloader |
As for self-hosting plugin font, we already gave an example in the article How to Use JuliaMono Font in Urvanov/Crayon Syntax Highlighter.
