How to use Custom fonts

In this article:

What fonts are available?

Can I use a custom font?

Choose a font

Install the code


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.

  1. Go to fonts.google.com
  2. Pick a font
  3. 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.

  1. 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.)
  2. 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.
  3. Copy the code provided below and paste it into the Custom code field below the font code.
  4. <style>
    * {
      FONT_FAMILY_CODE_GOES_HERE !important;
    }
    </style>
    	
  5. Return to the font page and copy the CSS rules to specify families. Copy all text, except for the semi-colon.
  6. Replace the text FONT_FAMILY_CODE_GOES_HERE with the copied CSS code.
  7. Publish your store changes. Now your custom font is applied to all elements on every page!
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us