Custom Fonts in Symmetry

[chels_grove]

Hi All -

Losing my mind a bit. The old way to add custom fonts is not working anymore. Fonts were added as assets, .woff & .woff2 files - I added some custom css to the content block which seems to trigger a change, but not pulling in the exact font. I added @font-face style in multiple places, taking it out in one, trying it in another, etc. , main css and just nothing is working. I checked the .woff & .woff2 files and they are showing the correct font but it is just shifting to Times New Roman which happened to me in the Impulse theme for a client, but I eventually figured it out. What worked there is not working in Symmetry - any help appreciated!

[tim_1]

You are probably missing something small. Would be helpful if you share a link (preview link) to the theme you’re experimenting with.

[chels_grove]

Yes! Absolutely missing something small and it’s driving me crazy - here is the preview link, let me know if you need anything else. https://23lv3jbdk9b8p2n8-16148159.shopifypreview.com

[tim_1]

All fonts I see there seem to be ok and are loaded from Shopify font library.

The only thing not quite right is this code in main.css:

@font-face {
  font-family: "landry-gothic";
  src: url('{{ "Landry-Gothic.woff2" | file_url }}') format("woff2"),
       url('{{ "Landry-Gothic.woff" | file_url }}') format("woff");
}

Which has 2 problems:

1. Since the asset is .css and not .css.liquid, Shopify does not process the liquid code and that’s why I see it like this. Either rename the asset or output this inside …<.style> in your HTML;
2. the code uses file_url filter but you’ve said that font files are added to the Assets (and they are there), so need to use asst_url instead.

Or I am missing something?

[chels_grove]

Thank you! Okay yes, good call on the asset_url (I know basics of code, but
not anything specific).

So I have tried this above and it still doesn’t work (in there now).

@font-face {
font-family: ‘landry-gothic’;
src: url(‘{{‘Landry-Gothic.woff’ | asset_url}}’);
}

@font-face {
font-family: ‘landry-gothic’;
src: url(‘{{‘Landry-Gothic.woff2’ | asset_url}}’);
}

In the content block Custom CSS, I am using (which does change the font):
.text-overlay__title {
font-family: “landry-gothic” !important;
}

But it still just goes right to Times New Roman.

[tim_1]

Ok, better now, but still a couple of problems:

First, fix quotes in Custom CSS as some editors tend to auto-convert your quotes to fancier ones (it’s important to use proper quotes).

font-family: “landry-gothic” !important;

It should be:

font-family: "landry-gothic" !important;

Your font-face should look like:

@font-face {
  font-family: "landry-gothic";
  src: url('{{ "Landry-Gothic.woff2" | asset_url }}') format("woff2"),
       url('{{ "Landry-Gothic.woff" | asset_url }}') format("woff");
}

Current version of your code is missing the format and also it has 2 font-face clauses instead of two lines in src.

And finally – are you sure those font files are valid?

After some tweaking the files seem to load, but this is what I see:

[chels_grove]

You have been so helpful & I appreciate it! So I went in with another woff & woff2 file I used on another client just to double check and even still it’s not loading.

I miss the old way where you just put the font-face at the bottom of the css and then called out everything you wanted to change.

[tim_1]

Ok, this one is spot on, but it looks like Shopify functionality to add font files to Assets is broken now:

I’ve tried the same in my test store – uploaded files to Assets and added code as custom liquid section using asset_url and received the same error in console.

Then I’ve uploaded to Files and changed filter to file_url and it seems to work fine.

Frankly, for small mods I’d prefer using Files – you can use Custom liquid to output CSS rules and do not need to edit theme code, but anyways.

Looks similar to https://github.com/Shopify/cli/issues/3144 even though we’re not using CLI or Github.

[chels_grove]

That worked!! Thank you - the documentation for custom fonts used to mention always adding to assets - so good to know they can go into files now. Really appreciate all of your help!