problems when adding sans serif font

Hi @sgolson that definitely sounds a little unusual. It would be helpful to take a look at the site where you see this happening – are you able to share the URL of the site?

If you can share that – it will be possible to take a closer look.

The live site is here https://terrygolson.com

However I don’t think you’ll see any problems on the site. I’ve fixed the JSON file so the fonts install and render correctly. The problem comes when you are trying to add fonts. For example, try installing Advocate or Concourse font from Matthew Butterick https://mbtype.com

These are not free fonts; please don’t post the font files on a public server.

Hi @sgolson, adding sans-serif in the font family definition like this "fontFamily": "\"Advocate OT 14 Cond Reg\", sans-serif",
When you use multiple values in the fontFamily they are used as a fallback in case the fonts are not found on the user system (maybe because they were not entirely downloaded by the browser yet).

How it works is described here:

Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.

It is often convenient to use the shorthand property font to set font-size and other font related properties all at once.

You should always include at least one generic family name in a font-family list, since there’s no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not stop at the first font in the list that is on the user’s system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

If the font is not rendering correctly is unrelated to the use of the fallback values. The problem seems to be related to the use of number in the font family name. Removing the 14 from the font name you are using solves the problem.

Why it’s working when you add “sans-serif”? This is because you adding quotes around the font name and making the browser reading it OK. It’s working not because of adding sans-serif but because of the quotes.

I need to do testing more about this but the issue doesn’t seem to be specific to this plugin or WordPress, but about how browsers read the font family names containing numbers.

Thanks Matias! Confirmed, just having the extra quotes around the font name makes it work:

"fontFamily": "\"Advocate OT 14 Cond Reg\"",
 "name": "Advocate OT 14 Cond Reg",

So, no need for the “sans-serif”. The font renders correctly in the live website.

However, I still don’t see these fonts preview correctly in “Manage Theme Fonts”.

That’s an odd problem regarding numbers in the font names. Good luck chasing that one down.

• This reply was modified 1 year, 11 months ago by sgolson.