Adding Custom Fonts to Shopify

Solved

Adding Custom Fonts to Shopify

ParulK_21
Visitor
2 0 1

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
4439 1016 1669

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 Partner
718 76 113

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 12 (12)

PageFly-Richard
Shopify Partner
4439 1016 1669

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!

RTC28
Visitor
1 0 0

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!

 

Cedcommerce
Shopify Partner
718 76 113

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 Partner
7 0 1

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 

 

JasperBennett
Shopify Partner
1 0 0

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.

JasperBennett_0-1705752756026.png

 

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.

JasperBennett_1-1705752756026.png

 

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.'

JasperBennett_2-1705752756025.png

 

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

JasperBennett_3-1705752756026.png

 

 JasperBennett_4-1705752756026.png

 

 

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.

 

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

websensepro
Shopify Partner
1053 149 157

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.

websensepro_0-1709816640084.pngwebsensepro_1-1709816648034.png

 

Thank you

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

MRamzan
Shopify Partner
183 3 26

Here is the simple solution to add custom fonts quickly.

It will appear in your settings.

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

Vivek_goyal
Shopify Partner
49 4 14

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

Product Designer & Variants: Create custom products with ease. (Try for free)
Need a Shopify developer? Hire Us
Email: info@scaleupprint.com For Shopify tips & tricks follow our YouTube channel