DEV Community

Cover image for Using Custom Fonts on your Website
Ryan Overton
Ryan Overton

Posted on

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">
Enter fullscreen mode Exit fullscreen mode

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.

Font format IE Chrome Firefox Safari Opera
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

* 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.

Screenshot of Google Fonts website displaying Supermercado One font

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.

Screenshot of cloudconvert website

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.

File explorer in VS Code showing addition of new font

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);
}
Enter fullscreen mode Exit fullscreen mode

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

p {
  font-family: mySuperFont;
}

Enter fullscreen mode Exit fullscreen mode

or by inline styling

<div style='font-family:mySuperFont'></div>
Enter fullscreen mode Exit fullscreen mode

Screenshot of sample app showing 2 lines using a custom font and another using the default style

Sample app

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

GitHub logo OnyxPrime / custom_fonts_sample

Using custom fonts in your website

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

Top comments (0)