How to use woff website fonts in your website

If you already have your desktop fonts (Such as TTF format fonts), meaning fonts that work on your computer but you need these fonts in web format.

You can use online tools to convert your TTF font into Woff and Woff2 formats for use on the web.

Convert your font file to Woff and Woff2

use online converter

Once converted download these to your fonts directory in your website project.

It’s important to load both Woff and Woff2 to ensure maximum compatibility. I found this to be especially true with Shopify websites. As loading just woff2 wont allow the font to render.

Load fonts from Woff files

@font-face {
  font-family: "GraphieBold";
  src: url("../fonts/Graphie-Bold.woff2") format("woff2"),
  src: url("../fonts/Graphie-Bold.woff") format("woff");
  ;
  font-weight: 400;
}
@font-face {
  font-family: "GraphieRegular";
  src: url("../fonts/Graphie-Regular.woff2") format("woff2"),
  src: url("../fonts/Graphie-Regular.woff") format("woff");
  font-weight: 600;
}

@font-face {
  font-family: "GraphieSemiBold";
  src: url("../fonts/Graphie-SemiBold.woff2") format("woff2"),
  src: url("../fonts/Graphie-SemiBold.woff") format("woff");
  font-weight: 700;
}

Create variables for fonts

$font_bold: "GraphieBold", sans-serif;
$font_regular: "GraphieRegular", sans-serif;
$font_semibold: "GraphieSemiBold", sans-serif;

Remember the common font weight mappings:

[[2023-08-23-common-font-weight-name-mapping]]

Use the fonts in CSS classes

.my_title {
  font-family: $font_semibold;
}