Adding Custom Web Fonts

Tagged: frontend CSS

Tested on: Bridgetown v1.0

Custom fonts help a site stand out from the crowd. Adding fonts directly to your Bridgetown repo and your stylesheet is easy!

Let’s say you have a web font file: DMSerifDisplay-Regular.woff2. What are you supposed to do with it? First, you’ll need a stylesheet for your font(s).

Save a file in frontend/fonts/dm/dm.css:

@font-face {
  font-family: "DMSerif";
  src: url("./DMSerifDisplay-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

Then copy the font file into the dm folder.

Finally, at the top of your index.css file, all you have to do is add one line:

@import "../fonts/dm/dm.css";

Bingo! You’ve just added a custom font to your Bridgetown site. For more information about @font-face rules, check out this guide on MDN.

Return to Cards