I've tested it here, http://www.fileformat.info/info/unicode/utf8test.htm
No talking about the miscellaneous ones.
Is it Windows 7 fonts? Is it Chrome rendering? Is it some configuration I should tweak?
Any help is welcome.
EDIT: I've just checked that UTF-8 was selected in Chrome codification, and it was.
Strangly I can see more symbols in IE 11 (!)
EDIT 2: Comparision -> http://bit.ly/font-rendering-chrome-ie
(I guess I should have posted this on the superuser forum, but I can't move it myself.)
Most browsers use a fallback font if some Unicode characters aren't available in a font. It seems that the implementation of that fallback mechanism differs in IE and Chrome.
One possible solution is to use a different font-family for Unicode characters. For Windows systems, I typically use Lucida Sans Unicode with a CSS rule like this:
.unicode {
font-family: "Lucida Sans Unicode", sans-serif;
}
Related
So have a very strange issue in firefox with font-face. I've included all the different font version types (.ttf, .woff, etc.) but don't see it loading in the browser (works fine in chrome). However, when I inspect it with firebug and hover over the font name in the inspector, it previews it correctly. So it is loading the font somewhat, but not in the main browser window. Anyone seen this before?
It ended up being that if font-family has spaces in it you need to surround it with double quotes not single :P
Wild guess: do you use NoScript? It blocks downloaded fonts by default. (Rationale is that font engines weren't necessarily designed for arbitrary input and may be just as vulnerable to attack as anything else.)
I have absolutely no succes in getting IE 10 to display custom fonts. Has anyone else a solution for this? I can see a few shout-outs on the net that others have trouble with their fonts in IE 10, but no solutions or confirmed bugs to be found.
Anyone with the same experience or solution?
This is what I have right now, and it works well in IE before 10, Chrome and Safari:
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.ttf');
}
<!--[if IE]>
<style type="text/css">
#font-face {
font-family: "LCD";
src: url('http://www.somedomain.xxx/Public/Fonts/Quartz_Regular.eot');
}
</style>
<![endif]-->
I have tried to substitute with font files in other formats woff, ott etc. but no luck at all with that.
The answer which hinted at font-squirrel made it Work.
Now the working markup (for IE 10) is:
#font-face {
font-family: "LCD";
src: url('/Public/Fonts/quartz_regular-webfont.eot');
src: url('/Public/Fonts/quartz_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/Public/Fonts/quartz_regular-webfont.woff') format('woff'),
url('/Public/Fonts/quartz_regular-webfont.ttf') format('truetype'),
url('/Public/Fonts/quartz_regular-webfont.svg#quartzregular') format('svg');
font-weight: normal;
font-style: normal;
}
I assume this is in an HTML file, due to the HTML comments and style elements...if not, look into that.
Beyond that, just use the #font-face generator
Is it possible that IE10 does not render web fonts if Security Mode is activated? After deactivating (internet options - security) my websites were displayed correctly ...
I had the font-squirrel #font-face working in everything but IE, myproblem though was that the .woff was the only thing not included in IIS mime-types on my server. That might help someone who's also ended up on this question.
I just came across a client reporting he was unable to see the webfont on his website. Ends up that the "High" security level (in IE options) blocks web fonts by default. You can create a custom security level that is basically "High" but still enables web-fonts. Or just turn it down to medium-high.
The font-face not updated on IE 10 -> reference , you can use it same IE-9
you can learn how use font-face here
i think you include all type of your font...
I used this here:
http://www.impressivewebs.com/ie10-css-hacks/
More specifically:
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
By using this we can just pop in a nice alternative font and still have sexyness in the other browsers with open fonts.
Try the fonts here:
http://cssfontstack.com
Must add that the fontface generator doesn't fix this for all fonts. When using the font Helvetica Neue Medium Condensed (HelveticaNeueLTW1G-MdCn) for instance. I'm using multiple fonts on a website. They all work with the fontface generator, except that Helvetica-font.
I am facing font-face issue
I am using gotham font check below code:
#font-face{
font-family: Gotham MEDIUMITA;
src: url('Gotham_Font/GOTHAM-MEDIUMITA.OTF')format("truetype");
}
Its working in IE8,firefox,chrome. But in IE9 font is not applying...
is there any solution pls help regarding this....
Thanks
Ravi
First of all, using this font in a web page violates your font license from H&FJ. Secondly, there are a couple of reasons that it might not be working:
IE9 requires that any raw TTF linked with #font-face have the OS/2 fsType code embedded in the font be set to 'Installable'. Likely your font does not have this set correctly. You can fix this by using a WOFF or EOT instead. See the correct syntax for a font-face declaration here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax/
Your font-family name should ideally be "in_quotes_with_no_spaces"
I am designing a splash page for a public wifi access point and Firefox refuse to display my custom font, while it work in every other browser (well, not IE < 9 but that was expected).
The page need to work in the following constraint :
No access to the Internet : This page is displayed before the user accept the term and condition, so everything is blocked
The page is stored on the access point : That mean an embedded server probably written in C, and I can't really add additional header or something. Well its open source so it may be possible, but I am most certainly not an embedded developer!
The WiFi is used to advertise the small town in which it is offered, so it should be as pretty as possible.
To meet those constraint I used the #font-face with a data uri, like so :
#font-face {
font-family: Lato-Light;
src: url(data:application/font-woff;base64,<large base64 string>)
format('woff');
}
h1{
font-family: Lato-Light, Helvetica, sans-serif;
}
It work like a charm... Except in Firefox. Now I understand that it won't work in older IE, but I am ready to work with that. But it seem strange to me that a so-called modern browser would not offer that feature. Why isn't this working?
EDIT : Of course, I have a lot of idea for fallback, but my question here is more : Why does firefox have this behavior that is not the same as the other browsers? Is it a security setting? A bug in the data-uri implementation? A size limit for the data-uri?
In the end, the problem was that I used a woff font generator that produced an incorrect font. Safari and IE were able to read it, but Firefox and the latest version of Chrome rejected it since it contained some errors. By using a more recent woff font generator, I was able to make it work across all browser.
The correct woff font generator
http://people.mozilla.org/~jkew/woff/
For more detail, check that bugs report :
https://bugzilla.mozilla.org/show_bug.cgi?id=735556
I'd like to thank Jonathan Kew of Mozilla for providing the answer.
To cut down on HTTP requests, I subset and Base64 embedded a couple webfonts into my CSS (Font Squirrel #font-face generator, advanced settings, and for icon fonts I used icomoon.io).
Thinking I was really clever I served them from a static subdomain...No go in Firefox.
Turns out it was a restrictive cross-domain resource setting that is apparently unique to Firefox. When I uploaded the HTML5 Boilerplate 'standard' .htaccess file, it specifically permits it and it took care of the problem.
Hope it helps future readers, it stumped me for a while...sorry if my terms lack precision, I'm still pretty new at this (it is well explained in the H5BP .htaccess comments and docs).
I am using Windows 7 and Google Chrome and I can see all these icons:
★ ♥ ♠ ✈
☺ ☻ ♫ ♪
✔ ✖ ♂ ♀
☢ ✡ ☞ ☯
But when I try to rename a bookmark in Google Chrome this icon works: ♥
but this not: ★
Instead of displaying the star, I just see a longish rectangle:
Does anybody knows why?
The font used in the GUI does not contain this glyph, so it just displays a placeholder.
My guess is that's because there are 110,000 characters in the Unicode standard and all fonts have varying coverage of it.
For example Arial Unicode MS covers just 38,917.
To make sure if that's the case you could find out what your Windows uses as a system font to display folder names (or is it Chrome folders on your screenshot? then finding out the font used could be harder) and try to set it as a font that your browser displays pages with.
As your comment to the other answer shows you've succeeded in proving my guess, congrats!