I'm struggling to see why a nice clean / simple font like Open Sans Light doesn't look right in Firefox, but looks fine in Chrome and Safari. I guess even Chrome and Safari have some slight differences, but for the most part they look the same in those browsers.
http://503rephotography.com/_font/testfont.html - try and look at it in Firefox and then Chrome or Safari, and you will see what I mean...not sure what it looks like in IE and don't really care all that much to be honest... :) but the font in Firefox is kinda heavy and not quite the right shape, where it should be lighter and better looking. And it's not just this font, it's pretty much every font other than the basics like Arial or Verdana.
CSS
h1 {
font-size:2em;
font-family:OpenSansLight;
color:#000;
}
#font-face {
font-family: 'OpenSansLight';
src: url('fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
HTML
<h1 align="center">Test... Open Sans Light</h1>
I looked around for an answer and most of the issues were just with a specific font, but I don't think that's the case here, as it applies to all of the ones I've tried, and I know they can look good in Firefox from viewing other sites.
Lots of sites use these fonts and look identical across browsers, are they using something like Adobe typekit in order to do this..? For a lot of these I've got the web font kit off fontsquirrel.com and it seems to work fine other than the inconsistencies. Any input is much appreciated...thanks!
All you need to do is to reset the h1 default weight, or include a bold version of the font.
h1 { font-weight: normal; }
The problem here is that h1 and other headline tags have font-weight: bold set as default. And since you've set the fonts font-weight propery to normal and there is no available bold font the browser, the browser will attempt to create a faux-bold version of your font. Which pretty much always ends up looking horrible.
Firefox seems to mess up fonts the most - on the other hand the text looks bold. Chrome and Safari doesn't alter fonts nearly as much, making them look sharper but not really bold at all. Just look at your sample - it's not very obvious that the text is bold.
A good article on the issue here: http://alistapart.com/article/say-no-to-faux-bold
Related
Off the back of this post (CSS3 #font-face not displaying on Mac OS X Safari 5.x OR Chrome) I have come across a new stumbling block. It all seemed to be fixed at first but then I encountered a new problem that I couldn't select any text.
On Firefox in Mac OS X, I cannot highlight any text or even click on any hyperlinks that is using the font-face font.
It is selectable on all other operating systems (including Windows, iOS etc.) and other Mac OS X browsers (like Chrome and Safari).
Try it out on http://gradtouch.com/test
Here's the current CSS code.
#font-face {
font-family: 'Avenir LT 55 Roman';
src: url('fonts/avenir-55.eot?#iefix') format('embedded-opentype'),
url('fonts/avenir-55.woff') format('woff'),
url('fonts/avenir-55.ttf') format('truetype'),
url('fonts/avenir-55.svg#AvenirLT-Roman') format('svg');
font-weight: normal;
font-style: normal;
}
Any ideas or solutions?
Thanks in advance.
At first glance, I would guess something is wrong with the metrics in that font. If I create a <span> containing some of your text and give it a border to see how tall it is, that <span> ends up 0px tall.
Once that happens, selection will be invisible, since it's drawn to the height of the text...
I've seen several examples of the bulletproof syntax. I took this from the original article at fontspring:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
What exactly is supposed to go after the svg# ?
"svg font name" is about the filename? the font-family declaration? what if my font family has spaces?
The #svgFontName is referencing the Font ID embedded inside the svg font file. So, for example, you may have something like this in your svg document:
<font id="example-font-name" horiz-adv-x="512">
Where "example-font-name" should be referenced inside your CSS #font-face like this:
url('myfont-webfont.svg#example-font-name') format('svg');
The SVG font adds support for Legacy iOS, so it's not extremely important. Take a look inside your SVG font file by opening it up in any text editor and look for a Font ID towards the top of your document. Let me know if you have any questions!
I often embed webfont (#font-face) in sites that I develop and I have never encountered a major problem until today.
In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.
What we had before with standard desktop font (= rendering is good for us):
What we had with the font-face (no change in CSS stylesheet):
Here is the CSS:
#content h1 {
background:#000000;
color:#FFFFFF;
font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
font-size:35px;
line-height:30px;
padding:10px;
text-transform:uppercase;
}
Usually font websites will have ways to configure the webfont package when you download it. I buy all my fonts from myfonts.com and under the advanced settings there are options for line-height adjustments. Try downloading the font using native line-height adjustments if this option is available. If not, try uploading the font to fontsquirrel's online font generator and upload the new version.
That's not the same font. The shape of the O and the curvature of the arm on the R give it away, which means the fallback fonts are being used, likely due to #font-face not loading properly. Different fonts will have different default spacing, as stated already, which would also lead you to believe it's a line-height issue.
Try making your fallback fonts something totally obvious, like:
font-family:"DINPro-Bold",serif;
This worked for me:
Generate the webfont at Font Squirrel. After uploading the fonts select 'Expert', scroll down and check the checkbox 'X-height Matching'. This resizes the height to match the x-height.
If you have problem with line-height of your webfont (especially if font suppose to be big in your project) try this: close your font in div or other block element and set "overflow" to "hidden". Div will have exact height of your font so any additional space will be cut off.
Try adding "position: relative; top: 5px;" to the "h1" tag
Try position: relative; paddint-top: 5px; padding-bottom: 0px;
Line height according to wikipedia
In typography, leading (rhymes with heading) refers to the amount of
added vertical spacing between lines of type.
This can be achieved like this...
.class{
line-height: 1em;
}
But if you are referring to the height of the letters then this is not something that can be adjusted. It is part of the font you have chosen to use.
I'm trying to rotate a simple line of text by some degrees with the CSS3 property »rotate«,
precisely by 1.5 degrees.
-webkit-transform: rotate(1.5deg);
-moz-transform: rotate(1.5deg);
-ms-transform: rotate(1.5deg);
-o-transform: rotate(1.5deg);
transform: rotate(1.5deg);
The result in Chrome (v18) is looking OK,
in Firefox (v10) and Safari (5.1.5) however I am getting ugly results.
I am using a font implemented with #font-face, but with Arial i still get problems (at least in Firefox). See examples below.
What's really weird is that switching to a system font (Arial) in Safari resolves the problem, while in Firefox the problem persists.
Any help, workaround or hack would be greatly appreciated.
1) Chrome 18 / font-family: Calibri / alignment OK
2) Firefox 10 / font-family: Calibri / alignment ugly
3) Firefox 10 / font-family: Arial / alignment still ugly
4) Safari 5.1.5 / font-family: Calibri / alignment ugly
5) Safari 5.1.5 / font-family: Arial / alignment OK
So far, I have found the following threads,
but none of them gives an explanation on how to solve the problem:
https://bugzilla.mozilla.org/show_bug.cgi?id=403447
CSS3 Bugs - Issues when using transform:rotate rules (Safari + Firefox)
CSS Transform Rotate letter alignment
I have also tried setting the DirectWrite variables (to change font rendering), as described in this tutorial: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/ , but the results are the same.
This isn't something that you can fix, from the bug report and other bits it looks like the browser makers are aware of these problems.. but I wouldn't hold out for a permanent fix for a while.
Maybe try putting the text in its own div container and rotating that instead of the text directly?
But IMHO if you need this to work on a production site, replace the text with an image. Users are using browsers that don't support the new CSS3 stuff so if it's important either don't use it, or ensure it degrades nicely (functional on all platforms, but may loose some snazz) ie disable the text rotation on the browsers that look ugly.
I have implemented a font in css with #font-face, and its looking way fatter when loaded in Safari. Does anybody know what can cause this?
#font-face {
font-family: 'SerifaBold';
src: url('/css/serifbol-webfont.eot');
src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/serifbol-webfont.woff') format('woff'),
url('/css/serifbol-webfont.ttf') format('truetype'),
url('/css/serifbol-webfont.svg#SerifaBold') format('svg');
font-weight: 100;
font-style: normal;
}
Your font-face rule is telling the browser that this is an ultralight font (the font-weight: 100 part). Then you're presumably asking the browser to use this font for text that has normal weight (font-weight: 400) or is bold (font-weight: 700). The browser sees that it's got an ultralight font (because you told it so) and needs a normal font, and it does what's called "synthetic bolding": artificially making the letters bolder by drawing them several times with a slight offset.
There is no standard for synthetic bold, and the default behaviors of browsers differ.
If you're trying to use this font for bold text, and it's already a bold face, you should say so in your font-face rule, using the font-weight descriptor.
When using web typefaces with "font variations" including different weights and/or italics included in the font family, always apply "font-style: normal" & font-weight: 400; (or font-weight:normal) to each style declaration. Make sure to explicitly declare each font-family differently for each variation:
EG: I'm using Helvatica Neue from fonts.com
strong, b {
font-family:'HelveticaNeueW01-75Bold', 'Arial Black', Arial, sans-serif;
font-weight: 400;
}
em, i {
font-family: 'HelveticaNeueW01-56It', Arial, sans-serif;
font-style: normal;
}
Firefox will "help out" your fonts by faux-bolding & faux-italicizing your nice #font-face type making them really ugly and ruining all the hard work the designer did in creating the fonts.
This applies to all sources of fonts including typekit, google, fonts.com and locally hosted fonts.
I've found the same thing happens. Its almost as if its an entire weight above what it should be. Maybe try with the non-bold version of the font as a starting point?
The same problem on my client's website had driven me crazy, but I finally found the problem. When you call 'SerifaBold' in any of your CSS class, make sure that you also put font-weight: normal;
That finally solved the problem for me.