While Google provides a free CDN for their web fonts, there are two reasons you might want to host them yourself instead…
- It can be more performant.
- You don't want Google tracking info on your site (in 2022, Germany ruled that fonts embedded from Google violate GDPR).
Fortunately, self-hosting Google Fonts involves just three steps…
- Download the font files.
- Upload them to your server.
- Load them on your site.
Let's look at exactly how to do it!
1. Download the font files
First, you need to get the font files to self-host.
- Visit the Google Webfonts Helper.
- Search for your typeface.
- Select the character sets (ex. Latin, Cyrillic) and styles/weights (ex. italic, bold) that you want.
- Select your browser support option. I'd recommend "Modern Browsers."
- Click the "Download" button to download your font files
2. Upload the fonts to your server
Once you have the files, you need to host them somewhere.
Upload them to your server the same way you would host your CSS or JS files. You might do this through an FTP client, a GUI (like the WordPress file uploader), or by pushing your codebase to GitHub.
Whatever your deployment process is, use it for the font files, too.
3. Load the font on your site
Once that's done, you need to load them in your CSS.
With Google's CDN, you would drop in a link to their CSS file. When self-hosting, you have to create that file yourself. Fortunately, the Webfonts Helper provides that code for you, too.
Here's what the CSS file Merriweather in regular, italic, bold, and bold italic looks like…
/* merriweather-regular - latin */ @font-face { font-display: swap; font-family: 'Merriweather'; font-style: normal; font-weight: 400; src: url('../fonts/merriweather-v30-latin-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Merriweather'; font-style: italic; font-weight: 400; src: url('../fonts/merriweather-v30-latin-italic.woff2') format('woff2'); } /* merriweather-700 - latin */ @font-face { font-display: swap; font-family: 'Merriweather'; font-style: normal; font-weight: 700; src: url('../fonts/merriweather-v30-latin-700.woff2') format('woff2'); } /* merriweather-700italic - latin */ @font-face { font-display: swap; font-family: 'Merriweather'; font-style: italic; font-weight: 700; src: url('../fonts/merriweather-v30-latin-700italic.woff2') format('woff2'); }
Copy/paste that into a CSS file (I call mine fonts.css), update the url() paths, and load it the same way you would any other CSS file on your site.
Don't forget to also declare the font-family in your CSS…
body { font-family: "Merriweather", serif; }
The Webfonts Helper also automatically adds the font-display: swap property for more performant font loading.
Like this? A Go Make Things membership is the best way to support my work and help me create more free content.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] Self-Hosting Fonts"