How to use custom fonts on your webpage

Reading time: 1 minute(s)

There are a couple different ways you can use custom fonts on your website.

Method one: Google Fonts

Check out Google Fonts for a font that you like. Then, click select this style for all of the font options you’d like to have (I usually pick regular,regular italic, and bold). Then, select the @import option on the right and copy that code to the top of your stylesheet. Then, use the font name with the font family property.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
body {
  font-family:Roboto;
}
I know it's Google, but it's easy because you don't need to worry about hosting your own font.

Method Two: Uploading your own font

Websites like 1001fonts and DaFont have lots of fonts that are free to use (but make sure to read the licensing requirements for whichever ones you choose to use).

Identify one you want to use on your website, and download that font. Downloaded fonts usually come in zip files, but you only need to upload the font file itself to your website. They are usually in .TTF and .OTF file types.

Place the @font-face code at the top of your stylesheet.

@font-face {
  font-family: myFirstFont;
  src: url(/fonts/myfont.ttf);
}
body {
font-family:myFirstFont;
}

The above example assumes your font is in a folder called fonts and your font file it named myfont.ttf. Be sure to link your font file correctly!

Leave a Comment