I am using Google Web Fonts inside my CSS stylesheet like below
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
but when my website goes from secured page, I am getting "only secured content is being displayed". I used Google Chrome Resource Inspector and it pointed above was the issue
How can I add a secured link to the Google Web font in my CSS file
Thanks
You don't need #font-face to use a Google Font.
Just add this in your HTML code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then add the font name in your CSS. Example:
body{font-family: 'Open Sans', sans-serif;}
Bit old but it came up on a related search so it may be useful to someone.
I personally put the #font-face declaration in my stylesheets rather than requesting it in the head. Just remove the 'http:' like below, should solve the problem.
url(//themes.googleusercontent.com/static/fonts/opensans/...) format('woff');
Why not use #import statement?
At the top of your css file:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
This is a general issue, and it seems like there is a solution.
Problem is that web fonts shows choppy in chrome. The solution should be to move the .svg call before the .woff call. Explained here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Problem is, that I'm using google web fonts, and importing the font like this:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
And I dont know, and cannot find out, how to import it with the #font-face css tag instead of the above. I've tried, but got stuck since google only offers the font in ttf and not svg or woff.
Hope you can help.
You'll have to host the fonts yourself if you want to apply this fix.
Your Google Fonts link is a request for a stylesheet, that gets dynamically built based on the parameters you supply - and on browser detection. For your example link:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
If you actually make the request yourself using curl:
$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic
this is what gets sent back:
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 400;
src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 700;
src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 400;
src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 700;
src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
The simplest thing to do is to go back to Google Web Fonts, download the font in question by going here and clicking the download arrow.
Then you can use the suggested fix from here, referencing the font files you downloaded:
#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’);
}
Did you do a proper reset of all styles?
Your inconsistent rendering experience can be caused by the browser defaults.
A reset.css sets all Elements back to default-values, this way cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the Most popular is meyerweb reset css.
Another way to reduce inconsistency is to use normalize.css.
The difference between the two approaches in short is, reset.css just resets all browser specific styles while normalize.css has a wider scope by creating cross-browser defaults.
Differences between both are explained here by the developer of normalize.css.
If all those links do not help make sure that you set the font-weight always right an import all necessary font-weights.
You can read about font weights here: http://css-tricks.com/watch-your-font-weight/
You should also apply this technique when you use normalize.ccs because it doesn't reset the font-weight as rest.css does.
Add this to your stylesheet for each element.
opacity: .99;
For example -
p, li {
opacity: .99;
}
I have no idea why this works but it did.
I have a really bad conflict with using google-webfonts.
OK here is the code:
This is in head:
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
And this is in the css-file:
body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }
"Oswald" is a font-family of 3 fonts:
book (300)
normal (400)
bold (700)
As you can see.. i've loaded only the bold-face (700). (you can see it in the query)
And it works till here BUT …
THE PROBLEM IS:
I have a desktop-version of the 3 fonts (300,400,700) installed on my computer and as long as these fonts are activated … the browser shows me the wrong font-weight (400) in my html-document.
OK. The problem is that in my css 'Oswald' takes the localfont and not the webfont. But the local font "Oswald" is "Oswald normal". I don't know why google is calling it 'Oswald' instead of 'Oswald Bold'. So I don't know how to fix this problem.
I don't want the css to point at the local-font .. i want it to show always the webfont … because of the right font-weight!
Do you have any ideas?
Please?
Possible to Rename the webfont-call?
You can edit the CSS #font-face rule to fit your needs instead of just loading the automatically-generated one from Google. Basically the issue is that their rule prefers local versions (src: local('Oswald Bold'), local('Oswald-Bold'), ...). The corrected verison would look like:
#font-face {
font-family: 'WebOswald';
font-style: normal;
font-weight: 700;
src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Just add that to your CSS manually, and use font-family: 'WebOswald'; when you want to use Google's Web version of the font.
I hope that helped!
I'm sure I'm missing something really straight forward. Been using a single custom font with normal font face:
#font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
All works fine when I use it but if I want to add another custom font what do I do? I've tried separating by comma the next one or adding a whole other font face but can't get the second font working.
You simply add another #font-face rule:
#font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}
#font-face {
font-family: CustomFont2;
src: url('CustomFont2.ttf');
}
If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.
If you are having a problem with the font working I have also had this in the past and the issue I found was down to the font-family: name. This had to match what font name was actually given.
The easiest way I found to find this out was to install the font and see what display name is given.
For example, I was using Gill Sans on one project, but the actual font was called Gill Sans MT. Spacing and capitlisation was also important to get right.
Hope that helps.
I use this method in my css file
#font-face {
font-family: FontName1;
src: url("fontname1.eot"); /* IE */
src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
#font-face {
font-family: FontName2;
src: url("fontname1.eot"); /* IE */
src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
#font-face {
font-family: FontName3;
src: url("fontname1.eot"); /* IE */
src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}
Check out fontsquirrel. They have a web font generator, which will also spit out a suitable stylesheet for your font (look for "#font-face kit"). This stylesheet can be included in your own, or you can use it as a template.
You can use multiple font faces quite easily. Below is an example of how I used it in the past:
<!--[if (IE)]><!-->
<style type="text/css" media="screen">
#font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.eot);
}
#font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.eot);
}
</style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
<style type="text/css" media="screen">
#font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.ttf);
}
#font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.ttf);
}
</style>
<!--<![endif]-->
It is worth noting that fonts can be funny across different Browsers. Font face on earlier browsers works, but you need to use eot files instead of ttf.
That is why I include my fonts in the head of the html file as I can then use conditional IE tags to use eot or ttf files accordingly.
If you need to convert ttf to eot for this purpose there is a brilliant website you can do this for free online, which can be found at http://ttf2eot.sebastiankippe.com/.
Hope that helps.
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.