Adding a custom webfont to Shopify’s Craft theme, applied only to headings (h1, h2, etc.) while keeping Montserrat for body text.
The requester has .woff/.woff2 files and previously succeeded on the Narrative theme, but the same approach/code did not work on Craft and they asked for code guidance.
A respondent shared a YouTube tutorial link and later asked if the “second step” on their website had been followed. The original poster says they followed the steps multiple times without success and suspects an upload issue.
Evidence of a potential asset problem: in the Shopify Assets panel, the uploaded font (e.g., “AbramoSerif”) appears differently than in the video (shows a capital “A” icon, sits at the top of the list, lacks preview/</> code icon). An image of the Assets view was provided.
Another participant reports the same asset behavior and asks whether there is a problem with adding the asset and if a workaround exists.
Status: no confirmed fix or code snippet shared yet. Open questions: why Craft/Assets displays font files this way and what exact steps are needed so Craft recognizes the font and applies it only to headings.
Hi,
I would like to add a custom font to the craft theme.
I do have the font as woff, woff2 and more.
Also I would like to only have the headings (h1, h2 and so on) to apply the custom font and the body as something already available like Montserrat.
Is there any code which I can use for this?
I’ve managed to do it for the Narrative theme, but it didn’t work for the craft theme.
Thank you for helping out!
Thank you! Unfortunately, I tried these steps several times, but it has not worked out so far.
Maybe because it has not uploaded my font correctly?
I just noticed that it looks different compared to the video when uploaded in Assets (see image - font name “AbramoSerif”)
Hi @Sheela ,
Have you tried the second step provided in my website?
When I add my font as an asset, it does not show up as yours does. It will not show preview and it gets added at the top of the assets list with a capital A beside it and not the </> symbols. Is there a problem with adding the asset and is there a work around if so?
Daniel
