How to download and use google fonts offline?

How to download and use google fonts offline?

An Introduction to Fonts

ยท

2 min read

What are google fonts ?

Google fonts is a tool used by almost every web developer when creating web applications. It provides a wide range of free fonts to use in your websites. However, most developers tend to use this library through the internet by fetching these fonts from an external link.

Wouldn't it be better if you could use the fonts without the need to fetch data from an external server ? Here is how to download and use google fonts in your project

Selecting and downloading a font

Head over to fonts.google.com and search for fonts that you believe will help make your website stand out. I have selected my font as you can see from the image below. There is an option to download the font family into your local computer. This is the first step.

font_google_1.png

Once the download is completed, extract the zip folder and find the TrueType font file. Copy this file and place it in your static folder along with the CSS files already stored.

font_google_2.png

Using the font with CSS

Create a file called font.css. To reference a locally stored font, you can use the font-face rule. Here is how you would implement it

@font-face{
    font-family: projectfont;
    src: url("./Koulen-Regular.ttf");
}

body, input, button{
    font-family: projectfont;
}

In the above CSS, the name of this locally stored font is 'projectfont'. This font is linked to the TrueType font file.

Now, you must link the font.css file to every HTML file and all elements will have the font you downloaded.

Conclusion

With the help of font-face, you now don't need to fetch fonts from an external server. That's it from this blog. Happy coding!

ย