Can I upload a custom font to my Shopify store?

dboost1
Tourist
7 0 2

Hello! I'm looking for help in uploading my own custom font to my store. 

Replies 10 (10)

diego_ezfy
Shopify Partner
2936 562 883

@dboost1 

Kindly take a look into this step-by-step tutorial on how to add custom fonts to your website. 

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

LitExtension
Shopify Partner
4860 1001 1133

Please follow the steps:
- Step 1: Upload font in Assets. https://i.imgur.com/AqO9RnX.png
- Step 2: Get font-face in the CSS file. Ex:
@font-face {
font-family: 'font-name';
src: url('{{ 'font-name.eot' | asset_url }}') format('embedded-opentype'),
url('{{ 'font-name.ttf' | asset_url }}') format('truetype'),
url('{{ 'font-name.woff' | asset_url }}') format('woff'),
url('{{ 'font-name.svg' | asset_url }}') format('svg');
font-display: swap;
}
Hope it clear to you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
dboost1
Tourist
7 0 2

I tried this but it isn't appearing correctly

diego_ezfy
Shopify Partner
2936 562 883

@dboost1 

Please share your URL.

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

dboost1
Tourist
7 0 2
diego_ezfy
Shopify Partner
2936 562 883

@dboost1 

You were almost there. You have written "ttf" in the format of the font family. You should use "woff" in your case.

diego_ezfy_1-1626400832499.png

 



diego_ezfy_0-1626400799563.png

diego_ezfy_2-1626400869442.png

 

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

MonitorMan
New Member
4 0 0

Hi Diego, I've done exactly the same as written. Still,  the font won't show. Very weird. Could you maybe have a look at it?

MonitorMan
New Member
4 0 0

Screenshot 2021-08-25 at 12.45 1.jpg

MonitorMan
New Member
4 0 0

Screenshot 2021-08-25 at 12.47.jpg

MonitorMan
New Member
4 0 0

Screenshot 2021-08-25 at 12.49.jpg