Rectangle 27 6

Using Open Sans as an example.

Make requests with different user agents to see the different fonts: .eot, .woff, woff2, .ttf, .svg

IE8
Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB7.4; InfoPath.2; SV1; .NET CLR 3.3.69573; WOW64; en-US)

IE7
Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0; en-US)

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
}
Firefox 36.0
Mozilla/5.0 (Windows NT 6.3; rv:36.0) Gecko/20100101 Firefox/36.0

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Safari 6.0
Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25

Internet Explorer 11.0
Mozilla/5.0 (compatible, MSIE 11, Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Internet Explorer 10.0
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)

Internet Explorer 9.0
Mozilla/5.0 (Windows; U; MSIE 9.0; Windows NT 9.0; en-US))

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
Safari 5.0.5
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1

Safari 3.1
Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10_5_2; en-gb) AppleWebKit/526+ (KHTML, like Gecko) Version/3.1 iPhone

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}

I found another .ttf when trying other user agents. Not sure what the difference is.

Safari 4.1
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-en) AppleWebKit/533.16 (KHTML, like Gecko) Version/4.1 Safari/533.16

Firefox 5.0
Mozilla/5.0 (X11; Linux) Gecko Firefox/5.0

Firefox 3.5.9
Mozilla/5.0 (Windows; U; Windows NT 6.1; et; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9

Safari 3.1.1
Mozilla/5.0 (Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0_1 like Mac OS X; fr-fr) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
Safari 4.0.4
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10gin_lib.cc

Safari 3.0
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

Safari 3.0
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/l/font?kit=cJZKeOuBrn4kERxqtaUH3Zbd9NUM7myrQQz30yPaGQ4#OpenSans) format('svg');
}

Which font formats are supported in which browsers?

css - Google Font API uses browser detection. How to get all font vari...

css css3 fonts font-face google-font-api
Rectangle 27 6

Try downloading atleast these variations of the webfonts : eot , woff , ttf , svg and then you can use them like this for maximum cross browser benefits :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Yes, that's what I came about too. My aim was to have a local fallback for the font after all that. Then I realized that using Google font as it is, is actually fine for now (and fast and simple).. But thanx ;)

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

css - Google Font API uses browser detection. How to get all font vari...

css css3 fonts font-face google-font-api
Rectangle 27 5

It generates the CSS for all browsers and lets you download the files for self-hosting Google font files. Works great!

This is a wonderful tool! If you have been fooling around with the source of google web fonts trying to download the correct woff, eof and svg files, look no further. I've needed this tool for years.

css - Google Font API uses browser detection. How to get all font vari...

css css3 fonts font-face google-font-api
Rectangle 27 7

If it is feasible for you to try to include your google font link scripts in your header instead of importing it in your css like this :

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

and try to see if that works,

Anyway if your header is not accessible or you insist on importing it in your css make sure that the @import lines of code to be the very first line file like this:

@import url(http://fonts.googleapis.com/css?family=Six+Caps);
@import url(http://fonts.googleapis.com/css?family=Marcellus+SC);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}


@import url(http://fonts.googleapis.com/css?family=Six+Caps);
@import url(http://fonts.googleapis.com/css?family=Marcellus+SC);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

I loaded the font on first line and it worked ,thanks a lot.

css - Google fonts not loading on Mobile - Stack Overflow

css mobile google-font-api
Rectangle 27 257

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Obviously, "Open Sans" is the font that is imported. But you can replace it with yours. If it is a single word font, just include the font name after the family=... if it is two words, do as I did and add a + sign between each word.

Place @import at the very first line of the CSS file.

In the Google Webfont Library, when you decide upon which fonts you want to use, it gives you a box with three tabs. Each tab is an injection method, HTML, CSS or JavaScript. The @import tab should give you the code you need for css files. See image:

you can use google.com/fonts type your font and click use

I believe it's in the spec. Try it out: jsbin.com/foran/1/edit

You shoud avoid the use of @import because it will defer the loading of the included resource until the file is fetched. See the detailed answer here: stackoverflow.com/a/12380004/925560

css3 - How to import Google Web Font in CSS file? - Stack Overflow

css css3 fonts google-webfonts
Rectangle 27 254

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Obviously, "Open Sans" is the font that is imported. But you can replace it with yours. If it is a single word font, just include the font name after the family=... if it is two words, do as I did and add a + sign between each word.

Place @import at the very first line of the CSS file.

In the Google Webfont Library, when you decide upon which fonts you want to use, it gives you a box with three tabs. Each tab is an injection method, HTML, CSS or JavaScript. The @import tab should give you the code you need for css files. See image:

you can use google.com/fonts type your font and click use

I believe it's in the spec. Try it out: jsbin.com/foran/1/edit

You shoud avoid the use of @import because it will defer the loading of the included resource until the file is fetched. See the detailed answer here: stackoverflow.com/a/12380004/925560

css3 - How to import Google Web Font in CSS file? - Stack Overflow

css css3 fonts google-webfonts
Rectangle 27 247

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Obviously, "Open Sans" is the font that is imported. But you can replace it with yours. If it is a single word font, just include the font name after the family=... if it is two words, do as I did and add a + sign between each word.

Place @import at the very first line of the CSS file.

In the Google Webfont Library, when you decide upon which fonts you want to use, it gives you a box with three tabs. Each tab is an injection method, HTML, CSS or JavaScript. The @import tab should give you the code you need for css files. See image:

you can use google.com/fonts type your font and click use

I believe it's in the spec. Try it out: jsbin.com/foran/1/edit

You shoud avoid the use of @import because it will defer the loading of the included resource until the file is fetched. See the detailed answer here: stackoverflow.com/a/12380004/925560

css3 - How to import Google Web Font in CSS file? - Stack Overflow

css css3 fonts google-webfonts
Rectangle 27 2

@import url(https://fonts.googleapis.com/css?family=Raleway);
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<head>
<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="test.css">
            <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
            <script>
            </script>
            <title>User Test</title>
        </head>
        <body>
            <div id="wrapper">
                <div id="page-first-open">
                    <p>Hello, and welcome to this page. . .<br>
                    If you don't mind me asking, <br>
                    What is your name (or what you'd like to be called)?</p>
                </div>
            </div>
        </body>
    </html>

html - Google Font Not Working With CSS? - Stack Overflow

html css google-font-api
Rectangle 27 14

Try using Mozilla's CDN instead of Google's; the latter seems to be buggy with regards to the Fira Sans font.

Replace your googleapis.com link with this one and it should work:

<link href='https://code.cdn.mozilla.net/fonts/fira.css' rel='stylesheet' type='text/css' />

You might have to still use Google's CDN for Open Sans, in addition to Mozilla's for Fira Sans, but Open Sans doesn't seem to have this issue as far as I am aware of.

Works fine when rendered from Moz

Is there a way of limiting which weights you bring in?

I have been using Fira sans for months and I just recently found out that 1 person fails to see the text. I wonder how many visitors in the meantime I have lost because of this... Anyway, how do I test it if it works now?

html - Strange Issue while Google Font Rendering - Stack Overflow

html css fonts google-font-api
Rectangle 27 2

Include the @import directive at the top of the file.

@import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
	border: 1px solid black;
	width: 1000px;
	height: 500px;
	text-align: center;
	margin: auto;
	position: relative;
	top: 50px;
	
}



#page-first-open p {
	font-size: ;
	font-family: 'Raleway', sans-serif;
	
}
<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="test.css">
			<script>
			</script>
			<title>User Test</title>
		</head>
		<body>
			<div id="wrapper">
				<div id="page-first-open">
					<p>Hello, and welcome to this page. . .<br>
					If you don't mind me asking, <br>
					What is your name (or what you'd like to be called)?</p>
				</div>
			</div>
		</body>
	</html>

html - Google Font Not Working With CSS? - Stack Overflow

html css google-font-api
Rectangle 27 10

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.

This is a good one. I also thought of this, but the problem is that your code only loads the .woff-file. The other thing is that, when i use the "&text=" parameter on the query-string i'm loading the whole font and not only the characters i need. So I need a trick or a hack that it is not taking the local-font.

@JohnDoeSmith You mean you want to be able to use the &text= parameter but still ignore local fonts?

yes. that's it. but i figuered out a solution that will work for me. All in all your answer is right. so you'll get the thx ;)

This looks like a good answer, but it's not because it has some rather drastic side-effects. The CSS google generates depends on which browser is used (or more accurately, the user agent string sent) so this way you will mysteriously lose support for browsers...

As of 2014, it appears every modern browser supports WOFF. caniuse.com/#search=woff Old IE (IE8-) and Opera Mini are the only ones that don't support it. Unless you need to support IE8- or Opera Mini, this solution is entirely acceptable.

css - Google Webfont conflict with local font - Stack Overflow

css fonts font-face webfonts google-webfonts
Rectangle 27 87

You need to add the following types to an .htaccess/IIS:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/font-woff .woff
AddType application/x-font-woff .woff

(Thanks to @renadeen in comments below for pointing this out.)

I added these 4 lines at the end of my file, but I still get the error. How long does it take to make this working?

I'm not using a web server - how can you fix this without one?

application/x-font-woff
application/font-woff

css - Google warning: Resource interpreted as Font but transferred wit...

css font-face
Rectangle 27 87

You need to add the following types to an .htaccess/IIS:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/font-woff .woff
AddType application/x-font-woff .woff

(Thanks to @renadeen in comments below for pointing this out.)

I added these 4 lines at the end of my file, but I still get the error. How long does it take to make this working?

I'm not using a web server - how can you fix this without one?

application/x-font-woff
application/font-woff

css - Google warning: Resource interpreted as Font but transferred wit...

css font-face
Rectangle 27 46

Thanks for the above answer @97ldave, you can add these types to your IIS webServer configuration section if you'd rather not add them directly to your MIME types in your IIS setup. The following shows an example of adding just the .woff type that was missing from our configuration. This fixed the issues with the fonts not appearing in the latest version of Safari (6.0.3) on my iMac.

<system.webServer>
<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>

I guess that the comment on the currently accepted answer regarding removing the x- from the mime type is applicable to this answer as well.

css - Google warning: Resource interpreted as Font but transferred wit...

css font-face
Rectangle 27 46

Thanks for the above answer @97ldave, you can add these types to your IIS webServer configuration section if you'd rather not add them directly to your MIME types in your IIS setup. The following shows an example of adding just the .woff type that was missing from our configuration. This fixed the issues with the fonts not appearing in the latest version of Safari (6.0.3) on my iMac.

<system.webServer>
<staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>

I guess that the comment on the currently accepted answer regarding removing the x- from the mime type is applicable to this answer as well.

css - Google warning: Resource interpreted as Font but transferred wit...

css font-face
Rectangle 27 26

font/ttf                         ttf;
font/otf                         otf;
application/x-font-woff          woff;
application/vnd.ms-fontobject          eot;
service nginx restart

No problem mate :). | If you get the warning with font-awesome(fortawesome.github.io/Font-Awesome), just put this in your Nginx Mime Type File: application/x-font-woff .woff

application/font-woff

css - Google warning: Resource interpreted as Font but transferred wit...

css font-face
Rectangle 27 26

font/ttf                         ttf;
font/otf                         otf;
application/x-font-woff          woff;
application/vnd.ms-fontobject          eot;
service nginx restart

No problem mate :). | If you get the warning with font-awesome(fortawesome.github.io/Font-Awesome), just put this in your Nginx Mime Type File: application/x-font-woff .woff

application/font-woff

css - Google warning: Resource interpreted as Font but transferred wit...

css font-face
Rectangle 27 2

How about making an IE specific stylesheet and in it declare something like

* { font-weight: regular; }

It's usually not advised to use the * selector, so try to narrow it down to wherever the font is used. For example, perhaps it's just paragraph text: p { font-weight: regular; }, or just links: a {...;} etc. etc.

Thanks! I think I'll go with an IE specific stylesheet and slab a different font in it. Something like that. :)

css - Google Fonts: How can I prevent Internet Explorer from rendering...

css internet-explorer google-webfonts
Rectangle 27 2

If you use an @import rule in CSS, browser can't dowload the referred script in parallel, simply because the carrying script has to be parsed before doing any downloads!

style1.css
<link>
style2.css
@import

To enable parallel downloading, use the <link> html tag instead.

Alternatively, you can inline CSS without using @import rule at all; stylesheet preprocessors can help you with that (e.g. Sass). You can try Node.js task runners (gulp, grunt) to automate such tasks.

Again - that question/answer was 3 years ago. Still an issue nowadays?

@chris, I've updated the answer, I hope it shows that this is still relevant :).

html - Google Fonts in or in CSS with @import? - Stack Overflow

html css fonts google-font-api
Rectangle 27 34

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Better to not use @import. Just use the link element, as shown above, in your layout's head.

I had internet explorer problem with @import. Sometimes it just don't read it.

He specifically said he can't use the <link> tag in his header.

+1 for using 'link', as it will not block parallel loading of other external files. 'import' will block parallel loading of other external files.

css3 - How to import Google Web Font in CSS file? - Stack Overflow

css css3 fonts google-webfonts