Using Custom Fonts on your Website
Tags: beginners, css, html, codenewbie
Published: 2022-02-14 22:07:25

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.


|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](https://www.w3schools.com/css/css3_fonts.asp)_

It's worth noting, the [World Wide Web Consortium (W3C)](https://www.w3.org/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yghrw2x4il9qqn8mbsu0.png)

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](https://cloudconvert.com/ttf-to-woff2). 

![Screenshot of cloudconvert website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6778o8hyfu4k5za7if0.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyptc1el6cafm60vb4hw.png)

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>
```

![Screenshot of sample app showing 2 lines using a custom font and another using the default style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hvldxayswkybh2psanx.png)
## Sample app

I've created a working sample application demonstrating how this concept and placed the code for it on [GitHub](https://github.com/OnyxPrime/custom_fonts_sample).

{% github OnyxPrime/custom_fonts_sample no-readme %}

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