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
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.
Related
I know there is a total flood of font rendering related questions on all sorts of sites these days. One of them should provide me with an answer, so you would think. However much I search I cannot seem to find a solution for my problem though.
In google chrome almost all fonts are displayed bold. Well that wouldn't really be the end of the world. What bugs me even more is, that they are rendered very jittery. As in they look sort of distorted.
I have made a picture to show the difference between my firefox and chrome font rendering:
http://i.stack.imgur.com/hYRh4.png
I simply want to get rid of this. It has been bothering me for a while and no solution I can find on the web helps.
For the record I have uninstalled and reinstalled chrome. Also I have disabled Direct Write in the chrome://flags.
Any help?
This is actually not a rendering problem, but a font loading problem. Firefox shows Arial (a font optimized for rendering at small sizes), while Chrome shows Helvetica (which is not, at least your installed version).
The editor from your screenshot probably asks for the font Helvetica and, if Helvetica is not available, Arial and other sans-serif fonts. I assume you only have the Bold version of Helvetica installed on your computer. It actually should display the Regular version, but it isn't available.
Firefox therefore falls back on Arial, while Chrome shows the closest weight you do have: the Bold version.
To fix your problem, you should try uninstalling Helvetica Bold (through Control Panel > Fonts). Note it can also go by other names such as Helvetica Neue, Helvetica LT Std, Neue Helvetica, etc. Don't forget to restart just to be sure. Then Chrome should also show the optimized Arial.
Eventhough the question is kind of old, the "problem" may still occur and I found another scenario which causes this text-appearance to happen (which, honestly, brought me here).
In my case, I did not note that my jQuery callback loops and renders the text multiple times to a fix position, about 20 times. I checked the entire css. font-family, text-rendering (geometricPrecision in this scenario), font-weight and what not.
It took me quite a while to figure out that I had 20 divs over each other with the same text, because I've got a very complex and deeply encapsulated DOM there.
So if you ever get here with similar problems, you may also want to check for this one.
The easiest way to check is, to delete the element holding the text using the browser integrated inspector / developer tools (Windows: F12, Mac: ALT+CMD+I) - navigate to "Elements", toggle the left icon (that one with the cursor symbol in it) to blue (active), click the element in your browser. It should be highlighted under "Elements" now, easiest way to find it in the DOM. Right-Click and delete it. If you still see the text, you've most likely got multiple overlays while you only wanted one.
I just want to say that I resolved this issue by deleting a whole Roboto Font Family from the system. (MacOS Big Sur 11.2 (20D64).
I am using google webfonts and have come accross an issue with jagged and choppy font rendering in FF and chrome (IE11 renders them better).
Example can be found here: http://jsfiddle.net/PNYfR/
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:300,400,700&subset=latin">
<p style="font-family: 'Exo', serif; font-weight: 400; font-style:normal; font-size:31px; color:white; background-color: #0085B2; line-heigth:1.42857; padding:100px">
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897
</p>
I've read related questions, but any of them don't offer simple solutions for quick projects:
Google webfonts render choppy in Chrome on Windows
Well rendered webfont solution
Google webfonts and windows xp
To complicate a bit more, our designer is using Mac, which renders fonts correctly.
Questions:
Is there a list of google webfonts which render OK?
Or is there a quick step by step solution on how to get fonts render correctly?
And last, is there an alternative free webfont provider, which serves fonts OK?
I've found that downloading the fonts I want to use, converting them to .svg using font squirrel (web application, google it) and hosting them on the web server seems to solve the issue. In the code, place the .svg font link above the others and Chrome will/should grab that first.
These are the defaults for font smoothing (with google fonts too) I use that seem to do the trick. Hope this helps
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow:none;
text-rendering: optimizeLegibility;
}
Known issue for years (first mentions from 2010). Developers promissed to introduce fix maybe this year. Problem (as I understand) is with enabling directwrite (for for font smoothing) within sandbox.
More here
http://www.reddit.com/r/web_design/comments/23cuif/yet_another_chrome_webfont_aliasing_post_why_is/cgvs5j2
or here: https://code.google.com/p/chromium/issues/detail?id=331115
Edit: Using SVG font can help for someone, but SVG is too blured for me (compared with antialiased woff in Firefox).
Specifying the font-weight to 400 fixed the issue completely for me. I think it is intially 700, at least for h2 and h1...
h2 {
font-family: 'Lobster', cursive;
font-size: 23px;
color:#fff;
font-weight: 400;
}
Firefox still wins, but it is not jagged anymore
Just go reset all flags in Chrome. Type in chrome://flags in the URL address bar and click on the Reset All Flags to default button. That should be on the right hand side of the settings page. It worked for me. If it does not for you, you may try enabling the Aero visual settings of your computer (only if disabled) then reset the flags. If resolved, you may then switch off the aero visuals.
To access the aero visual settings in Win7, go to My Computer properties > Advanced system settings > System Properties > Advanced tab > Performance (Settings). From there, toggle the current setting back to 'Adjust for best appearance (it should check all boxes under it). After resetting all flags and the fonts are back to normal, you may choose to toggle it back to Adjust for best performance. That essentially unchecks all visual options.
Thanks,
Dong
I'm running into an incredibly frustrating issue with webfonts on my employer's website. (screenshot here: http://imgur.com/Pvb5lrl)
I've added all the font files and, as best as I can tell, written the code correctly. However, the text is rendering incredibly jagged and ugly in Chrome and Firefox. What's bizarre is that a simple test I set up using the same font files, same #font-face code, and same CSS for the text itself is rendering just fine in the same browsers on the same machine. Any idea what might be causing the crappy rendering on the full website? URLs to both are below for reference.
Company website: http://staging.lmsonline.com/services/email-marketing/
Simple test: http://datafulfill.com/fonttest/demo.html
Screenshot (Windows 7, Chrome): http://imgur.com/Pvb5lrl
Not sure, what your font is supposed to look like. At my end it arrives sort of Arial, which is pretty much the same as a generic sans-serif anyway. Playing around with fonts in the past taught me to address the issue in this order:
#font-face {
font-family:"Delitsch Antiqua";
src:url("/path/to/fonts/DelitschAntiqua.eot");
}
#font-face {
font-family:"Delitsch Antiqua";
src:url("/path/to/fonts/DelitschAntiqua.ttf");
}
First serve IE, then the rest. For some reason it never quite worked the other way around.
Can I use "Arial Rounded MT Bold" with css ?
font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
Nothing Changed when I put :
font-family:Arial, Helvetica, sans-serif;
Google Fonts has Nunito, by Vernon Adams:
http://www.google.com/webfonts/family?family=Nunito
It's nice and rounded; sort of reminds me of what they're using on Glitch.
It's hard to know without more information from the OP but I've seen these same symptoms caused by the hardware acceleration feature in Firefox. It's been know to cause several problems with font rendering. One I've observed is failing to render a non-standard font (such as "Arial MT Rounded Bold") despite it being present on the client machine.
For example, this page...
<html>
<head>
<style type="text/css">
body { font-family: "Arial Rounded MT Bold"; font-size: 30px; }
</style>
</head>
<body>
This can be really annoying.
</body>
</html>
When viewed in IE, Chrome or FF with hardware acceleration turned off the font appears correctly, like this...
But when viewed in FF with hardware acceleration enabled the browser fails to "find" the specified font so it defaults to another, like this...
There have been issues with this "feature" of FF since version 4.
Probably the best solution is to either use a different (standard) font or (as Kent suggests) find a similar web font that will work in all modern browsers. Alternatively, like many font issues, the problem can be mitigated by supplying a list of font families to use as fall-backs.
I've seen an alternative Google Font suggested here from back in 2011 which is a pretty good match but there are some thin parts to the font which aren't the same as the Arial Rounded MT Bold.
For people still looking for an alternative I think this one is a better match; its called Varela Round by Joe Prince:
Varela Round
I would also set it in font-weight: bold; for a more accurate match.
To use custom fonts with good cross browser compatibility, take a look at FontSquirrel. They will generate the correct CSS to get custom fonts working cross browser. Take a look around their site for Rounded MT Bold or whatever else you want :-) Also, if you want more fonts, take a look at http://www.fontex.org/
Google Fonts is also a possibility. There are a lot of different fonts but I don't know whether there's exactly Arial Rounded MT Bold.
You can use only fonts which are installed at the clients computer!! So just mentioning them in the css font-family doesn't work if the font is not installed. For this, Google Fonts and others bring the functionality... so everytime you use a font that is not "Times", "Arial" or "Verdana", which are installed on nearly every computer, you should think about an alternative to raw css
There's a good chance that — if nothing changed (on your local browser's rendering of the webpage) when you changed the font stack — that you don't actually have Arial MT Rounded Bold installed on your computer. One way to test this is to use Firebug, to 'inspect element' for the headline (or whatever the font is applied to), and to edit the font-family listing in the right-hand Firebug pane. (Usually, I just find the named font and add a space into the name of it, which "breaks" the call to the proper font, and the browser then moves on to the next font in the stack.)
Other options include using Google's web-font Nunito (as Kent Brewster recommended a few minutes ago), or setting up a font-face font on your own server, providing one of the rounded fonts (RockoFLF Bold, FF Din Rounded, Nunito, and Arial MT Rounded Bold are all options). (Technically, per Kent's comment, Glitch is using RockoFLF, with Arial MT Rounded Bold as the second font in the stack. At least, that's what they were doing a few months ago when I last looked at their code. ... Oh ... just checked again, and they've dropped the Arial MT Rounded Bold out of the stack. They're calling RockoFLF with an embedded font-face.)
Anyway, as Kent Brewster noted, I think your best bet is to use Google Web Fonts' 'Nunito', if you aren't sure that it'll be on your users' computers (or even your own).
It may not appear because of system compatibility - you can check out Arial Rounded MT Bold on CSS Font Stack for compatibility. There's a 59.53% on Windows and 95.14% on Mac. https://www.cssfontstack.com/Arial-Rounded-MT-Bold
Its worth noting that Linux doesn't come with Arial by default so one should not rely on a font being present on a users computer. Instead they should download the files (license permitting), host them on their site and link to them using #font-face.
When displaying Greek symbols with, for example, π, I get very different results in Chrome and Safari versus Firefox. As some example text, I have:
Chrome:
Firefox:
Is there a way to get Webkit to render the letters closer to Gecko's style, which I much prefer here?
EDIT: Actually, it seems the problem does not have to do with Webkit itself, as it seems to render the way I like it under Chrome in Windows 7: (I was using Snow Leopard and didn't bother to check on my other computers, heh)
Also, a bit offtopic, but does anyone know why the fonts seem to be rendered a bit more boldly on the Mac than on the PC?
I would guess that firefox is using the Symbol font, whereas Safari is using whichever unicode font has the right characters.
On my Mac, this works: <span style="font-family: Symbol">π</span>. Also, setting the font of the container to Times New Roman seems to work as well.
Okay, so the weirdest thing happened. I was looking at my site again and suddenly realized that the Greek was rendering perfectly. Am not sure what happened, since I don't think I ran any updates or anything, but the problem's gone now. Not very helpful of course to others with this problem, but that's just what happened...
Your browser will render using whatever fonts it has available. Some fonts may be missing certain characters, in which case the browser will use another font for those characers. If, in your CSS, you tell the browser what the font-family is, it can better pick a matching font.
font: "Times New Roman", serif;
Now the browser will pull in missing characters from a serif font.
Of course, with the #font-face directive, you can force the use of a font which has all the characters you need.