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;
}
Related
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'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.
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
I have a site where the font face usually works, even in ie.
But in firefox letters are jagged and ugly, I think a rendering problem. In firefox the MAC functions normally, as in other browsers. I tried to solve a lot of ways without success.
Can anyone help me?
link to the image
#font-face {
font-family: 'Myriad Pro';
src: url('myriadpro-regular.eot');
src: url('myriadpro-regular.eot?#iefix') format('embedded-opentype'),
url('myriadpro-regular.woff') format('woff'),
url('myriadpro-regular.ttf') format('truetype'),
url('myriadpro-regular.svg#myriadpro-regular') format('svg');
font-weight: normal;
font-style: normal;
}
Sorry to bother you but as far as i know you can't use Adobes font in websites, well technicaly you can't use them on anything, that will allow other people to access the font (i could for example use you Myriad Pro font just by fooling around firebug).
As far as your project is hiting live, anyways hope my info helps.
I'm using http://www.fontsquirrel.com/fontface/generator to generate my font ready for web. I've set the options to include subsetting of the German language.
In the website I put this: Über WFW Deutschland but when viewed it comes out as Uber WFW Deutschland. Whats weird is that if I view in any IE version it shows correctly. If I switch to any default system font it also displays correctly in any browser.
How can I get my generated font to work correctly?
Update - CSS Code from generator:
#font-face {
font-family: 'PalatinoMedium';
src: url('../fonts/palatinm-webfont.eot');
src: url('../fonts/palatinm-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/palatinm-webfont.woff') format('woff'),
url('../fonts/palatinm-webfont.ttf') format('truetype'),
url('../fonts/palatinm-webfont.svg#PalatinoMedium') format('svg');
font-weight: normal;
font-style: normal;
}
After hours of fannying about I found that the option Apply Hinting - Improve Win rendering when ticked was breaking the font. Un-ticked that and reconverted my font and now the font is displaying as it should.
Although the font doesn't look as nice on Windows...