Use custom fonts with Feather

Do not index

Adding fonts to Feather site is similar to adding fonts to any other sites.

The instructions would say something like: 1. Add this link to your Head html 2. Then add this code to your CSS

For example, here’s what adding Roboto google font looks like

Head over to Feather, go to Settings > Code Injection > Head HTML, then paste the code they are telling to add to <head>. Now switch to CSS tab and paste the CSS code.

In the same CSS tab also add the following piece of code👇

:root {
  --content-font-family: Roboto !important; /* Replace Roboto with the font you are using */
  --headings-font-family: Roboto !important; /* Replace Roboto with the font you are using */
}

Press Save. That’s it!

Using font files

If you have your own custom font files, this is the way for you.

First, you’ll have to host your fonts somewhere. Once you do that, get the link to the file, then paste the following code in Settings > Code Injection > CSS tab.

@font-face {
  font-family: "YOUR_FONT_NAME"; 
  src: url("LINK_OF_YOUR_FONT_FILE")
}

:root {
  --content-font-family: YOUR_FONT_NAME !important; 
  --headings-font-family: YOUR_FONT_NAME !important;
}

In the above code, replace YOUR_FONT_NAME with name you want your font to have and LINK_OF_YOUR_FONT_FILE with the url link to your fonts.

Press Save! And the fonts on your website should get updated.

If you run into any issues please contact support via our support chat widget or email at support@feather.so.