I'm coming across a weird issue with displaying "dingbats" html entities, specifically ✔ (✔). I am trying to display some checkmarks, wrapped in a simple <span>:
<span style="font-family: serif; font-size: 200%">✔</span>
This is working in Firefox 3.6, Chrome and IE8 on my computer, but in Firefox 4 on a coworker's computer, instead of displaying a checkmark, a blank space appears. Strangely, on the same computer, the checkmark appears properly in IE9 and Chrome.
I have tried explicitly specifying other fonts (including: Times New Roman, Arial, "Dingbats"), specifying no specific font, and even not specifying any style information at all, all to no avail. I suppose I could use an image instead, but I wanted the flexibility of being able to style the character without having to create a new image each time.
Any suggestions on how to approach this?
EDIT: This is how this page (with a search for hex 2714) looks for him in...
IE 9:
Firefox 4:
This is a shot in the dark, but I remember reading that some browsers try to "guess" at the character set being used depending on the web server settings, the content, etc. Could the browser be rendering the character using the wrong character set?
Even as I read over my own answer I suspect this may not be the issue... but thought I'd put it out there just in case.
I cannot reproduce the error in FF4.01. However, this might be to do with the fonts installed on your coworker's machine - as has already been suggested. Ask him to set the standard font to "Arial Unicode MS" or "Lucida Sans Unicode" (if these two don't appear in the fonts list, your coworker would have to install them) and see if it works.
If it does, you should consider setting <span style="font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', sans-serif;">. Although this seems to be a highly machine-specific problem, there is still a chance this might happen on other machines as well.
The character encoding shouldn't have any impact, it should work under ISO-8859-1 as well as UTF-8 to UTF-32 - at least.
It is possible to force a font in some browsers. The user is allowed to specify a desired font. Even if the site uses a specific font it will not be displayed.
Your coworker might have inserted a value for this option.
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).
is it just me, or does Chrome no longer render HTML characters such as the —? I've tried changing the DOCTYPE, changing the character encoding meta tag, changing the character encoding option in Chrome, and even using the entity number instead of the entity name. I cannot for the life of me get Chrome to display an em dash, and I've noticed that it isn't rendering it for other sites as well. Has anyone else had this problem also?
UPDATE
Are you sure the font you're using
actually has an em dash character? - Andrew Marshall
It just dawned on me what's going on. A while ago, I wanted to be able to use Helvetica Neue on Windows, and I didn't want to fork out a few hundred bucks, so I copied the font file from a Mac, converted it to a TTF on Ubuntu, and brought it over to Windows. I guess the tool I used didn't convert all the characters because it obviously can't display the em dash. The only reason I noticed the problem in Chrome is because the other non-webkit browsers wouldn't use Helvetica Neue for some reason.
Arg... I feel stupid. Thanks for the help!
I'd argue that HTML entities should be avoided (except &, of course). Instead just use the actual character and declare (and save) your HTML as UTF-8, something you should already be doing.
There are several top sites that do this, in particular with the use of © instead of ©.
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.
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.
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.