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

[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!

[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

[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