0

I've experienced a strange issue about a font. I have imported this font (https://www.myfonts.com/fonts/jan-charvat/velodroma/wide/) via CSS import:

@font-face {
    font-family: VelodromaWide;
    src: url("/wp-content/themes/hotelbooking/font/VelodromaBasic-Wide.otf") format("opentype");
}

This font has a couple of possibilities: normal lettering and wide lettering:

Different lettering example

Now, when browsing the website on Chrome:

  1. when I visit the website from desktop I see all the letters with normal lettering (Screenshot)
  2. when I visit the website from mobile, I see different kind of letters (Screenshot)

As you can see from the screenshot, font-family is exactly the same in both cases.

This is not happening in Firefox, where correct font is loaded on desktop (Firefox screenshot) both on desktop and mobile

You can see the website here: http://www.orientalsicily.com/

Does anyone have an idea on the possible reason for this behaviour?

Thank you

0

A little bit of experimentation at MyFonts reveals that this is an 'extended' font, with alternative stylistic sets. Apparently, Chrome for your mobile is defaulting to a different stylistic set of character variants than Chrome for your desktop. The differing behavior in Firefox suggests that FF mobile and FF desktop are defaulting to the same stylistic set.

You can find out more about this feature by exploring the various links from this Google search.

  • Hi Jeff, thank you very much for the answer, I was completely unaware of this topic. I've found a very interesting article from Adobe containing the CSS rules to use stylistic sets: helpx.adobe.com/it/fonts/using/open-type-syntax.html Do you have any suggestion on how to find what set (means: what "font-feature-settings") is used in a particolar situation? I tried with the Elements > Computed tab but I can't find a matching property. Thank you – Antonio Jun 12 at 14:14
  • Unfortunately, the only way I've ever found to determine which stylistic set is used is to simply keep trying the available ones until I see a match. If I recall correctly, one should use font-feature-settings: ss01 to select stylistic sets, where the 01 is replaced by the number of the actual stylistic set you want to use. That's actually what I did when I was checking the font at MyFonts. – Jeff Zeitlin Jun 12 at 14:56
  • If this answer satisfies you, you should click on the check mark to the left of it, to signal that you are accepting the question as adequately answered. It also throws me a few points of rep. – Jeff Zeitlin Jun 12 at 14:58
  • Yes, thanks to your hints the case was solved. Thank you again! – Antonio Jun 12 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.