Font display issues on different browsers/computers

[Josiahmann]

I have been having trouble with fonts on a wordpress based site. I have a font installed on a website and it is all appearing fine for me. However, on the client’s website, the client’s h5 stops showing as bold once it’s italicized and quotation marks don’t show up at all on h5.

What could be causing this?

Site is johiggins.com

[Paulie_D]

Which font is it?

What browser / OS is the client using?

Perhaps you could also point an actual h5 on the site to save us hunting around for it?

[Paulie_D]

Interestingly…this is throwing an error in Chrome when inspected.

#title-area #description {
    font-size: 2.5em;
    font-family:  'La Belle Aurore', cursive, ;
}

Is this the font?

[Josiahmann]

The font is ‘Actor’ a google font. The page I’m referring to is johoggins.com/art-writing and I’m specifically referring to the headers for each individual magazine/ piece of work. Sorry I didn’t include that info initially and thanks for the help.

[Paulie_D]

Hmmm…tried it in Chrome, FF, Safari 5 & IE and the quotes show up for me.

I can’t tell if the font is actually being used or not. It’s not a very attractive font for me and the h5 is quite small in size.

Without knowing the clients browser / OS it’s going to be hard to replicate although my money would be OSX & Safari 6…I’m seeing a lot of hassles with that combo.

[Josiahmann]

Client is on a pc with chrome.

[Paulie_D]

Is this it…because I’m seeing the quote marks inside the h5 but I can’t tell if the bolding is working or not.

<h5> “The stuff that surrounds us” – Interview with Alain de Botton,

<strong>
    <em>Australian Art Collector, </em>
</strong>
Issue 38 Oct-Dec 2006, pp.102-103</h5>

[jurotek]

Hi there. Just want to point out that all your rem values for padding’s, margins and font sizes are calculated incorrectly. Because you have base font-size on html element set at 14 px your rem values should be: Here are few examples from your css

h1 {
font-size: 32px;
font-size: 2rem;   /* should be 2.286rem */
}
h2 {
font-size: 24px;
font-size: 1.5rem;   /* should be 1.714rem */
}
h3 {
font-size: 20px;
font-size: 1.25rem;   /* should be 1.429rem */
}
h4,
font-size: 18px;
font-size: 1.125rem;   /* should be 1.286rem */
}
h5 {
font-size: 16px;
font-size: 1rem;   /* should be 1.143rem */
}
h6 {
font-size: 14px;
font-size: 0.875rem;   /* should be 1rem */
}

On top of that, your headings are defined many times through out your css, plus I counted around 40 different font sizes declarations and you have lot of overqualified elements all over. It would benefit you greatly if you clean up and simplify that entire css file .

[Paulie_D]

Heading tags are bold by default aren’t they…so could you lose the <strong> tag?

Don’t know if it would help but it’s worth a shot.

[jurotek]

Heading tags are bold by default aren’t they

Yes and no. Example: If you include h2 in reset and the reset has font-weight inherit, that h2 will not be bold. You have to overwrite it down the road if you want it bold.

[Josiahmann]

You’re right jurotek. I used a theme framework to start off with that had rems defined based on 16px default. Since I didn’t know how to work with rems well, client wanted all fonts smaller, so I just changed the default value. In the future I’m using the 62.5% trick to set 1rem to 10 px, but at this point I’m kinda scared to mess with anything because client is very paticular about fonts and is finally happy..

[Josiahmann]

There are also so many font-sizes defined its daunting to change anything. I’m not sure how I’d go about cleaning it up . Tips?

[Author]

Posts