How to use Custom fonts

In this article:

What fonts are available?

Font available for headings and text include:

Alegreya Sans
Alegreya
Anonymous Pro
Archivo Narrow
BioRhyme
Cabin
Cardo
Chivo
Cormorant
Crimson Text
DM Serif Display
Eczar
Fira Sans
IBM Plex Sans
Inconsolata
Inknut Antiqua
Inter
Karla
Lato
Libre Baskerville
Libre Franklin
Lora
Merriweather
Montserrat
Neuton
Noto Sans JP
Nunito Sans
Open Sans
Oswald
Playfair Display
Poppins
Proza Libre
PT Sans
PT Serif
Raleway
Roboto Slab
Roboto
Rubik
Source Sans Pro
Source Serif Pro
Space Mono
Spectral

If you find that the available fonts don't suit your store, no worries! You can install any custom font using our Custom code feature. Custom code is available with any paid plan, like Starter, Business, or Premium.

Can I use a custom font?

Yes! You can add any custom font to your store that you'd like, as long as it's hosted (or stored) on the internet. It's not possible to upload the custom font to your store in Sellfy, and that's why it needs to be stored elsewhere online.

Choose a font

First, locate the font you want to install. In our tutorial, we'll use Google Fonts which offers over 1400 free options! But, if you already have a font chosen, you can skip to the next section.

Go to fonts.google.com
Pick a font
On the font page, click the blue text + on the right to select it

Install the code

Once you have your chosen font, it will need to be installed into your store using the Custom code section. It may seem a bit technical but don't be discouraged, this mainly involves copying and pasting.

After selecting the font, you'll see the code details pop up on the right side, as seen in the video above. (If you've selected more than one font or leave this page and come back, you can find the selected font by using the icon in the upper right corner of the Google fonts page.)
Copy the font code and paste it into the Custom code field in your store. Go to the Store Customizer > General settings > Custom code field.
Copy the code provided below and paste it into the Custom code field below the font code.

<style>
*:not(i){
  FONT_FAMILY_CODE_GOES_HERE !important;
}
</style>

Return to the font page and copy the CSS rules to specify families. Copy all text, except for the semi-colon.
Replace the text FONT_FAMILY_CODE_GOES_HERE with the copied CSS code. It should look like this:

<style>
*:not(i){
  font-family: 'Mouse Memoirs', sans-serif !important;
}
</style>

Attention! Please check that your "!important" is located in the correct place. It should be added at the end of the code but before the semicolon. There should not be a semicolon between font-family code and "!important"

Your final code should look like this:
Publish your store changes. Now your custom font is applied to all elements on every page!