http://i.stack.imgur.com/zl3iE.png
Can anyone tell me why this pixel web-font is becoming blurred in Firefox? I'm using #font-face to render it using CSS. The font-size is 8px, which is identical to 50%, and it renders perfectly in Chrome; no blurry artifacts. But in Firefox, every other word is blurry.
EDIT: Here is the relevant code snippet:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<style type="text/css">
#font-face {
font-family: 'pokemon_rbyregular';
src: url('pokemon_rby-webfont.eot');
src: url('pokemon_rby-webfont.eot?#iefix') format('embedded-opentype'),
url('pokemon_rby-webfont.woff') format('woff'), url('pokemon_rby-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-size: 8px;
text-rendering: optimizeSpeed;
}
This works in every other browser except Firefox (incl. Opera, IE8, and Chrome). I am just wondering if there is some sort of CSS text-rendering setting I could implement that would fix this. I have a feeling it is related to how Firefox implements spacing, as it is only every other word. If I have a long paragraph of jumbled letters, they're all rendered perfectly until I put some spaces in-between them.
Related
My font-face is working properly on:
Desktop Chrome
Desktop Firefox
The same font-face call is NOT working on:
Desktop Safari
iOS Chrome
iOS Firefox
iOS Safari
You can see the landing page with the font-family call for the site/company name here: Derek Erb Solutions
The font-family declaration:
#font-face {
font-family: 'Dce_handwriting';
src: url('/fonts/DceHandwritingRegular.woff') format('woff'),
url('/fonts/DceHandwritingRegular.ttf') format('truetype'),
url('/fonts/DceHandwritingRegular.otf') format('opentype'),
font-weight: normal;
font-style: normal;
font-display: fallback;
}
The font-family call:
#sitename {
font-family: Dce_handwriting, sans-serif;
font-size: 6em;
margin: 0 auto;
}
Looking around at similar problems here I made sure to remove the dashes and underscores from the file name and include the "src:" in the font-family declaration.
I have probably been looking too long at my own code to see the problem any more... but it is particularly frustrating.
As always the biggest part of the problem was a stupid semi-colon!
That last line should read:
url('/fonts/DceHandwritingRegular.otf') format('opentype');
With the all important semi-colon at the end of the line instead of the comma.
This fixed the problem on just about all of the browsers...
I seem to have a problem the other way round some people have here.
Here is the deal. http://www.mb-events.de/wordpress/ renders wonderfully on IE, Chrome and Firefox. However on Safari information like price and testimonials are displayed differently and I just can't find out why. The Google Webfont I use for that is 'Cabin'. I would post a side-by-side comparision, but can't due to being new.
I tried setting different fallback fonts and searched wether Safari does not like Google Webfonts in general.
My CSS is
.entry, .entry p {
font: 300 15px/1.5em 'Cabin', arial, sans-serif;
}
Did you try moving the stacking order of the web font your calling. I've always found that adding the svg type to the top of the stack always helps maintain the readability.
As an example:
#font-face {
font-family: 'encode_widelight';
src: url('encode-sans/encodesanswide-300-light.eot');
src: url('encode-sans/encodesanswide-300-light.eot?#iefix') format('embedded-opentype'),
url('encode-sans/encodesanswide-300-light.svg#encode_sans_widelight') format('svg'), /* Place your svg font here */
url('encode-sans/encodesanswide-300-light.woff') format('woff'),
url('encode-sans/encodesanswide-300-light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
You could also try adding font smoothing to your css:
html {
-webkit-font-smoothing: antialiased;
}
I'm developping a website and I just realised there is a problem with my font rendering only on Safari and I don't find a solution.
Basically I used two custom fonts on my website.
One has a letter spacing of 0.05em to respect my psd file.
My font renders well on Chrome, Firefox, Internet explorer.. But for Safari, strangely, It does not work, the letter spacing does not render.
I read somewhere that it could be a problem with webkit, but if it"s the case why would it be working on chrome ?
It's really making the website horrible on safari and I need to find a fix.
I cannot believe that there is no possible fix for this.
If you have any idea it would be with pleasure.
Below are my code.
Css declaring the font:
#font-face {
font-family: 'univers_lt_std_59_ultracnRg';
src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot');
src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.woff') format('woff'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.ttf') format('truetype'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.svg#univers_lt_std_59_ultracnRg') format('svg');
}
Css of my paragraph:
color: #57585a;
font-family: 'univers_lt_std_59_ultracnRg';
letter-spacing: 0.05em;
font-size: 19.58px;
text-transform: uppercase;
-webkit-font-kerning: initial;
line-height: 26.47px;
Rendering on Chrome Firefox, and Internet Explorer
Rendering on Safari
Clearly the letter spacing does not work..
If you have any idea thanks again.
Try using pixels instead of relative values for letter spacing. Also, use round numbers for font-size and line-height. Safari has been known to round differently.
When I apply a font-weight:bold style, the look of the font is too bold in Safari when compared to other browsers. I tried below css as suggested in some site but its still the same.
text-shadow: #000000 0 0 0px;
Screenshots of text rendering:
Chrome
Safari
Here's my css declaration:
p {
margin: 8px 5px 0 15px;
color:#D8D2CE;
font-size:11pt;
letter-spacing:-1px;
font-weight: bold;
font-family: LektonRegular;
}
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-regular-webfont.eot');
src: url('myfonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-regular-webfont.woff') format('woff'),
url(myfonts/lekton-regular-webfont.ttf) format('truetype'),
url('myfonts/lekton-regular-webfont.svg#LektonRegular') format('svg');
font-weight: normal;
font-style: normal;
}
How can this be fixed?
Use -webkit-font-smoothing: antialiased;
The text-shadow trick doesn't work anymore.
For rendering bold text consistently across browsers, your font should explicitly contain bold characters. Otherwise, browsers probably try to make bold variants of characters based on their normal variants, and results are inconsistent across browsers since they likely have different algorithms for such conversion.
Also note that text rendering may be different on different platforms on system level (e.g. Windows, Mac OS). Such differences are OK and do not typically need to be fixed.
See also topic about -webkit-font-smoothing property.
The -webkit solutions won't work for the strong issue for many google fonts, custom fonts and fonts that don't have preset values.
The problem is that you need to specify the value of bold in the strong tags.
This can be done by two ways:
You can either include from Google Fonts or wherever your font is from in your header; it needs both the regular font and the bold font each should have a different font-weight number like 400 regular and 600 bold for example:
<link href="https://fonts.xxx.com/css?family=XXX:400,600" rel="stylesheet">
Or use the aboves source code and paste into your own css like below:
#font-face {
font-family: 'XXX';
font-style: normal;
font-weight: 600;
src: local('XXX SemiBold'), local('XXX-SemiBold'),
url...
}
Use whatever your font is instead of XXX.
Then also in strong {font-weight:600;}
None of the answers here worked for me. Possibly because I am using the windows version of Safari for testing. I had to include the bold font in my CSS to fix the problem. In the case of the original question he would need to add the following (notice it uses the same font-family name)
#font-face {
font-family: 'LektonRegular';
src: url('myfonts/lekton-bold-webfont.eot');
src: url('myfonts/lekton-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('myfonts/lekton-bold-webfont.woff') format('woff'),
url(myfonts/lekton-bold-webfont.ttf) format('truetype'),
url('myfonts/lekton-bold-webfont.svg#LektonRegular') format('svg');
font-weight: bold;
font-style: normal;
}
This worked in all browsers for me.
I found a solution for this particular issue. Actually any of above solutions dint work for me. So started checking the default webkit styles added by safari and found that -webkit-text-stroke-width was applied to body having value 0.5px. I set it to 0!important and solved the issue for me.
I have a webfont that looks amazing on Firefox, not so much on Chrome. I've tried playing with the text-rendering property, with less-than-spectacular results. My CSS is something like this:
#font-face {
font-family: 'TextFont';
src: url('[my font file url]') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: TextFont, Tahoma, Geneva, sans-serif;
text-rendering: auto;
}
Changing text-rendering doesn't seem to do anything in Firefox, so I'm posting a single screenshot for it.
Results:
Firefox (a.k.a. "what it should look like")
Chrome - text-rendering: auto
Chrome - text-rendering: optimizeLegibility
Chrome - text-rendering: optimizeSpeed
Chrome - text-rendering: geometricPrecision
All of the Chrome screenshots look really bad compared to the Firefox one. Is there something I'm missing in the CSS?
I'm using Windows 7, Firefox 8.0, and Chrome 15.0.
Not sure if this is what you're seeing, but Chrome has an issue with anti-aliasing and truetype fonts. As per http://www.fontspring.com/blog/smoother-web-font-rendering-chrome, you can instead specify the SVG font before the TrueType in your font-face, e.g.:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot');
src: url('webfont.eot?#iefix') format('embedded-opentype'),
url('webfont.svg#svgFontName') format('svg'),
url('webfont.woff') format('woff'),
url('webfont.ttf') format('truetype');
}
The biggest downside is that Safari will download both the svg and the woff.
Try this:
-webkit-text-stroke: .5px
The .5 is kind of arbitrary - some pixel value between 0 and 1 is the key. This forces sub-pixel hinting of the font.
A demo can be seen here:
http://dabblet.com/gist/4154587
This is how I do all of mine and it's worked on IE, Firefox, Chrome
#font-face {
font-family: 'NeutraTextBold';
src: url('../fonts/neutra_text_bold-webfont.eot');
src: url('../fonts/neutra_text_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/neutra_text_bold-webfont.woff') format('woff'),
url('../fonts/neutra_text_bold-webfont.ttf') format('truetype'),
url('../fonts/neutra_text_bold-webfont.svg#NeutraTextBold') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font: 12px 'NeutraTextBold', sans-serif;
color: #FFF;
}
I get my code from fontsquirrel
There really is not anything you can do to improve this via CSS. The text rendering engines are different between Firefox and Chrome and you are seeing the results. If the font is not properly hinted and prepared for a web font you can expect results like this to be enhanced.
Where was the font acquired from?
You can try running it through FontSquirrel to see if any of the automatic hinting that Ethan offers might normalize this a bit.
Some additional information on rendering and DiretWrite which is what you are seeing as the big differentiators....http://blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html
Chrome has anounced in Chrome 37 they will be switching from Windows Graphics Device interface to Microsoft’s DirectWrite API, a technology that improves the way fonts look on modern screens.
The Beta is now out:
https://www.google.com/chrome/browser/beta.html
From google:
http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html