Here's my problem: I'm using font-face for the menu of my website, but Firefox on Mac displays it too bold
On a PC, everything works well, the font is perfectly sized and looks like it should
Unfortunatly, on Mac, i have to had a CSS hack for Safari (which works), but I didn't find anything similiar in Firefox.
I've tried the "text-shadow hack", i tried using the font-weight property (which pretty much doesn't do anything).
And now, some code!
#font-face {
font-family: 'KnockoutHTF48FeatherweightRg';
src: url('font/knockout-htf48-featherweight-webfont.eot');
src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'),
url('font/knockout-htf48-featherweight-webfont.woff') format('woff'),
url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'),
url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg') format('svg');
font-weight: normal;
font-style: normal;
}
For Safari:
body{
...
-webkit-font-smoothing: antialiased;
}
Left if FF on Mac and right is FF on PC (the good version)
Thanks!
FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.
thread here
https://bugzilla.mozilla.org/show_bug.cgi?id=857142
you can use,
font-weight:normal !important;
for fix the visualization error on firefox Mac.
This affects firefox browser ONLY.
#-moz-document url-prefix() {
.classname {
font-weight:normal;
/* or any other option */
}
}
Enjoy!
There is trick explained http://dave-bond.com/css/font-too-bold-on-a-mac/
basically is to apply opacity: 0.99; to those texts...
Every font supports different weights. Some can be really thing, others can't.
Mac and PC will render the same font differently. It's a core operating system thing, and basically, there's nothing you can do about it. :(
Most consistent results can be achieved using something like Google Webfonts or TypeKit.
One of the thinnest fonts standard on Mac is Helvetica Neue.
Also worth noting that font-weight supports values 100,200,...800,900.
I've found that making a slightly "lighter" version of the icons is the best way to compensate for this. They're passable in Firefox, and ever-so-slightly lighter in all other browsers. In Illustrator, I create a 16px icon. I resize it to 1024px, and apply an offset path of -6px (these are the numbers that worked best for me). I then export that as a svg, and import it into IcoMoon to build the icon-font. I don't use -webkit-font-smoothing:antialiased (or the pending -moz-osx-font-smoothing: grayscale) unless it's a light icon over a dark background. This is the best way I've found to get icon-fonts to display (mostly) uniformly across browsers & platforms.
Found this on CSS Tricks and this freaking works.
add this to the stylesheet:
-moz-osx-font-smoothing: grayscale;
Related
I am having trouble with #font-face in CSS. The font I am using looks very different in each browser.
See this example in Firefox:
And here in Chrome:
I don't know what causes this problem. I already tried to use text-rendering and I also tried changing the order of the url-properties in the #font-face declaration.
I am using Windows 7 Professional and Firefox V30.
Can somebody inform me about the reason for this issue and tell me how I could fix it?
Many thanks.
//EDIT:
This is the #font-face declaration I am using:
#font-face {
font-family: 'MyFont';
src: url('myFont.eot');
src: url('myFont.eot?#iefix') format('embedded-opentype'),
url('myFont.svg#myfont') format('svg'),
url('myFont.woff') format('woff'),
url('myFont.ttf') format('truetype');
font-style: normal;
font-weight : normal;
}
As I wrote above I already played with the order of this commands.
In my particular problem you can see this page (footer) showing the problem.
Most modern browsers use DirectWrite on Windows to render text, except for Chrome. Luckily they are implementing it now and it was recently set as the default in the latest Chrome builds. Thats the good news, the bad news is that it still has bugs and doesn't always render fonts correctly. You can see if this is a problem by disabling it to see if that fixes the issue.
To disable DirectWrite type chrome://flags/ in the address bar and find the option labeled 'Disable DirectWrite'. If this does fix the issue, you should log a bug with the examples of your text rendering so that it can be fixed.
You can read more about it on the Chrome blog at http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html.
This seems to be a font issue since all opportunities that work for others do not affect the problem. Switching to a other font is the only solution in this moment.
I had the same problem and fixed it with the follow small thing
color:#505563;
font-family: 'Dosis', sans-serif;
text-shadow: 0px 1px 2px #eeeeee;
In other words just add text shadow and it will work fine, play with the correct colors as an artist. Try this
text-shadow: 0px 0px 1px #eeeeee;
Browsers have accessibility features that override CSS. Make sure the text or page settings are not zooming. See https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
If nothing else this will at least rule out one variable, making debugging more effective.
Am using the following code to display H1 items in a special font.
#font-face {
font-family: 'Serif-semi-bold';
src: url('http://www.jaguarseascouts.org.uk/wp-content/themes/molesey/fonts/TheSerifSemiBold-Plain.ttf'); /* IE9 Compat Modes */
}
Displays fine in IE, Firefox etc but looks very grainy and poor in Chrome.
Why would this be?
Many thanks
Most modern browsers use .woff fonts, so you may want to include that one too. On the other side, Chrome usually does a really bad job as rendering fonts.
There are ways to clean fonts in most browsers now.
Insert this into your CSS and this will help most fonts:
html {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
}
If that particular font is problematic, you can download it, upload it and convert it at fontsquirrel.com - it will give you code and multiple different font formats after conversion.
Using Google WebFonts ("Oswald" in this case), I have found that my fonts are rendered bolder than they should be. I have solved this problem in webkit based browsers using:
-webkit-font-smoothing: antialiased;
but in Firefox I cannot find the declaration that controls this. I have heard of using a text-shadow hack to fix this, but I would prefer not to use this as it will undoubtedly change the geometric properties of the fonts.
Here is what it looks like in webkit (Chrome):
This is the blocky horrible rendering thanks to Firefox:
I know there is a way to achieve this in FireFox, because I found this font on font-combinator.com, and it renders properly on font-combinator using Firefox. Here is what it looks like on Firefox through font-combinator.com:
After browsing through the css used to create font-combinator, I found this declaration: text-rendering: optimizelegibility;, but this does not work when applied to my element.
I have also tried:
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smooth: never;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
How can I get Firefox to antialias my fonts so that they look right when displayed? Can you find the declaration, or combination of declarations that makes them display properly on www.font-combinator.com?
I am using an relatively old version of FireFox (16.0.2) because this machine has an old version of OSX installed.
This is a Firefox on OSX problem only...
I just answered this question: How to antialias SVG text in Firefox with a possible solution form your problem.
I think you could use the following attribute:
-moz-osx-font-smoothing: grayscale;
This will be released with firefox 25 (a nightly build can be found at http://nightly.mozilla.org/)
Have you tried declaring a numerical font-weight instead of just 'normal' or 'bold'? There's a lot of differences in rendering of webfonts in different browsers.
Try setting {font-weight: 400;} for normal text and {font-weight: 700;} for bold.
I use the Google Webfonts service on my website and rely heavily on it. It renders fine on most browsers, but in Chrome on Windows it renders especially bad. Very choppy and pixelated.
What i have found out so far is that Chrome requires the .svg format font to be loaded first. The font i am using however, called Asap, was only available in .woff. I converted it to .svg using a free online service, but when i added that to my stylesheet (before the .woff), it didn't change anything.
I've also tried:
-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;
Hoping that either would help the text render more smoothly.
Right now i've run out of ideas and i would hate to change fonts. Does anyone have an idea how i can solve this problem? I've been using the Adobe Browserlab to test the rendering, seeing as how i only own a mac. The link to the site is: www.symvoli.nl/about
Thanks in advance!
Edit April 11th, 2013:
Chrome 35 Beta seems to have finally solved this issue:
Update August 2014
Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won't delete this answer.
Problem
The issue is created because chrome actually cannot render TrueType fonts with correct anti-aliasing. However, chrome still renders SVG files well. If you move the call for your svg file up in your syntax above the woff, chrome will download the svg and use it instead of the woff file. Some tricks like you propose work well, but only on certain font sizes.
But this bug is very well known to the Chrome developer team, and has been in fixing since July 2012. See the official bug report thread here: https://code.google.com/p/chromium/issues/detail?id=137692
Update Oct 2013 (Thanks to #Catch22)
Apparently some websites may experience intermittent spacing issues when rendering the svg. So there is a better way to skin it. If you call the svg with a media query specific to Chrome, the spacing issues disappear:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'MyWebFont';
src: url('webfont.svg#svgFontName') format('svg');
}
}
First approach solution:
The Fontspring bulletproof syntax modified to serve the svg first:
#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');
}
Further reading:
CSS properties that affect type rendering
Smoother Web Font Rendering in Chrome for Windows
How to Bulletproof #font-face Web Fonts
-webkit-text-stroke: 0.5px;
use it only on large text, since it will affect your page performance.
A fix has been suggested here by calling the .svg file first, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
I've tried a number of solutions and finally came up with one that works with newer versions of Chrome which don't fall for changing the order of the files:
Essentially, I moved the TTF file into a Mozilla specific section.
#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');
}
#-moz-font-face {
font-family: 'MyWebFont';
src: url('webfont.ttf') format('truetype');
}
Answer by Tom & font-spring didn't do it for me for some reason. This fix by Sam Goddard did though :
After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilises the .svg file in the #font-face kit, and doesn’t like being called last. Below is the standard call for #font-face using CSS:
// font-face inclusion
#font-face {
font-family: 'font-name';
src: url('path-to-font/font-name.eot');
src: url('path-to-font/font-name.eot?#iefix') format('eot'),
url('path-to-font/font-name.woff') format('woff'),
url('path-to-font/font-name.ttf') format('truetype'),
url('path-to-font/font-name.svg') format('svg');
font-weight: normal;
font-style: normal;
}
As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .svg file.
// Usage
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: ‘font-name';
src: url(‘path-to-font/font-name.svg’) format(‘svg’);
}
}
It could just be the font your using "asap" doesn't render all that well at certain sizes. I changed the size of your h1 from 3.5em to 50px and it looks a little better. May not be the perfect solution but I have noticed that a lot of google webfonts can be unpredictable
I develop in Firefox. My experience is that FF displays ttf fonts very well without any extra rules (beyond the #font-face calling the url for the font file). Chrome, however, is a different story. Even with with the -webkit-font-smoothing: antialiased; rule it still displays any font quite raggedly. Safari doesn't seem to have that problem, so it's not inherently Webkit that can't render a font cleanly, it's a Chrome problem.
I haven't tried adding the -webkit-text-stroke: 0.5px; rule, but will.
Of the answers above I really like Tom Sarduy's answer best. Aside from a good description of the problem, he gives a great #font-face stack to use to cover all the major browsers.
Another link reference for web font rendering in chrome -
http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
Had the same thing guys. Good in all browsers except chrome - even IE10 and 9 were fine. Dreamwaeevr CS6 also uses a similar version of fontsprings code, but has the svg at the end. Change it round for SVG before woff and ttf and all in the world is good. Tom is bang on with hos example there, in fact past that into your code and map paths to the fonts you need, and you're in business!
It seems that Google might serve different woff files depending on the browser and OS.
I found that if I download the font from IE, it's about 10k bigger than if done on Safari from the Mac for a particular font. 43k vs 33k. Also, the IE version seems to look fine on the Mac, but the Mac version doesn't seem to work fine on the PC. The Mac version looks the worst in Mozilla Firefox on the PC.
Try this:
http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic
SourceSansPro-Regular.woff PC version 27k
SourceSansPro-Regular.woff Apple version 24k
i have tried many ways:
-loading the svg with font-face
-webkit-font-smoothening
...
after
-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);
the rotating was smoother but the main problem hasnt gone.
For me the solution was adding:
-webkit-text-stroke: 0.5px;
https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/
This post explains a little about google chromes experimental functions. Apparently enabling the "DisableWrite" option fixes the jagged fonts. This is obviously a fix PER machine and not on a full scale.
I've used http://www.fontsquirrel.com/ to create a #font-face kit.
It works fine, but the result on windows is different from the result on mac.
On windows the font seems to have a wrong anti-aliasing:
this is the result on Mac with FF, Chrome or Safari (all updated to last version).
this is the result on Windows with FF or Chrome.
As you can see, the result is not the same. On Windows the font is thicker and rougher.
How can I solve this?
I too have been plagued with this on Chrome and I think I've just found the answer!
Chrome didn't like the default fontsquirrel.com generated CSS.
#font-face {
font-family: 'HLC';
src: url('/_styles/hlc/hl-webfont.eot');
src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
url('/_styles/hlc/hl-webfont.woff') format('woff'),
url('/_styles/hlc/hl-webfont.ttf') format('truetype'),
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');
font-weight: normal;
font-style: normal;
}
To fix, i moved the SVG line:
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')
to the top of the list. Now I see anti-alias fonts! I guess Chrome wants to be first...
/* THIS WORKS FOR ME */
#font-face {
font-family: 'HLC';
src: url('/_styles/hlc/hl-webfont.eot');
src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
url('/_styles/hlc/hl-webfont.woff') format('woff'),
url('/_styles/hlc/hl-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope it works for you too. Enjoy!
I'm surprised no one mentioned this. Applying a slight -webkit-text-stroke does the trick for me whatever the format (extension) of the font you are using. Some recommend a -webkit-text-stroke: 1px but to me it alters the font look too much (make it too strong). But a 0.5px one makes the stroke almost unnoticeable and it turns on the antialiasing:
-webkit-text-stroke: 0.5px;
Put it in your css definition for html tag and you're done!
This just looks like the normal ugly way fonts are rendered in WinXP. Some (IMO: misguided) people even prefer it.
To get anti-aliasing for desktop fonts in general on XP you have to turn it on, from Display Properties -> Appearance -> Effects -> Use the following method to smooth edges of screen fonts -> ClearType. The default setting “Standard” is the old-school Windows “font smudging” technique that only bothers to turn on at larger font sizes, and then often makes a mess.
IE7+ has an option—on by default—to always use ClearType anti-aliasing to render fonts in the web browser. Other web browsers will respect the user's configured font rendering method. It is a shame that so many people still have this beneficial setting turned off, but it's not really your problem.
(There is nasty hack to make Chrome perform some anti-aliasing on text, which is:
text-shadow: 0px 0px 1px rgba(0,0,0,0);
but I seriously wouldn't recommend it.)
One thing you can do when the “Use the following method...” setting is set to “Standard”, to try to make the font get some form of anti-aliasing, is to check that the font in question doesn't have a GASP table telling old-fashioned TrueType renderers to disable anti-aliasing at particular font sizes. You can change the GASP table using a font editor or with the ttfgasp.exe command-line tool.
There is also a font called Vegur that looks like Myriad Pro but is legal to embed in a website.
Hope that helps!
I've done a little research, and I've found a hack that I think makes a difference. Put this in your CSS with your font variables:
-webkit-transform: rotate(-0.0000000001deg);
As well, I find that a full-on black (#000000) doesn't help matters either. Using a very dark seemed to help me.
Changing setting in Windows or a browser itself is not a solution. When you use #font-face, you want the font to look nice on every screen in every browser, not just in yours.
The trick with
text-shadow: 0 0 1px rgba(255,255,255,0.1);
or
-webkit-transform: rotate(-0.0000000001deg);
doesn't work anymore in Chrome 16.0.912.63 m, Windows Vista.
I couldn't find a way to overcome this issue though.
This is code im using to fix "Chrome rendering problem":
#font-face {
font-family: 'fontname';
src: url('fonts/fontname.eot');
src: url('fonts/fontname.eot') format('embedded-opentype'),
url('fonts/fontname.svg') format('svg');
}
/*if mozilla*/
#-moz-document url-prefix() {
#font-face {
font-family: 'fontname';
src: url('fonts/fontname.ttf') format('truetype');
}
}
:) it works for me...FINALLY!
-webkit-transform: rotate(-0.0000000001deg);
Update: No longer working in Chrome 15.0.874.106 m. Though it does work in IE9 and Firefox – >Zequez Nov 4 at 15:28
UPDATE: This is working (at least for me) in Chrome 15.0.874.121 m.
IE9 and Firefox shouldn't need it, or be targeted by it since the selector specifies -webkit-.