Font Stack for Blog Headers

[Martin Bobek]

Hello there,

I registered my trouble in Chrome browser (wins) and partially in IE 11 (wins) – Czech language/Helvetica Neue Thin issue. (Everything looks good in mac browsers (Chrome and Safari).)

I found somewhere font stack which looks like this:

font-family: “HelveticaNeueThinExtended”, “HelveticaNeue-Thin-Extended”, “Helvetica Neue Thin Extended”, “HelveticaNeueThin”, “HelveticaNeue-Thin”, “Helvetica Neue Thin”, “HelveticaNeue”, “Helvetica Neue”, ‘TeXGyreHerosRegular’, “Arial”, sans-serif; font-weight:200; font-stretch:expanded;

It works perfectly in sidebar and Czech diacritics is displayed OK in all browsers. I used same font stack for headers and again Czech diacritics is displayed without problems.

But for some reason in BLOG section only (sidebar and related headers (both h1 and h2) are OK as I wrote) in mentioned wins browsers letters where Czech diacritics is applied are not displayed correctly. They are replaced by some strange characters/symbols (Chrome) or browser just uses correct letter from some other font and mixes them with Helvetica Neue font.

So, why are letters displayed correctly in sidebar but not in blog headers when same font stack is used? Is there any way how to fix it? Why wins browsers don’t use next well-known font from the stack like Arial etc?

Thanks for your time.

Martin

[Bill Robbins]

Good Morning Martin,

That is a most unusual situation. I don’t have much experience with using alternative alphabets to latin, but I would have expected them to appear the same in all places.

I would try adding your font stacks to the Custom CSS box in the Styling tab of the Theme Options page. That’s the last section of styling that’s loaded before the site’s content so it’ll have less chance of being overridden by another piece of styling.

It is possible to style based on browser, but not on operating system. There is a body class that’s applied with the browser name which can be used to apply styles only to that browser. That would look something like this:

body.chrome h1,
body.chrome h2 {
     font-family: 'Arial';
}

The options are:

1. gecko = Firefox
2. opera = Opera
3. safari = Safari
4. chrome = Chrome
5. ie = Internet Explorer
6. unknown = All other browsers

If I can help, let me know.

Thanks,
Bill

[Martin Bobek]

Hi Bill,

thanks for your answer. Unfortunately it doesn’t work. I just don’t understand why Chrome (wins) or IE (wins) don’t pick some next font from the stack when they don’t know few letters from fonts before…

Martin

[Bill Robbins]

Good question. A lower font in the font stack will only be selected if a higher one is not installed on the computer viewing the web page. If the font is present then it will display, even if it’s not correct for the characters.

By comparison, I’ve attached a screenshot of what I’m seeing in IE 11 in the blog section of your site. Is that what you’re also seeing?

Attachments:

1. 

   Screen-shot-2014-06-19-at-9.57.05-AM-765-x-615.png
   

[Martin Bobek]

Sorry Bill,

I just changed the font from Helvetica Neue Thin to Helvetica with font-weight: 200. It is not so nice but it works, so, your screenshot displays correct form of Czech written language. 🙂

Martin

[Bill Robbins]

I hate that you couldn’t get the font you wanted, but I’m glad to hear that at least it’s now readable.

If I can help out with anything else, just let me know.

Thanks,
Bill

[Author]

Posts