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

Store Design
, , ,

Topic summary

Topic: Adding a custom font to a Shopify store after .woff/.woff2 uploads didn’t take effect.

Key guidance provided:

  • Upload the font file: Online Store → Themes → Edit code → Assets → Add a new asset. Use web font formats (.woff or .woff2).
  • Register the font in CSS with @font-face (a CSS rule that defines a custom font), setting font-family and src to the uploaded file; use format(‘woff’) or format(‘woff2’) accordingly.
  • Apply the font by setting font-family on the desired tags, classes, or IDs in base.css/style.css/theme.css, then save.

Alternatives suggested:

  • Use Shopify apps to manage custom fonts (e.g., Font Picker, Font-io, Any Font, Fontify).

Additional resource:

  • A linked YouTube tutorial showing the full process.

Notes/clarifications:

  • .woff/.woff2 are web font formats; ensure correct file names and paths in CSS.
  • If using .woff2, adjust the src line to format(‘woff2’).

Status: No confirmation of success from the requester yet; solutions and a video guide were provided, and the issue appears unresolved/ongoing.

Summarized with AI on December 12. AI used: gpt-5.
1

Hello guys!

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

Thank you in advance!

2

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

1 Like
3

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

4

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

  1. 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’); )

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

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.

5

hi @goldenlifters ,

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