Adding Custom Fonts to Shopify

[ParulK_21]

Hi Community,

I am absolutely new to this and trying to figure out how to add my fonts. My fonts are Proxima Nova and Fontin, both of which are not on google. I understand I need to Add a file under the Assets before I am able to add code or move. However, I am unable to find the right css file. Can someone please direct me how I can secure those files in the right format which can be uploaded in the Assets as a new Asset.

Much appreciated!

[PageFly-Richard · Accepted solution]

Hi @ParulK_21

I am Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendations.

We will have the following steps:

- first, you need to download the font and convert it to woff2  format

- In the next step you will upload that font to the assets  file

- then add it to base.css or style.scss or theme.css of theme.scss like this: here is an example

- then we can use for any element:

Here link font:

https://freefontsfamily.com/proxima-nova-font-family-free-download/

https://www.cufonfonts.com/font/fontin

Web convert to woff2 : https://cloudconvert.com/otf-to-woff2

Best Regards;

Richard-pagefly

[PageFly-Richard · Accepted solution]

Hi @ParulK_21

I am Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendations.

We will have the following steps:

- first, you need to download the font and convert it to woff2  format

- In the next step you will upload that font to the assets  file

- then add it to base.css or style.scss or theme.css of theme.scss like this: here is an example

- then we can use for any element:

Here link font:

https://freefontsfamily.com/proxima-nova-font-family-free-download/

https://www.cufonfonts.com/font/fontin

Web convert to woff2 : https://cloudconvert.com/otf-to-woff2

Best Regards;

Richard-pagefly

[decco]

Hey here @PageFly-Richard !

Do you mind helping me with this? Im unable to understand where the problem is...

I added at the end of the base.css the code provided in this post, and Im still unable to see the font in my webpage. Its still showing this times new roman style rather than my font.

Any idea what could be the problem?

This is the font Im trying to use

[sabrify]

Hi @decco, I know this is a late response, but I faced a similar issue recently. Shopify can be quite particular about file names, especially when it comes to hyphens and underscores, as they often cause parsing problems. Here's how you can fix it:

1. Click on your font file in the Shopify admin, then select the pen icon to rename it. Make sure the font file name is something simple like "Made Coachella" without any hyphens or underscores.
2. Update your base.css file accordingly: change the font-family, font-url, and any instances where you're targeting the font in your CSS (e.g., for elements like h1 and h2).

This should resolve the issue and allow your custom font to display correctly.

[Trevor8902]

Thanks so much! This worked fine while using a desktop but I noticed when I use my mobile device the font does not show. Has this happened to you? And do you know how I might go about fixing this? Thanks!

[RTC28]

Hi Richard, I've added my font file in .woff2 format under Assets.  The next step is where I can't get to- where you advise we add to base.css and/or theme.css.  How do I add it to one of those?

Thank you in advance!

[Lien]

Hi Richard, I am trying to do the same (add a custom font that is not available in Shopify) to my store but it seems the solution you provided does not support my Theme or doesn't work anymore in general. 

[Lien]

So far, I have:

1. added the font in both woff as woff2 to my Files (Content)
2. Added an asset for each font

3. Added the following code to the theme.liquid file

<style>
@font-face {
font-family: 'Bogart-Regular-trial';
src: url('{{'Bogart-Regular-trial.woff' | asset_url}}');
}

@font-face {
font-family: 'Bogart-Regular-trial';
src: url('{{'Bogart-Regular-trial.woff2' | asset_url}}');
}
</style>

4. Added the following code to the main.css file 

@font-face {
font-family: ‘Bogart-Regular-trial’;
src: url(https://cdn.shopify.com/s/files/1/0596/9618/5538/files/Bogart-Regular-trial.woff?v=1724240364) format(‘woff’);
}

tagname or .classname or #id{

font-family: Bogart-Regular-trial;

}

@font-face {
font-family: ‘Bogart-Regular-trial’;
src: url(https://cdn.shopify.com/s/files/1/0596/9618/5538/files/Bogart-Regular-trial.woff2?v=1724241322) format(‘woff2’);
}

tagname or .classname or #id{

font-family: Bogart-Regular-trial;

}

[Maxb57]

Hi there!

I wanted to find out if you can add the font size to this?

I have multiple headings that are using the same font, but have different px sizes

Hope to hear back from you!

[Paul222]

Hello,

I followed all the instructions you gave, but after that the Font in my Page stayed the same. I tried changing it in the theme settings after writing that css into the page code but the font doesn't show up.

Can someone please tell me how I can change the font after writing the code?

Thank you 🙂

[GracielaF]

Here’s what you should keep in mind depending on how you’re referencing your font files:

1. If you're using the asset_url Liquid filter:
   In this case, it's best to add your @font-face rule directly in the theme.liquid file, inside the <style></style> tags. This ensures that Shopify’s Liquid filter can properly resolve the font paths and load them correctly from your Assets folder.

2. If you’re using relative paths for your fonts:
   If you're using relative paths like url('../fonts/nordine.woff2'), you can add your @font-face rule in base.css or another stylesheet. This relies on the folder structure of your theme, so the paths should be set relative to the location of your CSS file.

By following these tips, your fonts will load smoothly whether you’re working locally or once your site is live!

[YG1]

UPDATE (solved):

I gave up and I uploaded the ttf file directly in the files (Content > Files) of the store then used its link in the src.

I watched this simple tutorial: https://www.youtube.com/watch?v=tmo9MSI28tw

I guess uploading files directly in assets does not work anymore. I've checked so many threads where people have the same problem.

_____________

Hello,

Could you tell me how is it possible to use liquid filters and brackets in a css file? I've tried so many things so far and nothing works for my custom font. I tried in my main.css file, in a css.liquid file, and directly in the liquid file that I need the font but nothing works. I tried tff and woff2 files of the same font.

Is it because the font I want to change is the one of a heading 3?

In fonts.css.liquid:

@font-face {
  font-family: "HomemadeApple";
  src: url({{ "HomemadeApple-Regular" | asset_url }}) format("woff2");
}

In my main stylesheet.css:

.hero-image-with-text h3 {
  font-family: "HomemadeApple" !important;
}

I added my fonts.css.liquid file in the <head> of the layout/theme.liquid:

<link href="{{ 'fonts.css.liquid' | asset_url }}" rel="stylesheet" type="text/css">

Note: I also tried wihtout hyphen and still, it doesn't work.

[Cedcommerce · Accepted solution]

Hello @ParulK_21

Follow the below steps to secure files in the right format to be uploaded to the Assets as a new Asset.

Step 1:

Download the Font and convert it into .woff2 or .woff format.

Step 2:

 Upload in the Asset Folder.

Step 3 :

Add some CSS Code in the base.css file at the bottom. which is written below 

If you are using the .woff format then use the below code 

@font-face {

  font-family: 'Proxima';

  src: url('Proxima Nova Font.woff') format('woff');  

  font-style: normal;

  }

tagname or .classname or #id{

  font-family: Proxima;

}

If you are using .woff2 format then use below code 

@font-face {

  font-family: 'Proxima';

  src: url('Proxima Nova Font.woff2') format('woff2');  

  font-style: normal;

  }

tagname or .classname or #id{

  font-family: Proxima;

}

Refer to the below-provided image.

Hope it helps, let us know if you need more help. 

All the best, 

Team CedCommerce

[LacedRun]

Hello guys, i tried to do the same but it doesn't work, let me show you some sreenshoots

what did i do wrong please ?

[JonnyJonny21]

Hi @PageFly-Richard @Cedcommerce  !

I tried this code - attached screenshot- but have not been able to see the font in my Typography theme setting. Please assist. Also, how do I confirm what is the tag name or .classname etc. if I want to change it throughout.

Many Thanks,

Vatsala

[arenacommerce]

The best way to do is using free app: https://apps.shopify.com/any-font

[Sahle]

The only option that helped me. The app is free and works like a charm. Thanks @arenacommerce 

[theevilgenius]

Unbelievable... This app is amazing. Why is it free??. Worked instantly and saved me a lot of time. THANK YOU!

[JasperBennett]

Step 1: Choose Your Custom Font:

Before we begin, you need to decide on the custom font you want to use. There are several online resources where you can download free or paid fonts, such as OnlineWebFonts. Ensure the font you choose aligns with your brand's image.

Step 2: Download and Extract the Font File:

After you've selected your preferred font, proceed to download the font file. Ensure to verify that it's in the woff or woff2 format, then click on the "Free Download" button. The file typically comes as a .zip file. Once downloaded, extract this file.

Step 3: Upload the Font to Shopify:

1. Log in to your Shopify admin panel.
2. Click on 'Online Store' and then 'Themes.'
3. Click the 'Actions' dropdown on your current theme and select 'Edit Code.'

1. In the 'Assets' directory, click 'Add a new asset.'
2. Upload your .woff or .woff2 font files here.

 

Step 4: Update Your CSS:

Next, you need to update your CSS to include the new font.

1. Still in the 'Edit Code' section, look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.
2. Before </head> line, add the following code, then click on "Save"

<style> 
@font-face {
  font-family: 'Your Font Name';
  src: url('{{ 'YourFontFileName.woff' | asset_url }}');
}
h1, h2, h3, span.marquee-text {
  font-family: "Your Font Name" !important;
} 
</style> 

Replace 'Your Font Name' and 'YourFontFileName.woff' with the name of your font and the filename, respectively.

Source: https://shopifysignals.com/how-to-add-custom-font-to-shopify/ 

[websensepro]

Hi @ParulK_21,

Take a look at this user-friendly video tutorial!  It'll walk you through adding custom fonts to your Shopify store seamlessly, allowing you to integrate your favorite fonts effortlessly. By following this guide, you'll easily clarify any confusion and improve your store's appearance with personalized typography. Enjoy customizing your Shopify store fonts, just as I did with the help of this video! Below, you'll find an image showing the font changes before and after following the tutorial.

Thank you

[MRamzan]

Here is the simple solution to add custom fonts quickly.

It will appear in your settings.

[Vivek_goyal]

Hi,

Here is a video tutorial to add custom font in  your Shopify store. This video tutorial will tell you step by step process to add your custom font in your Shopify store as well as select the tags or complete Shopify store where this new font to be applied.

Feel free to reach out if more details are needed.

Thanks & Regards,

Vivek

[diegoALCE95]

This is the answer that worked for me in the sense that you gotta copy the url straight from Files, otherwise Shopify is marking the file as 'loaded' but its not properly loaded. Thank you.

[JonathanSor]

Another free app with simple UI, that is very easy to use and has live font preview: https://apps.shopify.com/fontpro

[Arif_Shopidevs]

To insert custom fonts into any website, including Shopify, you need to follow a few steps that involve both uploading or referencing the font and applying it via CSS. Here's a step-by-step guide:

Get the Font Files

You will need the font files in formats like .woff, .woff2, .ttf, or .otf. Make sure you have the appropriate formats for web usage, particularly .woff or .woff2 for faster loading.
upload the fonts in the content area in Shopify

add this CSS in Store Desing->theme->edit code->theme.liquid and insert this code.

@font-face {
    font-family: 'YourCustomFont';
    src: url('{{ "your-custom-font.woff" | asset_url }}') format('woff'),
         url('{{ "your-custom-font.woff2" | asset_url }}') format('woff2');
    font-weight: normal;
    font-style: normal;
}

Replace 'YourCustomFont' with the name you want to use for the font, and ensure the file names match what you uploaded.

4. Apply the Custom Font

Now, you can use the custom font in your CSS wherever you want it to be applied, like this:

body {
    font-family: 'YourCustomFont', sans-serif;
}

h1, h2, h3 {
    font-family: 'YourCustomFont', serif;
}

You can also follow this video https://www.youtube.com/watch?v=t1JyoZSyo4k which guide you details

Thank you

[gr_trading]

Hi @ParulK_21 ,

Request you to refer the below video for instruction how to add custom fonts in Shopify.

[richardcobain]

To add custom fonts like Proxima Nova and Fontin to your Shopify store, first, download the font files (usually in .woff or .woff2 format) from a trusted source. In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code, then navigate to the Assets folder and upload the font files there. After uploading, you'll need to add CSS code in the theme.css or theme.scss file (usually located in the Assets folder) to link the fonts using @font-face. Finally, apply the font in your theme by adding the appropriate CSS selectors for the desired elements.