Reputation: 7839

Chrome is ignoring my font choice

I'm having a little difficulty getting Chrome to recognise my font-choice. I've not got a lot of code as I've only just started this website.

Basically I have a reset.css on the website and then my main.css is called afterwards. In the reset.css it declares the below statement under pretty much every html tag under the sun:

font-family:Arial, Helvetica, sans-serif;

In the main.css the same statement is declared under html, body and p, and even some specific p tags such as p.headerText and p.newsDate

This is a pretty standard setup. On Safari, IE and Firefox, the font renders as Arial / Helvetica, on Chrome it renders as Times New Roman.

It's really frustrating. Can anybody help?

UPDATE

The Computed Style on Chrome is showing the correct rule, and I even tested this on a friend of mines machine and it was the same. Both running Chrome 8.0.552.237 on OSX 10.6.6

Cheers

Upvotes: 9

Answers (5)

melaniededon

Reputation: 1

In my case, I was using bootstrap on a page. It was the specification of text-rendering: optimizelegibility; that was causing the rendering problem of my font in Chrome.

I changed it to text-rendering: auto; and that seemed to fix the problem.

Upvotes: 0

Dan Hanly

Reputation: 7839

I've figured out the problem. I'd used the font-weight: lighter; command - I removed this and the problem disappeared. This would suggest that it's a clash of fonts on my machine. Still don't understand why it appeared fine on everyone else's machine but the problem is now fixed - doesn't look right because I have to use a heavier font but it's still works.

UPDATE

We're a graphic design agency so there are thousands of font-variations on my machine. It seems the clash was there. I swapped Helvetica and Arial in the font-stack and it seems to be fine all round now.

Also, it seems to do with Chrome and Font Books that aren't the standard ones on a Mac. I did some hunting and I found a script that'll work, albeit temporarily. http://www.danielhanly.com/blog/tutorial/google-chrome-for-mac-broken-fonts/
This will clear your internal font cache and will fix the problem for a short time.

Essentially, this isn't a problem with the code, but rather, a problem with my development machine. There's some clash of fonts happening when we manage our fonts with a non-standard font manager (Linotype FontExplorer). Strange that it's only in Chrome though.

Upvotes: 3

Wolf

Reputation: 21

Exactly the same problem (only in Chrome) occurred to me!

But after deactivation of font "Arial" (no matter if truetype, postscript, opentype etc.) in my Mac SnowLeopard system, this effect of displaying Times New Roman instead a Sans Serif Font like Arial, Helvetica, Verdana etc. disappeared completely.

I hope it helps.

 Modellname:    iMac
  Modell-Identifizierung:   iMac10,1
  Prozessortyp: Intel Core 2 Duo
  Prozessorgeschwindigkeit: 3,06 GHz
  Anzahl der Prozessoren:   1
  Gesamtzahl der Kerne: 2
  L2-Cache: 3 MB
  Speicher: 4 GB
  Busgeschwindigkeit:   1,07 GHz

Upvotes: 2