I'm using webfonts for the first time on a website I'm currently making and I noticed that the bounding boxes of the fonts seem to be different on Windows and Linux & Mac (same on Linux & Mac that is). This is not browser dependent as the same versions of Chrome and Firefox on all operating systems have these differences. Basically, on Windows, there is extra space on top of the character, while on Linux and Mac the character's bounding box is much closer to the actual top of the character (and for example umlauts are outside the box). This naturally changes the way positions, margins, etc. behave.
Currently the font is defined like this:
#font-face { font-family: "FranklinGothicHand";
src: url('fonts/franklingothichanddemi-webfont.eot');
src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'),
url('fonts/franklingothichanddemi-webfont.woff') format('woff'),
url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'),
url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg');
}
Because of this, for example, I can't properly vertically align a decorated initial cap of an article to the first line of the article since its position is different on different operating systems.
Can anyone think of any solution for this?
I was looking into this myself the other day and i came upon this site with an explanation of what is going on. http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ The takeaway i got from the article is that the OS's render the fonts differently and the only real fix is apparently to massage the font itself to make them deal with the different OS rendering styles. Unfortunately editing the actual font is probably not an option i am guessing.
Maybe detect the browser with javascript with this plugin (see os.name) http://jquery.thewikies.com/browser/ and then use that to determine which stylesheet you want to load How to load up CSS files using Javascript?
Fonts are really odd between operating systems, it doesn't surprise me that much that the rendering is inconsistent.
I just discovered -webkit-font-smoothing: antialiased; -- it seems to do a good job for Safari and Chrome on OSX.
Related
I'm trying to use a downloaded font on MacOS and iOS in Safari. There are many war stories out there about bulletproof CSS and such, but I haven't found the correct incantation. Here's my best effort, and I've tried many variations with different quoting, casing and so on. The font is called AHRDIcons, and it's installed and working on both operating systems. That's all I need---I don't need a web font, I just want something that will work on systems that have the font already available.
#font-face {
font-family: AHRDIcons;
src: local(AHRDIcons);
src: url("AHRDIcons.ttf") format("truetype");
src: url("file:/Library/Fonts/AHRDIcons.ttf") format("truetype");
}
This works on MacOS if the page is loaded locally (as file:///Users/.../cup.html), and this is because of the 3rd src option. It doesn't work on MacOS or iOS if the file is served by http (as http://.../.../cup.html), which I would expect to work using one of the first 2 srcs. But instead there are just little squares.
Conclusion: I don't think this is possible. Maybe there are defaults writes that would permit it, or maybe the whole fingerprint-detection could be turned off, but as I continue to read about this issue here and on other sites, I haven't found anything to lead me along those lines. And not sure I would do them anyway.
I solved the problem by hosting the ttf on the server, and using a src: url("http://.../../AHRDIcons.ttf") clause in the font-face declaration.
Thanks to those who helped!
If the font is already installed on the operating system and your only users are going to be on said operating system, then you don't need to add it with font-face at all.
Double click the ttf in OSX, click the 'info preview mode' icon and check what the font's family is. Then just use that in your CSS:
Here's an example with Apple Symbols:
p {
font-family:"Apple Symbols";
}
I have found a scenario whereby the 'a' character becomes mis-aligned vertically when using the Helvetica font-face.
This is only an issue in Firefox on Linux/Unix (Probably OSX too). All other browsers/os's that I could test in, display the text correctly.
In the following image, you can see the 'a' character lower than the other characters for Firefox.
I have a fiddle demonstrating the problem: https://jsfiddle.net/ob382a1p/
HTML:
<h1>Mailing ia la</h1>
CSS:
h1 {
font-family: 'Helvetica';
font-size: 40px;
font-weight: normal;
}
What is causing the issue and how do I fix it?
Never use Helvetica in CSS if you want to have Linux users.
On Windows and OSX Helvetica maps to modern font files (under proprietary licensing, so they are banned from Linux systems unless you buy them separately and install them yourself. No one bothers.)
On Linux Helvetica maps to very old font files which are only kept around because Helvetica is one of the original built-in Postscript font, so its presence is required to print some documents (print ie render on a 300dpi+ medium, rendering on a 96dpi screen is something else entirely those fonts were never designed for).
Also the encoding coverage expected from Postscript fonts is quite small, if you force a Linux system to render modern non ASCII-only text using Helvetica it will have to take the missing glyphs from some over font, and those glyphs won't match perfectly the proportions and placement of the rest of the text.
Linux systems have many nice modern fonts with large coverage, Helvetica is just not part of them.
OS: Win 7 64bit
Browser: FF 24.0
If I go to http://www.google.com/fonts it looks awful:
And when I load one for my site locally it looks equally as bad but here is my configuration that I generated from fontsquirrel below:
#font-face {
font-family: 'SecretSans';
src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot');
src: url('<%=domain_url%>/fonts/secretsansextralight-webfont.eot?#iefix') format('embedded-opentype'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.svg#secretsansttextralight') format('svg'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.woff') format('woff'),
url('<%=domain_url%>/fonts/secretsansextralight-webfont.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
Because it looks just as bad on the site above and my own site I presume it's an issue with Firefox and/or Windows.
Is there a fix/configuration that will work for all users hitting my site that doesn't require them changing any settings within Firefox or Windows as that's obviously unrealistic.
EDIT1: I just went to Control Panel > Fonts > Adjust ClearType text and now it renders properly in Firefox... I can't ask users to do this though so I'm hoping there is another way
I know this thread is from the stoneage, but unfortunately the problem is still current. And if you google for the choppy fonts problem, it's in the top 10; so I want to add my 10 Cents of experience with it!
Ok: If you search Google for problem with fonts under Vista/Win 7/Win 8, you find two major groups of problems that are both related to ClearType in many cases. Not all! But many.
Group 1: Blurry Windows fonts
If we talk of "Windows fonts" we are talking of the user interface (menus and such), and the "workspace" of office apps like Word or Excel.
This problem hits almost all people that do not have a 16:9 widescreen monitor that is HD capable, esp. classic office-type monitors of 19" and 1280x1024 resolution. The keyword is "Low-DPI" here.
For those who don't know: ClearType does a HORRIBLE job on these Low-DPI monitors and renders the whole interface in such a blurry way that trying to work with it causes massive eye strain and headache. Really folks, it gives you eye cancer!
(and no, you can not recreate that prob' on a Full-HD monitor!)
The only way out is to disable ClearType. This helped almost everybody of group 1 - including me.
Group 2: Choppy font rendering in Firefox and Chrome (rarely MSIE)
In many, many cases - like in this thread - ClearType was disabled. And when re-enabled, the browsers do render fonts just fine. True for me, too!
Unfortunately... when I re-enable ClearType, I'm back in group 1!!!
So: EITHER I have ClearType disabled and can work with a sharp and clear Windows for hours without fatigue of my eyes - but then I have to live with choppy webfonts in FF and Chrome.
OR I re-enable ClearType to see the nice and nifty fonts the designers have chosen for their oh-so-stylish websites - and live with the headache Windows gives me due to the blurry fonts! :-(
Obviously, I'm going the first way.
And if I stumble about a website where fonts look like broken, I simply toggle the usage of webfonts with just one mouse click - there's a great FF-AddOn for that.
Oh, I forgot: Why seems MSIE to render the fonts nicely?
Well, IE (at least 10 and 11 to my knowledge) always uses ClearType to render a page - no matter if disabled in the system settings or not.
Of course, it then also shows the blurry fonts problem - and makes me remember why I have ClearType disabled. And will let it so!
Final thoughts:
Programmers believe webfonts to be the final solution to all of their design-needs, thinking, they have everything under control by testing their stuff on a couple of default systems. In fact, webfonts just made a well-known problem freak out of any control - because there is no such thing like a default user!
Think about it.
I am pretty sure it is just how the browser renders it. Especially with #font-face stuff (I am assuming you used http://www.fontsquirrel.com/ or a similar site to generate it). You can use a little bit of text shadow to make it a little bit crisper, but from what you have shown, I think you might be better off trying to find another very similar font that will render better.
This was obviously because you had ClearType switched off. It's the method used to smooth the edges of fonts on computer screens (LCD). It has nothing to do with the method used in the webpage to attach them, this is strictly a font rendering issue. Fonts may appear differently depending on the system, as each has a slightly different method of rendering them - they tend to look best on Apple systems, while Windows seems to have a somehow inferior rendering method. This is entirely up to the system that is running, so the fonts will render differently for various users. Also, professional fonts from big foundries generally render much, much better than free, open fonts, because they're specifically corrected to optimize how they're rendered on screen, especially when they're rendered small (below 20px size), so the roughness of fonts from the Google Fonts set might also in part be due to the fact they're not as carefully crafted as those professional, expensive ones. Nevertheless, regardless of the font quality, text will always look uglier and choppy if font smoothing is switched off (or not supported), so there is nothing you can do. Stopping yourself from using custom webfonts because you're worried about the fraction of users who have font smoothing turned off is will stop you from using them at all.
I choose for my website the following font:
http://fontscore.com/fonts/Helvetica-Neue-LT-Std-35-Thin_22514.html
On a Mac this font looks awesome while on Windows it looks horrible. Here's the screenshots:
I tried to convert the font using a fontgenerator; I also add this stuff:
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
Still the same result. I know that windows use Cleartype and treat fonts in different manner with respect to a Mac but is it possible to solve this?
EDIT:
Here's my font face rule:
#font-face {
font-family: 'Thin';
src: url('fonts/helvetica-neue-lt.eot');
src: url('fonts/helvetica-neue-lt.eot') format('embedded-opentype'),
url('fonts/helvetica-neue-lt.woff') format('woff'),
url('fonts/helvetica-neue-lt.ttf') format('truetype'),
url('fonts/helvetica-neue-lt.svg#Thin') format('svg');
}
HelveticaNeue is a Mac system font, and the exact version that Apple uses is not available on PC (as far as I know). I usually add 'Arial' to the font-family style, and it displays fine on a PC.
I would suggest using http://www.google.com/fonts/
Arimo is a compatible font for helevetica neue
easy to implement and compatible across all platforms
HelveticaNeue is an Apple system font. I don't believe there is a PC equivalent, asside Helvetica, witch is not the same, but a close looking one.
We had this situation too, especialy after trying to work with zurbFondation. We tried to debug, even wrote to mozilla ..
My best solution to your problem : don't use helvetica neue and stop your designers from using them like those who know not much about rendering engines.
Just don't use it. If you really really need explanations about 'why not use it' do like us, spend about 6 hours testing cross-plateform, cross-browsers .. and another 4 hours arguing with technical director and designers.
Yeah, this answer is not much of 'scientific' buy AYE! believe me, it's bad.
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+pc+firefox+problem
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+pc+problem
https://www.google.ca/#sclient=psy-ab&q=helvetica+neue+problem
Have a look at this article from typekit: CSS properties that affect type rendering .
Quoted from this article:
When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, CSS properties can affect how type looks.
It's from 2011, but it covers some interesting things about font rendering which are still useful.
I've read that OSX and Windows have two very different algorithms for rendering fonts. As such, it's a common issue that web fonts look "heavier" when viewing them in OSX than they do in Windows.
For example, this is the same font, on the same site, in the same browser, but on different operating systems:
Here's Arial exhibiting similar differences:
Is there any way of altering the rendering of fonts in either Windows or OSX so they look closer to each other? Or is there some other technique to deal with this difference?
That font is a particularly bad example, I deal with a lot of fonts and have never seen one look like that. Keep in mind that people are used to seeing their fonts rendered a certain way on their own machines, and thus it is not your job to dictate how fonts should be rendered.
A few things to keep in mind are to only use weights you've included, for example, do not use font-weight: bold on a custom font-face if you haven't actually included the bold version of that font. "Browser bold" always looks messed up compared to the actual bold font.
Also, for some fonts, I find that I need to change the font-smoothing property for webkit browsers, as the default (subpixel-aliased) can look a little heavy. You can add this property to any element that uses the problematic font (even the body, if required).
-webkit-font-smoothing: antialiased;