Adding Custom Fonts to Shopify

Solved
ParulK_21
Visitor
2 0 0

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!

Accepted Solutions (2)
PageFly-Richard
Shopify Partner
3617 797 1443

This is an 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

   

RichardNguyen_0-1660796510170.png

 

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

RichardNguyen_1-1660796510116.png

 

- then we can use for any element:

RichardNguyen_2-1660796510204.png

 

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Cedcommerce
Shopify Expert
717 76 110

This is an 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.

 

Cedcommerce_0-1660824444718.png

 



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

 

All the best, 

Team CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here

View solution in original post

Replies 7 (7)
PageFly-Richard
Shopify Partner
3617 797 1443

This is an 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

   

RichardNguyen_0-1660796510170.png

 

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

RichardNguyen_1-1660796510116.png

 

- then we can use for any element:

RichardNguyen_2-1660796510204.png

 

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

decco
Visitor
3 0 0

Hey here @PageFly-Richard !

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

decco_1-1675444560633.png

 

 

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.

 

decco_2-1675444603809.png

Any idea what could be the problem?

 

This is the font Im trying to use

Trevor8902
Visitor
1 0 0

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
Shopify Expert
717 76 110

This is an 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.

 

Cedcommerce_0-1660824444718.png

 



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

 

All the best, 

Team CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
JonnyJonny21
Tourist
35 0 2

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.

 

ParulK21_0-1670255110621.png

 

 

Many Thanks,

Vatsala

arenacommerce
Shopify Expert
6 0 0

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire Us.
Feel free to contact us at support@arenacommerce.com
- Manage your Shopify store metafieds data with Advanced Custom Fields
Sahle
Visitor
1 0 1

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