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 Chro开发者_如何学Cme 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
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.
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
Please try to "Inspect element" with Chrome, and look at "computed style". What is it written?
Always inspecting styles, is your font-family overwritten?
Update
I tried for you. I see Arial, the right font. See attachment.
Have you tried a cache-less refresh? (Ctrl+Shift+R)
It's possible that chrome is using an older, cached copy of the CSS.
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.
精彩评论