Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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
- 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
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.
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.
Hope it helps, let us know if you need more help.
All the best,
Team CedCommerce
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
- 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
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.
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
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!
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.
Hope it helps, let us know if you need more help.
All the best,
Team CedCommerce
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
The best way to do is using free app: https://apps.shopify.com/any-font
The only option that helped me. The app is free and works like a charm. Thanks @arenacommerce
User | RANK |
---|---|
201 | |
169 | |
62 | |
51 | |
47 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023