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.
Related
I was searching the best-practice to implement a font inside a website and I still didn't found a real answer to this.
On forums and blogs many people say that using #font-face is the best way, other using Typekit or Cufon.
I don't like these 3 options.
Font-face render my fonts grainy.
Typekit is not freeware and do not have all the font that I'd like to use.
Cufon use canvas.
There are other way to implement fonts?
There is a way to render it with no grain?
Screenshots:
Mac
Windows
Font rendering depends on the Operation system, some of the font specific settings in the OS, the browser and the font itself. The better the font is prepared for screen usage (hinting,…) the better it looks. Their is no »do it like this and it is always fine way«, there are too many factors that play a role. In the images above you are trying to render very thin font, this is always problematic, especially if the font is badly hinted and/or set in a small size. The advantage of services like TypeKit and google webfonts are that they provide you with screen optimized fonts, so if you are not familiar with fonts themself you should prefer some prepared fonts, or optimize the font yourself if it is too bad. You should also keep in mind that not every font is suitable for screen usage and i think that can be one reason why google and typekit do not provide all fonts.
good luck…
EDIT:
once I forgot to enable some kind of font rendering option on windows, I think it was somewhere at: leftclick computer > properties > performance, but I am not sure where exactly, I do not use windows anymore to find it, but the start was at »leftclick computer > properties« and it was about the »antialiasing« of fonts. After ticking the box it looked much better. It was a thin font too in this case…
greetings…
What exactly do you mean by 'grainy'? I only ever see that in older versions of internet explorer, and there are CSS properties for font smoothing.
Using TypeKit uses #font-face, it's just loaded in a different way. Have you tried Google's webfonts too?
Here is a great article on the best method to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}
My website font is font-family: Century Gothic;.
On my PC it works correctly but on other PCs it is changed.
It also doesn't work on the iPhone.
This happens because those PCs and the iPhone do not have the font installed.
If you want to ensure that your font works on as many computers as possible, you should consider using #font-face.
The basic CSS syntax is
#font-face{
font-family: CenturyGothic;
src: url('CenturyGothic.otf');
}
And then
font-family: CenturyGothic, serif; /* Whatever others you want to add */
Six Revisions has a good overview: http://sixrevisions.com/css/font-face-guide/
FontSquirrel will generate the code for you: http://www.fontsquirrel.com/fontface/generator
It should be noted that unless the font is a non-commercial font, you will need a license to use it with #font-face. That is, you will need to purchase the font and maybe even purchase the right to distribute it.
(Thanks to #bookcasey for highlighting the need to add this info)
A good resource for info on licensing is http://blog.themeforest.net/general/font-licensing-for-the-web/
Having said that, there are thousands of freely available fonts - including dozens on the FontSquirrel site - where no licensing is necessary.
I have a webfont that uses css #face-face, is there a problems with this use of font that is not a "standard" font like Arial or Tahoma? is this method is 100% cross browser support ?
Yhe code looks like that:
font-family: 'myfont_OERegular';
src: url('myfont-webfont.eot');
src: local('myfont_OE'), local('myfont1'), url('myfont_-webfont.woff') format('woff'), url('meodedpashut_myfont-webfont.svg#webfont4Amd3DHq') format('svg');
font-weight: normal;
font-style: normal;
There is never a "100%" cross-browser method for anything. Furthermore, loading fonts for a website like this is even more unreliable. This generally isn't an issue, as long as you are happy with 95-97% of your browsers looking "correct". But there are undoubtedly exceptions.
If you must have a specific font for certain content (such as headings), then the best you can do is load an image. But then, you must take precautions for those that don't load images, are blind, or are search engines.
Finally, make sure you have a license if you are distributing a font.
the support for font face is really good
look: http://www.findmebyip.com/litmus/
and i am using also fontsquirrel and kernest and it works every where, where i tested it (modenr browsers, not too old browsers like ie 5.5, ...)
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.
if i want to have some text show up in a calligraphy font, how do i know how it will render of the users computer. How do i know what fonts that person has on the computer or does it matter? any good examples of doing this in css?
would i be better off putting something together in photoshop and saving as an image?
If you are using the font for headings and fancy page elements that are not going to change often I would use an image from photoshop.
If you want to use the font for the main body of text I would suggest defining a font family in css. I would find the font you want to use on your current os if its a font you found and downloaded chances are the end user wont have it. If its a system font or a font that comes with a major software application like ms word there is a good chance it will be available on the end users machine. Once you have found the font you want to use I would then do a little research and see if you can find something similar in a mac flavour and even a Unix flavour.
body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}
Its always good to use a backup font that you know will work on anyone's machine the browser will select the most applicable in the list starting with the first font stated working its way until it finds a match.
You can embed TTF font files into CSS.
A good example of it is here:
/* DejaVu Sans 2.24
http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
#font-face {
font-family: "DejaVu Sans";
src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}
Edit:
Note: This will only work in Firefox, and possibly Chrome.
Microsoft has published a document about how to embed fonts into a web page using the Embedded OpenType format. It involves converting the font to a an EOT file and then referencing it in the stylesheet using the following syntax:
#font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}
(This was pulled from an official online demo here).
Based on Boldewyn's answer below, I would bet that you could also use a TTF file in the src: parameter.
I tend to use #font-face on my personal websites.. but it depends on what you are doing it for.
First.. the questions.
Is this static text or are we talking about post headlines etc.
If static text, like the main headline, go with an image.
<h1><strong>Same text as the image(seo)</strong></h1>
and in the css
h1 {background:url(/images/use-the-text-as-image-name-for-seo.png) no-repeat top left; width:100px; height:30px;} /* width and height being image width / height /
h1 strong {position:absolute;left:-8000px;}/ makes sure the text doesn't show up over the image, yet doesn't hide it for seo/screen reader purposes */
If you are talking about something that needs to be dynamic, and you need more than graceful degredation, go with sIFR. If graceful degredation is acceptable, go with #font-face
To add to the #font-face supporters: Paul Irish published a version of this CSS declaration, that works in all newer browsers plus all IEs down to IE5.5. However, you need the font as both TTF and EOT formats for this technique to work.
If the license of your font allows this, there are lots of tools to convert back and forth between the formats. Just google for it.