Garamond FontDrop bug with font_face

vickera
New Member
2 0 2

Hi there,

 

I think I have encountered a bug but I am being pushed to the forums from chat so maybe someone here can confirm for me. 

 

I have the following settings: 

 

{
        "type": "font_picker",
        "id": "font_main",
        "label": "Main Font",
        "default": "open_sans_n4"
      },
      {
        "type": "font_picker",
        "id": "font_accent",
        "label": "Accent Font",
        "default": "open_sans_n4"
      }

And then I am utilizing these settings the following way: 

 

 

  {{ settings.font_main | font_face }}
  {{ settings.font_accent | font_face }}

 

 

This works flawlessly with all fonts except for "Garamond" which outputs nothing but empty lines. 

 

Chat is telling me that this is an issue with my code. However, it works with literally every font except for Garamond which makes me believe this is a bug. Please advise. 

JamieBTS
Tourist
4 0 2

I'm having a similar problem with a theme, using the Font Picker to choose Garamond doesn't work on Windows, but all the other fonts work fine. The site looks fine on a Mac as Garamond is a Mac system font I believe, but on Windows it falls back to the standard system serif font.

 

Looking in the code I can see that the site isn't even loading the stylesheet for Garamond in the HEAD as it does for other fonts.

JamieBTS
Tourist
4 0 2

I've been through it with Shopify Support and they are escalating it to the right people to look into, hopefully have some news in 24-72 hours.

JamieBTS
Tourist
4 0 2

After a bit of explaining and back-and-forth with Shopify suport they claim it's working as expected and that Garamond is there just as an option so that it displays for those who have it installed, which makes no sense at all as there are loads of non-standard fonts in the list that work because they get served from Shopify's CDN, and Garamond seems to be the only one that doesn't work.

 

I told them this seemed strange and confusing and have yet to hear back now, that was over a week ago.

 

They either need to add Garamond to the CDN or remove it from the font picker so that people don't try to use it and not realise it won't load for most of the world.

0 Likes
vickera
New Member
2 0 2

Thanks for looking into it. I'm not satisfied at all with that explanation. It clearly isn't working as expected.

0 Likes
chrishale
New Member
1 0 0

I'm having the same issue when trying to update the Checkout to use Garamond.

If I choose "PT Serif", for example - it works fine. If I inspect an element, I can even confirm the styles are being set:

h2, .heading-2 {
    font-family: PT Serif, sans-serif;
    font-size: 1.2857142857em;
    line-height: 1.3em;
}

 

But when set as "Garamond", it appears to make no attempt at using Garamond (or even a serif fallback):

h2, .heading-2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1.2857142857em;
    line-height: 1.3em;
}

 

0 Likes
JamieBTS
Tourist
4 0 2

Might be worth contacting Shopify support, maybe if enough people complain they might actually fix it.

0 Likes
tim
Shopify Expert
2926 142 993

Interesting -- I have no Garamond at all, only Glegoo for G. If your theme font selector looks different to first image, then it's problem with your theme, IMHO.

Checkout is different though -- it uses different selector (second image) and some fonts there are simply suggestions for the browser.

However, I am playing with checkout font settings in my test shop and looks like it ignores these settings completely for most of those fonts, say on my macbook it uses system font if I select garamond.

      These font settings produce the same result as System:  Helvetica/Arial, Playball, Garamond, Slabo, Vidaloka. Even CSS rules are render to system fonts. I'd say it's definitely a bug.

 

Untitled.jpegUntitled.jpeg

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes