How to Self-Host Google Fonts on Your Own Server

Kelli Blalock — Tue, 19 Feb 2019 01:55:40 +0000

Google recommends that you use the code that they supply for using Google Fonts on a website in their FAQ, but if you want full control of the fonts being displayed, self-hosting Google Fonts on your own server is an option.

Why Self-Host Google Fonts

One might expect that the font shown on a website using Google Fonts won't change after picking out the font, however it can change without your knowledge. Because Google serves the latest version of a font, at any time the font might change to a new version without any notice (example of an issue where this happened). I doubt there would be a drastic change, but it's possible that there might be a change to the font served by Google that you don't like.

Performance is another reason why developers self-host Google Fonts, however some developers say self-hosting Google Fonts is faster and some say it's not. On the one hand, you have Google's optimized servers in locations all around the world and on the other hand, you have less trips to a third party server. That's simplifying it a bit, but maybe it's one of those things you have to test for yourself.

In my case, I tried self-hosting a Google Font to help resolve a FOUT (Flash of Unstyled Text) issue that was happening when loading my website with Edge. It didn't fix my problem, but I'm glad I learned how to self-host Google Fonts while trying to fix it.

Where to Get Google Fonts for Self-Hosting

The fonts you find at fonts.google.com will have a download button that lets you download the font, but you'll only get font files with the .ttf extension. For modern browsers, you'll likely want the .woff2 and .woff versions of the font which use compression and are likely to load faster. You can get the .woff and .woff2 versions of Google Fonts from google-webfonts-helper.herokuapp.com which is not an official Google site, but is linked to from the google/fonts GitHub Repository README as a place to go for help with self hosting.

Steps for Self-Hosting Google Fonts

Note: Before self-hosting a font, it's a good idea to read the font license and make sure you can follow license requirements for the font. See "Take Care to Follow the Font License" below.

Go to google-webfonts-helper and select the font you'd like to download.
Under "Copy CSS" choose "Modern Browsers" for supporting current browsers that use .woff and .woff2 or "Best Support" if you want to support older browsers too.
- See CSS-Tricks - Using @font-face which is mentioned on the google-webfonts-helper site if you need help determining which one to choose and how to customize the @fontface block to match your site's level of support.
Copy the CSS given for the font and add it to the appropriate stylesheet for your site.
- You can add the font-display property to the @font-face block if desired to help control FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text) on browsers that support it (see font-display for the masses if you're unfamiliar with font-display and caniuse.com for CSS font-rendering controls for info on browser support). Note that IE and Edge are among the browsers that don't support it.
Under "Download files" click the button to download the font's zip file and then extract the files and add them to your project.

Take Care to Follow the Font License

Note: This is information I've found about Google Font licenses that I hope will be helpful, but I'm not a lawyer and this isn't legal advice. You should read the font license information yourself since you're responsible for following it.

When you download files from google-webfonts-helper, it doesn't include a text document with the font license. Below the download button, it says "See Google Fonts Open Source Font Attribution to find out the specific license that this font uses." That link isn't to the actual text document license for the font, so I looked deeper to find one.

According to the google/fonts repo, it has a license in the directory for each font family, so you may want to find the license for your font in this repo and read it. I did, and it made me want to add a copy of that license in the directory with the font I was using.

Example

Since I was looking for the Quattrocento Sans font which uses the SIL Open Font License, I found the license text file under ofl/quattrocentosans in the google/fonts repo. The license file is named OFL.txt and has copyright info for this particular font at the top.

I read the license and one thing it says is this

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

Since I was going to put the font in a GitHub repo, that probably counts as redistribution, so I put a copy of the font's license file, OFL.txt, in the directory with the fonts in my repo.

Summary

Self-Hosting Google Fonts may not be for everyone, but if you really care about a font never changing to a new version without your knowledge, then it may be the way to go. If you want to self-host Google Fonts to make your site faster, you may need to do some tests to see if it really is faster.

Whatever your reason for self-hosting Google Fonts, you can download them from google-webfonts-helper (unofficial site) and follow the steps to add them to your site. It's also a good idea to read and follow the license for the fonts used.

Demo your App in your GitHub README with an Animated GIF

Kelli Blalock — Mon, 11 Feb 2019 00:52:51 +0000

I have my GitHub link on my resume and if I'm lucky, potential employers might check out my apps on GitHub. However, I know they're busy and won't have much time to spend so I wanted to make it easy for them and others visiting my repo and show the app in action in the README.md file that's displayed when you go to a repository.

Embedding a video in a GitHub README would be a dream come true, but as I found out, it's not possible--you'd have to link to the video instead. You can, however put an animated GIF in a README file and that's what I've done with many of my projects.

Here's one for my Farmer's Market Finder app:

Unfortunately, animated GIFs can't normally be as long as videos, but you can use them to quickly show off some core functionality of your app.

How to Create an Animated GIF?

Here are a couple apps you can use to create animated GIF screen recordings.

Windows

I like to use ScreenToGif which is a free open source app for Windows 7 or later. The software is intuitive to use for simply creating an animated GIF of an area you choose on your screen and they also have a User Guide.

Mac

I use Gifox when creating animated GIFs of my screen on the Mac. It sits up in my menu bar and is easy to use. I use the paid version because GIFs created with the free version are limited to 10 seconds and have a watermark.

Other

I know I've left out options for other operating systems and devices, but I only wanted to recommend the ones I've tried myself. Please comment below if you can recommend other apps for taking animated GIF screen recordings.

Adding the Animated GIF to your README

Once you've created the animated GIF, you can embed it in your README.md file like you would a regular image.

I usually create a 'Demo' Heading in my README under the description of the app and put the animated GIF under the Demo heading along with a link to a demo of the site online.

If you don't have a good place to host images, you could do what I have done and create a demo (or better named) folder in your GitHub repository and upload the GIF there, then link to it in the README.

Example:

![Farmers Market Finder Demo](demo/demo.gif)

Note: The alt text is what goes between the square brackets and then the URL to the GIF goes between the parentheses. If the image is in your GitHub repository, you can use a relative link like I did in the example.

Thanks for reading my first post!

DEV Community: Kelli Blalock