How can I add a custom font to my website theme?

Store Design
, ,
1

Hello,

I purchaed a theme from Elements.envato.

and Im trying to add a FONT that is currenly not there,

I have the font in WOFF/WOFF2 format but need help finding where or how to add it to

the code.

https://f92ae2.myshopify.com/password

password:yoshi

The theme code does not have a base.css

I see Theme.scss.liquid -style,css.liquid.

Any help that can point me to the write dirrection

will be much appreciated

Thank you

2

Hello,

Adding a custom font to your Shopify theme can be a great way to maintain brand consistency, but it’s important to consider a few things before proceeding:

  1. Performance: Custom fonts can slow down your site, especially if they aren’t optimized for web use. The longer your site takes to load, the more likely you are to lose visitors.

  2. Licensing: Make sure you have the right to use the font on your website. Some fonts are licensed for personal use only and require purchasing a commercial license for online use.

  3. Compatibility: While WOFF/WOFF2 formats are widely supported, ensure that all your users’ browsers will render the font correctly.

  4. Fallbacks: Always have a fallback font in case the custom font doesn’t load. This will ensure your website remains functional and legible.

If you decide to proceed, here’s how you might add the font to your Shopify store:

  1. Upload your font files: Go to the Assets directory in your Shopify theme code and upload your WOFF/WOFF2 files there.

  2. Edit the CSS: In your Theme.scss.liquid or style.css.liquid file, you will need to write a @font-face rule that defines the font and points to the uploaded font files. Here’s an example of what that might look like:

@font-face {
    font-family: 'YourFontName';
    src: url('{{ 'YourFontFile.woff2' | asset_url }}') format('woff2'),
         url('{{ 'YourFontFile.woff' | asset_url }}') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
  1. Apply the font: Use the font-family in your CSS where you want to change the font, like so:
body, h1, h2, h3 {
    font-family: 'YourFontName', sans-serif;
}

Please remember to replace ‘YourFontName’ and ‘YourFontFile.woff2’ with the actual names of your font and files.

While these steps can guide you through the process, if you’re not comfortable editing your theme files, it’s a good idea to consult with a Shopify Expert or a developer who can assist you further.

Best regards!

3

You can try this solution.

Fonts will appear in your settings.

1 Like
4

Hi,

  1. How could you add two types of font ? I already added my first custom font but want to write some text on the website in another custom font

  2. Also on the first custom font, How could I add an UltraBold format for some Heading/titles (but I only want this on some of them, not across the whole site)

    Thanks

5

Hi, I followed your steps on the video but the option to add custom font in customize is not showing on my end.

Xiela_0-1717713833503.png
Xiela_0-1717713833503.png498×258 4.6 KB

6

Hi. everything is working great and my new font pops up but as soon as i click “save” it disappears! =(
Why does this happen and how to fix it?

7

Hello,

You can use this free app that has live font preview (on your store) and is very easy to use. Supports custom and Google fonts:

https://apps.shopify.com/fontpro

8

Hi @sergio-silva ,

Please refer the below video for instructions how you can convert the OTG or TIFF fonts and it to Shopify store.

Hope this will helps…

9

This works for me
https://www.codeniden.com/how-to-add-custom-font-on-shopify/