I am working on a new build and am #importing a Google Webfont, Rokkitt. I need to use this in both the standard and bold versions for my site. When I include this font and test, the fonts look clean and as expected with the only exceptions being IE 9 & 10. In these two versions the text is rendered without any aliasing and smoothing.
My search on this topic has really only shown results pertaining to Chrome so I am not too sure where to look or what to try at this point.
I have tried the standard text-shadow trick with no luck, as well as other less-likely solutions such as the CSS smoothing technique. I have yet to find anything that makes the font suitable in these two browsers.
You can use CSS3 #font-face rule to achieve your goal.
Note that Internet Explorer 9 and Internet Explorer 10 dose not support for TTF (True Type Fonts). Internet explorer 9 & 10 supports WOFF(Web Open Font Format) fonts and EOT (Embedded OpenType) fonts.
Note: Internet Explorer 8 and earlier versions, do not support the #font-face rule.
Reference:
CSS3 fonts - W3Schools
Related
I'm trying to determine the status of support for the TTF font format on Internet Explorer. (I don't have any Windows machines on hand to try it with.) The table at caniuse states that IE from version 9 onwards supports TTF but "only working when [fonts are] set to be installable". What does that mean? That page links to a blog post on MSDN, which describes updated font support on IE9. It isn't very clear or explicit; I think the "raw fonts" being referred to mean ttf and otf. It says "supported font formats include ... raw fonts with embedding permissions set to installable"
So, in summary:
Does IE support ttf fonts at all?
If ttf support exists, does it differ among IE9, IE10, and IE11?
What does "embedding permissions set to installable" mean in reference to ttf fonts?
So as I mentioned in my question above, Internet Explorer has some ttf support starting with version 9, but "only working when [fonts are] set to be installable".
Some background:
...TrueType fonts have embedding "bits" which allow the creator of the
font to decide the level of embedding that will be permitted. There
are four different embedding bits: (1) no embedding, (2) embedding for
view and print only, (3) embedding for view, print and editing, and
(4) installable embedding.. Many small type design houses have set
their embedding bits so that embedding of any kind is not permitted. ...
Source (also contains a lot of other information on this) and here's Another source with similar info
In another question, dealing with the embedding bits was discussed. It was revealed there that the Font Squirrel webfont generator automatically deals with these embedding bits by default on most fonts. Since I had ran my font through font squirrel I was good to go. I tweaked my CSS to prefer TTF over WOFF for testing and obtained the following results using webpagetest:
IE8 Did not work with TTF. It fell back to EOT
IE9 Worked with TTF
IE10 Worked with TTF
Note that I did not test fonts without the embedding bits set to installable, no I cannot say anything about that. But the general conclusion is that TTF fonts work in IE 9 onwards when the embedding bits are set to installable
Just google internet explorer ttf support or alike which would give you lots of information like eg http://www.fontspring.com/blog/fixing-ie9-font-face-problems
IE support for TTF is unclear: some sites claim support (like caniuse) other deny that (like http://webfonts.info/node/379)
In a ttf file there is information on what a user is allowed to do with the font. For TTF fonts to be allowed to be used in websites the font's embedding bits must be set to installable. The 'embedding bits' refer to fsType information in the OS/2 table, and 'installable' means that all fsType bits are off. So even if a browser supports TTF the font's foundry could deny usage of particular fonts.
I am getting a
CSS3120: No fonts available for #font-face rule
for the new Microsoft Edge browser on windows 10.
The fonts I am using are from fonts.com and have the normal declarations that I would expect (e.g. woff, ttf, svg etc).
{
font-family:"myfont";
src:url("/dv2/2/asdf.eot?asdf#iefix");
src:url("/dv2/2/asdf.eot?asdf#iefix") format("eot"),url("/dv2/14/asdf.woff2?asdf") format("woff2"),url("/dv2/3/asdf.woff?asdf") format("woff"),url("/dv2/1/asdf.ttf?asdf") format("truetype"),url("/dv2/11/asdf.svg?asdf") format("svg");
}
The sites still work normally on chrome, firefox, and IE for windows 10. my fonts that I used from Icomoon that are on my domain and fonts from google fonts seem to work fine on the edge browser. Anybody else having this problem with fonts.com?
I was using a local version of Google Fonts like one of the commenters, #benoror. My issue ended up being that I used references to woff2 fonts. Edge doesn't support the woff2 format yet.
My solution was to switch back to loading the fonts from Google Fonts since they have logic based on the user-agent that determines which font files get referenced in the #font-face declarations.
Another option would have been to use regular woff instead of woff2: http://caniuse.com/#search=woff
I contacted fonts.com and the solution they gave - which did seem to work for me - was to republish the project. If you go into manage webfonts and to the project, there is a republish button. It will probably take a couple minutes and then it should work.
I had the same issue,
After reading MSDN documentation and adding local parameter error disappeared.
src:url(sURL) format(fontFormat) local(fontName)
I am trying to use the CSS font face property. I've made it chance the font to the right one, however it looks very edgy on the Windows platform. Especially Chrome looks awful.
When using OSX all browsers are just perfect.
How can I avoid these awful looking fonts?
On OSX Chrome:
On Windows Chrome:
The Segoe font is already installed on most Windows PC's. This can cause problems when you are also trying to link it with CSS. Try renaming the font in your CSS so that it has a different name than the built-in Windows font.
Also, Chrome just doesn't render TTF/WOFF fonts very well. You can get around that by prioritizing the SVG font (by putting it higher up in the font list). This will make Chrome select the SVG font (but most other browsers will still use the WOFF font). See here for more information.
Hi,
I am wondering if there's a way to somehow force Chrome (Safari and Opera included) to render the fonts that are loaded by #font-face better? I'm not sure if it's only these two fonts, but I sincerely doubt it.
The top snapshot is the rendering of the text in Firefox 8. The one below is from Chrome(16). Now, this wouldn't bother me as much if it was rendering awfully in IE, too--but in IE it renders quite wonderfully (similary to FF).
So, I did try a few things:
Tried applying text-shadow. It made it seem a little better, but still pretty awful.
I tried using -webkit-font-smoothing: antialiased, but that didn't seem to have any effect at all.
Now, I could stop being an annoying perfectionist and simply use an image for the logo (since the smaller text doesn't render that badly, but still bad, mind you) and be done with it.
I don't really like that solution, but I will accept it if there is no other.
Thanks!
https://stackoverflow.com/a/9041280/1112665
If your code is from font squirrel it may be as simple as just rearranging the order of some of your css.
I'm seeing almost the exact opposite on OS X. Chrome, Safari are fine and Firefox isn't displaying right.
Chrome 18.0.1003.1 dev:
Safari 5.1.2 (7534.52.7):
Firefox 9.0.1:
Opera 11.60 Build 1185:
Internet Explorer 9.0.8112 (under Parallels VM):
It looks like Windows 7 #font-face problems are quite common, and there are a lot of inconsistencies in general:
#Font-Face Windows Woes (flynsarmy.com - 2010/05/29)
#font-face gotchas (http://paulirish.com/ - 2010/05/05 )
Font-face embedded fonts look fuzzy in Windows 7 browsers
#font-face rendering in Windows 7
You can also ensure the SVG format is being used primarily. The upshot to this is the font will render perfectly in Opera/Chrome, the down side is that I have found line-height issues arise.
Use a chrome specific media query and replace the font with the SVG version exclusively.
For a site we're developing we've been using Lato from Google's WebFonts API. It works perfectly in every browser (even IE), except for one very important case: Firefox 3.6 on Windows XP (haven't tested in Win 7 yet). The font loads and is displayed, but the characters look awful, like antialiasing completely malfunctioned.
My googling has found hits about problems with webfonts in FF4 due to a bug in the browser, but I can't find anything about 3.6. Is there something we can do to fix this?
The reason Google's font looks like that has to do with a setting in the font's GASP table. This table toggles 'grayscale' and 'gridfitting' for ranges of sizes. I looked at the font Google is sending to your site and for sizes 0-13 grayscale is turned on. 14-18 is set for gridfitting, which results in black and white rendering. Then 19+ is set for both grayscale and gridfitting. I bet if you changed the size of the text to 13px, it would suddenly turn antialiased.
As for Font Squirrel fonts, we set the GASP table to render grayscale+gridfitting for all sizes above 4px.
There seems to be a difference between Google webfonts and the same font downloaded from Font Squirrel, see this (unrelated...) question.
So I would try and use the version they have at Font Squirrel to see if that solves the problem.