Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 824
Dan Hanly Avatar asked Feb 03 '11 16:02

Dan Hanly


People also ask

Why is my font messed up in Chrome?

Go to Control Panel > Appearance and Personalization > Display > Adjust ClearType text (on the left). Check the box entitled “Turn on ClearType.” After going through a short wizard, this will fix some of the text rendering issues in Chrome.


2 Answers

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.

like image 161
Dan Hanly Avatar answered Oct 24 '22 21:10

Dan Hanly


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
like image 25
Wolf Avatar answered Oct 24 '22 21:10

Wolf