I am loading a font with 3 weights from Google fonts, and I can display properly text in the 3 weights on Firefox and Chrome, but it won't work in Safari:
https://jsfiddle.net/vmarquet/u6ezqbrm/
Is Safari not supporting font-face aliases?
This should work for you: https://jsfiddle.net/7czpo2s3/
When I tested your sample, only the Regular weight displayed in Chrome and Safari. The other #font-face declarations you had might have been using your local copy of the font, if you have it installed, but they wouldn’t work for anyone else who doesn’t have it installed locally.
Because you are using Google Fonts, the #font-face declarations to use the hosted fonts are already written for you. If you go directly to the Google Fonts URL, you’ll see you’re getting a CSS stylesheet with the #font-face declarations already written. The font-family for all the styles is Montserrat. Instead of using the different weights with the font-family name, you want to change it with the font-weight.
Here’s what I changed from your sample:
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap" rel="stylesheet">
<style>
.light,
.regular,
.bold {
font-family: "Montserrat";
}
.light { font-weight: 300; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }
</style>
<div class="regular">Montserrat</div>
<div class="light">Montserrat</div>
<div class="bold">Montserrat</div>
If you do have the Montserrat font installed locally, you might also want to disable it. Then, it will be easier to tell when things are working, as Google Fonts will also use the local fonts if they are available.
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.
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;
I used the Museosans500 font with the following syntax
#font-face {
font-family: 'MuseoSans500';
src: url('MuseoSans_500-webfont.eot');
src: url('MuseoSans_500-webfont.eot?iefix') format('eot'),
url('MuseoSans_500-webfont.woff') format('woff'),
url('MuseoSans_500-webfont.ttf') format('truetype'),
url('MuseoSans_500-webfont.svg#webfontkQkWxTED') format('svg');
font-weight: normal;
font-style: normal;
}
It is working fine in Firefox, but it is not displaying the font correctly in Chrome.
I'm not sure what issues you are experiencing but this website http://seanmcb.com/typekit/webkit-antialiasing-test.html gives a great run-down of test cases of a webkit bug, which might be what you're experiencing.
I'm seeing the anti-aliasing issue in my own site and I'm going to try out the pseudo-element trick. The bug as described by the site: "In Webkit browsers on Mac, #font-face fonts render with whatever antialiasing setting the previously rendered text was using."
Next, would be good to see if webkit has a bug open for this issue.
Yes this is correct - make sure you define SVG first, otherwise Chrome will use that to display the font, and this will look jagged. By putting it first you ensure that Chrome will use one of the later definitions to display the font.
This might be due to the version of Chrome you're running on Windows. I know Chrome 10's #font-face rendering was not too smooth. Please take a screenshot and share with us and then possibly update your browser, take another screenshot and compare them.
Good luck!
Put SVG format before all others on your CSS.
I've been developing a site that uses the Google Fonts API. It's great, and supposedly has been tested in IE, but when testing in IE 8 the fonts simply don't get styled.
I included the font, as Google instructs, thus:
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"
rel="stylesheet" type="text/css" />
and added its name to the front of a font family in CSS thus:
body {
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif;
font-size: 16px;
overflow-y: scroll;
overflow-x: hidden;
color: #05121F;
}
Works like a charm in Chrome, Firefox, Safari. No dice in IE 8. Anybody know why?
Looks like IE8-IE7 can't understand multiple Google Web Font styles through the same file request using the link tags href.
These two links helped me figure this out:
See this open Google issue, and look at the comments.
Also see this StackOverlow Answer Google Web Fonts don't work in
IE8
The only way I have gotten it to work in IE7-IE8 is to only have one Google Web Font request. And only have one font style in the href of the link tag:
So normally you would have this, declaring multiple font styles in the same request:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />
But in IE7-IE8 add a IE conditional and specify each Google font style separately and it will work:
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->
Hope this can help others!
The method, as indicated by their technical considerations page, is correct - so you're definitely not doing anything wrong. However, this bug report on Google Code indicate that there is a problem with the fonts Google produced for this, specifically the IE version. This only seems to affect only some fonts, but it's a real bummmer.
The answers on the thread indicate that the problem lies with the files Google's serving up, so there's nothing you can do about it. The author suggest getting the fonts from alternative locations, like FontSquirrel, and serving it locally instead, in which case you might also be interested in sites like the League of Movable Type.
N.B. As of Oct 2010 the issue is reported as fixed and closed on the Google Code bug report.
Google Fonts uses Web Open Font Format (WOFF), which is good, because it's the recommended font format by the W3C.
IE versions older than IE9 don't support Web Open Font Format (WOFF) because it didn't exist back then. To support < IE9, you need to serve your font in Embedded Open Type (EOT). To do this you will need to write your own #font-face css tag instead of using the embed script from Google. Also you need to convert the original WOFF file to EOT.
You can convert your WOFF to EOT over here by first converting it to TTF and then to EOT:
http://convertfonts.com/
Then you can serve the EOT font like this:
#font-face {
font-family: 'MyFont';
src: url('myfont.eot');
}
Now it works in < IE9. However, modern browsers don't support EOT anymore, so now your fonts won't work in modern browsers. So you need to specify them both. The src property supports this by comma seperating the font urls and specefying the type:
src: url('myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype');
However, < IE9 doesn't understand this, it just graps the text between the first quote and the last quote, so it will actually get:
myfont.woff') format('woff'),
url('myfont.eot') format('embedded-opentype
as the URL to the font. We can fix this by first specifying a src with only one url which is the EOT format, then specifying a second src property that's meant for the modern browsers and < IE9 will not understand. Because < IE9 will not understand it it will ignore the tag so the EOT will still be working. The modern browsers will use the last specified font they support, so probably WOFF.
src: url('myfont.eot');
src: url('myfont.woff') format('woff');
So only because in the second src property you specify the format('woff'), < IE9 won't understand it (or actually it just can't find the font at the url myfont.woff') format('woff) and will keep using the first specified one (eot).
So now you got your Google Webfonts working for < IE9 and modern browsers!
For more information about different font type and browser support, read this perfect article by Alex Tatiyants:
http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/
While Yi Jiang's solution may work, I don't believe abandoning the Google Web Font API is the right answer here. We serve a local jQuery file when it's not properly loaded from the CDN, right?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script>
So why wouldn't we do the same for fonts, specifically for < IE9?
<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]-->
Here's my process when using custom fonts:
Download the font's ZIP folder from Google, and use Font Squirrel's
#font-face Generator to create the local web font.
Create a fonts.css file that calls the newly created, locally hosted font files (only linking to the file if < IE9, as shown above). NOTE: The #font-face Generator creates this file for you.
#font-face {
font-family: 'cardoitalic';
src: url('cardo-italic-webfont.eot');
src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('cardo-italic-webfont.woff') format('woff'),
url('cardo-italic-webfont.ttf') format('truetype'),
url('cardo-italic-webfont.svg#cardoitalic') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'cardobold';
src: url('cardo-bold-webfont.eot');
src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('cardo-bold-webfont.woff') format('woff'),
url('cardo-bold-webfont.ttf') format('truetype'),
url('cardo-bold-webfont.svg#cardobold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'cardoregular';
src: url('cardo-regular-webfont.eot');
src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('cardo-regular-webfont.woff') format('woff'),
url('cardo-regular-webfont.ttf') format('truetype'),
url('cardo-regular-webfont.svg#cardoregular') format('svg');
font-weight: normal;
font-style: normal;
}
Using IE conditional classes in your main stylesheet to avoide faux weights and styles, your font styles might look like this:
h1{
font-size:3.25em;
font-weight:normal;
font-style:italic;
font-family:'Cardo','cardoitalic',serif;
line-height:1.25em;
}
h2{
font-size:2.75em;
font-weight:700;
font-family:'Cardo','cardobold',serif;
line-height:1.25em;
}
strong
,b{
font-family:'Cardo','cardobold',serif;
font-weight:700,
}
.lt-ie9 h1{
font-style:normal;
}
.lt-ie9 h2{
font-weight:normal;
}
.lt-ie9 strong,
.lt-ie9 b{
font-weight:normal,
}
Sure, it's a little extra work, but haven't we come to expect this from IE? Besides, it becomes second-nature after awhile.
For what its worth, I couldn't get it working on IE7/8/9 and the multiple declaration option didn't make any difference.
The fix for me was as a result of the instructions on the Technical Considerations Page where it highlights...
For best display in IE, make the stylesheet 'link' tag the first
element in the HTML 'head' section.
Works across IE7/8/9 for me now.
I tried all the options from above and they didn't work.
Then I located the google font (Over the Rainbow) in my folder (new) and used IE conditional below and it worked perfect.
<!--[if IE]>
<style type="text/css">
#font-face {
font-family: "Over the Rainbow";
src: url("../new/over.ttf");
src: local("Over the Rainbow"), url("../new/over.ttf");
}
</style>
<![endif]-->
I hope it will help
You can try fontsforweb.com where fonts are working for all browsers, because they are provided in TTF, WOFF and EOT formats together with CSS code ready to be pasted on your page i.e.
#font-face{
font-family: "gothambold1";
src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot');
src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype");
}
.fontsforweb_fontid_5903 {
font-family: "gothambold1";
}
or you can download them zipped in a package with CSS file attached
then just add class to any element to apply that font i.e.
<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2>
See it working: http://jsfiddle.net/SD4MP/
It's all about trying all those answers, for me, nothing works except the next solution:
Google font suggested
#import 'https://fonts.googleapis.com/css?family=Assistant';
But, I'm using here foreign language fonts, and it didn't work on IE11 only. I found out this solution that worked:
#import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew';
Hope that save someone precious time
Try this type of link , it will run in also IE . hope this helps .
<link href='//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,300italic' rel='stylesheet' type='text/css'>
I had the same problem with you.
I found a solution using a Adobe Web Fonts code, work perfect in Internet Explorer, Chrome, Firefox and Safari.
More info in this page: http://html.adobe.com/edge/webfonts/
After my investigation, I came up to this solution:
//writing the below line into the top of my style.css file
#import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800&subset=hebrew');
MUST OBSERVE:
We must need to write the font-weight correctly of this font. For example: font-weight:900; will not work as we have not included 900 like 200,300,400,600,700,800 into the URL address while importing from Google with the above link. We can add or include 900 to the above URL, but that will work only if the above Google Font has this option while embedding.