How can I add a custom font type to my online store?

[goldenlifters]

Hello guys!

Could somebody help me out on how I can add a custom font type to shopify?

Thank you in advance!

[Abdosamer]

Hi @goldenlifters , did you upload the custom font file to shopify?

[goldenlifters]

Thank for your reply Abdosamer!

Yes, I tried to upload it with woff2/woff but it seems like it hasn't worked.

Best Wishes,
Farid Mirzayev

[Anshul_arora]

Hello @goldenlifters ,

I understand you are looking to add custom fonts in your shopify store.

Please take a look, have you follow the below mentioned steps for adding custom font -:

1. Go to Online Store -> Themes ->Action(Three dots) -> Edit code.

2. Go into the Assets -> Click 'Add a new asset' -> Select font file -> Click Upload.

(Before adding the font file please download the font and convert it into .woff2 or .woff format.)

3. Now add , below mentioned code in your store .css file (base.css/style.css/theme.css)

@font-face {
font-family: 'Font-File-Name';
src: url('Font-File-Name.woff') format('woff'),
font-weight: normal;
font-style: normal; }

tagname or .classname or #id {
font-family: 'FontName' !important;
}

(Please change Font-File-Name with your font file name and replace tagname, .classname, #id with the html tag, classes, ids in which you want to use this custom font)

(Note: If you are using .woff2 format file then replace src code line of the above mentioned code with this src: url('Font-File-Name.woff2') format('woff2'); )

5. Save changes.

If still you are unable to add a custom font, then you can go with an alternate solution 'Shopify apps'. I have mentioned some of the shopify apps, which you can use for adding custom fonts.

- https://apps.shopify.com/font-picker
- https://apps.shopify.com/font-io 
- https://apps.shopify.com/any-font 
- https://apps.shopify.com/fontify-change-customize-font-for-your-store

Kindly take a look.

I hope the solution helps you.

Please let me know if you have any query or need further assistance.

Thank you.

[gr_trading]

hi @goldenlifters ,

Find the below video with detailed instruction how to add custom fonts in Shopify.