I'm working on getting Museo Slab 500 font to display similar across all browsers.
The only browser where I can not get the font to work properly is Firefox. In fact, the font looks horrible. Especially notice the "w".
Example:
What I did: Downloaded font from: myfonts.com and
generated webfont at: fontsquirrel.com
OS: Widows 8
Firefox version: 21.0
CSS:
#font-face {
font-family: 'museo_slab500';
src: url('../font/exljbris_-_museoslab-500-webfont.eot');
src:url('../font/exljbris_-_museoslab-500-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/exljbris_-_museoslab-500-webfont.svg#museo_slab500') format('svg'),
url('../font/exljbris_-_museoslab-500-webfont.woff') format('woff'),
url('../font/exljbris_-_museoslab-500-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'museo_slab500';
src: url('../font/exljbris_-_museoslab-500-webfont.svg#museo_slab500') format('svg');
font-weight: normal;
font-style: normal;
}
}
What can I do? Am I doing something wrong?
See https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
And try differents value of text-rendering. Maybe nothing will change, but sometimes it helps.
Have you tried on another computer ? Because the text rendering can change between differents computers and/or OS.
I had same problem after I changed my graphic card. Updating drivers did not help, looks like somehow Firefox disabled DirectWrite feature. To manually enable this feature open about:config, than check if gfx.font_rendering.directwrite.enabled property. Double click to set it true (in case it is false).
Restart Firefox after.
Related
We're currently building a website for a large audience and most of the test users are using Windows. They noticed a very distorted font rendering, see Screenshot:
I tried some "fixes" I could find, like adding a subtle text-shadow, using zoom: 1 and/or setting translateZ(0). I also tried using filter and font-smoothing properties, but the font is not getting better.
I'm using a font-face (Texta Narrow). Firefox on Windows looks even worse than IE9.
Is there any way to smoothen the text at least a little, or is my only option to use another font?
If you're using font-face in your website, so you should to change the font-face declaration/format, like this.
font-family: 'fontName';
src: url('fontName.eot');
src: url('fontName.svg#fontNameID') format('svg'),
url('fontName.eot?#iefix') format('embedded-opentype'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
The problem is the whole website doesn't show text until I inspect element with Chrome. It all works fine on other browsers.
I don't have any chrome extensions installed and am using an incognito window, but still nothing.
The website passes validation via W3C - the site is: http://www.toricks.com
I'm using #font-face, which by looking at it seems to be setup fine!
Can anyone shed any light on this?
You can try the Font Squirrel way of adding the #font-face like this:
#font-face {
font-family: 'Comfortaa';
src: url('comfortaa.eot');
src: url('comfortaa.eot?#iefix') format('embedded-opentype'),
url('comfortaa.woff') format('woff'),
url('comfortaa.ttf') format('truetype'),
url('comfortaa.svg#comfortaanormal') format('svg');
font-weight: normal;
font-style: normal;
}
I think this has the best cross-browser support. Make sure you convert your font to all the different types (you can do that with the Font Squirrel generator).
I've been using Source Sans Pro and Source Code Pro on my sites, and it looks great in Safari and Chrome. In Firefox, however, it looks like the wrong font weight is being used, as the weight is much lighter (and harder to read) in Firefox. My #font-face declarations look like this:
#font-face {
font-family: 'Source Sans Pro';
src: url('/fonts/sourcesanspro-regular-webfont.eot');
src: url('/fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sourcesanspro-regular-webfont.woff') format('woff'),
url('/fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
url('/fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Source Sans Pro';
src: url('/fonts/sourcesanspro-light-webfont.eot');
src: url('/fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sourcesanspro-light-webfont.woff') format('woff'),
url('/fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
url('/fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
font-weight: lighter; // light
font-style: normal;
}
See the file for the full declaration. Is there something about my declarations that causes Firefox to select the wrong file when displaying the normal size?
As pointed out in this answer, it looks as though Firefox uses the last declared #font-face for a given style to display the content. The last face I had defined for the normal style had a weight of light, so that was the one Firefox used. The solution is to use the numeric weights in the #font-face declarations, as I have now done here. Then it properly uses the normal weight where appropriate.
Chrome and Safari use webkit as their rendering engine. (Chrome has now moved to Blink that uses a subset of webkit). Firefox on the other hand uses gecko. So yeah, that's pretty much the reason why we need to test webpages with different browsers.
As for your question, I guess this will help: http://css-tricks.com/forums/topic/font-rendering-ugly-in-firefox-but-beautiful-in-webkit/
I have the code below in my css file. The font renders as desired in all browsers on Mac OS, but will not render on Windows. Now before you say it's not Windows compatible, I have made a dummy page on the Windows machine, and it runs the '.woff' file fine in Chrome (not IE). Hovever IE can render this page. I feel like I'm missing something important in the #font-face. Here is my code:
#font-face { font-family: Skia;
src:url('./webfonts/skia.ttf') format('truetype'),
url('./webfonts/skia.eot') format('embedded-opentype'),
url('./webfonts/skia.woff') format('woff'),
url('./webfonts/skia.svg');
font-weight: lighter;
font-style: normal;
}
the 'webfonts' folder is in the same directory as the 'styles' folder where the css files are located.
>styles
>'style.css'
>webfonts
>'skia.ttf / woff / eot / svg'
In the <body> tag, I'm including font-family:Skia, sans-serif;
It looks like you're on the right track
#font-face {
font-family: "sansation";
src: url("fonts/sansation_light.eot");
src: url("fonts/sansation_light.eot?#iefix") format("eot"),
url("fonts/sansation_light.ttf") format("truetype"),
url("fonts/sansation_light.woff") format("woff"),
url("fonts/sansation_light.svg") format("svg");
font-weight: 200;
font-style: normal;
}
You do want to include the format, ie fixes for older versions of ie, woff for opera, and svg for mobile devices. This format usually never does me wrong!
Also, you can safely omit ./ since it relates to the current directory. You also should to include the font-weight and font-style. Checkout how google webfonts does this.
I've been through a slew of questions here and I'm not seeing why what I'm doing isn't working — but it isn't. I want to use a couple nonstandard fonts in a website, embedded via css.
Here's what the CSS I got from FontSquirrel looks like:
#font-face {
font-family: 'CrimsonRoman';
src: url('Crimson-Roman-webfont.eot');
src: url('Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('Crimson-Roman-webfont.woff') format('woff'),
url('Crimson-Roman-webfont.ttf') format('truetype'),
url('Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
Here's where it's referenced in my main css stylesheet:
p {
margin: 0 0 9px;
font-family: 'CrimsonRoman', Garamond, Times, Times New Roman, serif;
font-size: 13px;
line-height: 18px;
}
Everything's in the same directory right now, so I'm not even dealing with navigating through directories yet. The "p" declaration itself seems to be working, because if I change the first term to "Crimson," the name the font has on my computer, it loads it fine (or if I switch it to any other font I have installed locally). Whatever the problem is, I'm not seeing it.
Both sheets are linked successfully in my html doc, and the font's is linked before the main one.
I'm using Firefox to test.
Make sure your directory path is correct and pointing to the folder your font's are in on the server.
eg
#font-face {
font-family: 'CrimsonRoman';
src: url('/fonts/Crimson-Roman-webfont.eot');
src: url('/fonts/Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Crimson-Roman-webfont.woff') format('woff'),
url('/fonts/Crimson-Roman-webfont.ttf') format('truetype'),
url('/fonts/Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
}
It's turned out to be something in how Dreamweaver renders pages, or reads CSS, etc. I finally uploaded everything to the site so I could show a couple people what was going on and the fonts mysteriously loaded. So my lesson for tonight is to regard Dreamweaver's design view as a potentially inaccurate sketch, and to look at things exactly where they'll be before I spend hours trying to fix something that isn't broken. :\
Not the answer you looking for but I really want to advice to use Cufon for this. (Direct link to Cufon)
Although #font-face is more and more supported by browsers like IE it still doesn't work perfect on each computer.
Cufon is, as we speak, supported by:
Internet Explorer 6, 7 and 8
Internet Explorer 9 beta (as of 1.09i)
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+ (9.01+ as of 1.10)
Google Chrome 1.0+
iOS 2.0+
Opera Mini (to a certain degree)
...and gives next to that way more cool font-options.