Using Custom Fonts on your Website

The team at Google has provided an amazing library of fonts which you can use for free on your website. These fonts have allowed developers to show their creativity, as well as uniqueness. In addition, Google has also provided a service allowing you to load any of these fonts into your site without having to host them yourself. Which quite a few of us are probably using at this very moment.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Robot">

But what about when you’ve got a custom font that’s been created just for you, or you can't use the service provided by Google for business or other reasons? How can you use that font on your site?

In this article, I’ll show you how you can use those custom fonts, or still use the fonts provided by Google without using the Google Fonts APIs.

Font types

There are several different font types and not all browser versions support every font type. So, check the table below to understand what browsers support what types and the versions at which they started supporting them.

* table data provided by w3schools

It's worth noting, the World Wide Web Consortium (W3C) recommends using the Web Open Font Format (WOFF). WOFF is a TrueType font (TTF) or OpenType font (OTF) with compression. WOFF 2.0 is a newer version of WOFF, just with better compression.

Download font

To get your font from Google, navigate to https://fonts.google.com, select your desired font, and click Download family.

This downloads a ZIP file containing all the variations (medium, bold, italic, etc.) of the font. Once you unzip the file, you will notice it downloads a TTF format. You can either use this as is, or convert it to WOFF2. Converting is recommended for production.

Convert font

To convert the font to WOFF2, you can use a service like cloudconvert.

Upload your TTF file, click Convert, then click Download.

Use font in your website

With your font converted to WOFF2, you’re ready to add it to your website.

Move the converted font into your website folder.

Next, you’ll add a @font-face rule. The @font-face rule allows you to define new font types which can be used throughout your CSS.

The @font-face rule requires you to give the font a name and the url where the font file is located. When the rule is loaded into the client's browser, it will download and load the font file from the specified location.

Place the @font-face rule at the top of your <style> tag or CSS.

@font-face {
  font-family: mySuperFont;
  src: url(assets/SupermercadoOne-Regular.woff2);
}

Now, the font can be referenced by the other styles in CSS,

p {
  font-family: mySuperFont;
}

or by inline styling

<div style='font-family:mySuperFont'></div>

Sample app

I've created a working sample application demonstrating how this concept and placed the code for it on GitHub.

If you've got any questions, comments, or other ways you get custom fonts in your websites let me know in the comments below.