How can I upload a custom font without a theme.css file?

Technical Q&A

Topic summary

Main issue: Adding a custom font in the Maker theme without a theme.css file.

  • The OP couldn’t find theme.css and instead added @font-face and font variables in snippets/css-typography.liquid (Maker theme doesn’t use a single theme.css). @font-face is a CSS rule to load custom font files.
  • Initial symptom: text selectors updated but displayed a default serif font, not the uploaded font from Assets.
  • One suggestion was to add code under :root in layout/theme.liquid; OP found a similar root block in a snippets file and used that.
  • Testing indicated other fonts worked, hinting the issue might be due to a trial font file. This was tentatively confirmed.

Resolution by OP:

  • Uploading the font via Settings > Files and referencing that file URL in CSS resolved the problem. Using Assets for that specific font failed for unclear reasons.

Status and follow-ups:

  • OP’s issue is resolved; they recommend linking from Settings > Files if Assets fails.
  • Another user reported the same issue; no solution provided yet.
  • A different user asked how to link fonts after uploading to Files; no detailed steps were given, so this remains open.
Summarized with AI on February 10. AI used: gpt-5.
1

Hello,

I am trying to upload a custom font to my store. I’ve watched tutorials, forums etc. All have pointed to adding snippets of code to a theme.css file or some variation of this file name. However, any filename variation mentioned I do not seem to have - so I have no idea where to add the code.

Does anyone know what file I should be looking for if I don’t have a theme.css or similar? I am using the Maker theme. I’ve added screenshots below to show what files I have when I search for css or within the asset folder.

Thanks

Screen Shot 2022-01-04 at 22.28.40.png
Screen Shot 2022-01-04 at 22.28.40.png282×602 19.7 KB

Screen Shot 2022-01-04 at 22.28.33.png
Screen Shot 2022-01-04 at 22.28.33.png299×564 21.8 KB

2

Hi @imanexbelle ,

Have you uploaded the font to Assets? If all the steps are done, only the step of adding font-face to the css file is left, you can go to layout > theme.liquid file, find ‘:root’. You just need to add the code here, it will work fine:

Screenshot_11.png
Screenshot_11.png1306×778 28 KB

Hope it helps!

3

Hi @LitExtension

Thank you so much for the reply. It has helped me a little but there is still some sort of issue.

Firstly the code you referenced in the layout/theme.liquid file wasn’t there. I did however find that code (or at least similar) in snippets/css-typography.liquid. So I’ve inputted the code into the root section. It is changing the intended text types however its changing them to a default serif font and not the font I have uploaded in assets and tried to link to.

I’ve attached a few screenshots. Not sure what I am doing wrong here!

Thanks again

4

Hi @imanexbelle ,

Please send your site and if your site is password protected, please send me the password. I will check it.

5

@LitExtension Thank you very much. The site is: https://thereisbia.com/ password: mohgli

However, I think I have found the issue now. It may because I am using a trial font? I used the same code, with a different font to update all p fonts and it worked. Additionally used a different front for the headers I am trying to change and that worked also. Only thing I can think of…

Thanks again

6

Hi @imanexbelle ,

Yes. If you tried another font and it works, this is most likely because the font you uploaded in assets is incorrect.

So the problem may be due to trial font.

If it helped you solve your issue, please mark it as a solution for me. Thank you and good luck.

7

@LitExtension just an update for yourself + anyone else who stumbles across this.

Turns out the issue wasn’t the code or the font file itself. Ended up uploading the font in settings>files instead of assets and linking from this URL and that solved it! Not sure why any other font I tried worked when uploaded and linked from assets but hey its working now :grinning_face_with_smiling_eyes:

1 Like
8

I am also having this issue and none of these suggestions are working.

9

Hi @eeveefox ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

10

Hi I am just wondering how you linked it from assets this way

I have also had this issue, I added it to Files like you have suggested but what is the next step?

Thanks for your help!

Nicole