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 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 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 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 3

Create a file e.g- `google-fonts.css`

@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC | Londrina+Outline);
.less
@import (inline) "google-fonts.css";

and there you have your google fonts in your stylsheet

html5 - how to use google font in less css ? any other solution to emb...

css html5 less 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
Rectangle 27 33

<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
Rectangle 27 33

<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
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 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 15

Add the Below code in your CSS File to import Google Web Fonts.

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

Replace the Open+Sans parameter value with your Font name.

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

body{
   font-family: 'Open Sans',serif;
}

There are 2 more ways to import Google Web Fonts in your website. Hope it helps.

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

css css3 fonts google-webfonts
Rectangle 27 15

Add the Below code in your CSS File to import Google Web Fonts.

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

Replace the Open+Sans parameter value with your Font name.

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

body{
   font-family: 'Open Sans',serif;
}

There are 2 more ways to import Google Web Fonts in your website. Hope it helps.

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

css css3 fonts google-webfonts
Rectangle 27 14

Add the Below code in your CSS File to import Google Web Fonts.

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

Replace the Open+Sans parameter value with your Font name.

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

body{
   font-family: 'Open Sans',serif;
}

There are 2 more ways to import Google Web Fonts in your website. Hope it helps.

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

css css3 fonts google-webfonts
Rectangle 27 2

I would just use an @import command at the top of my CSS file, then you can simply add a new font by adding a pipeline to the end of the font and type the name of any other fonts you want. To use them, simply use the CSS font-family style command:

@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC | Londrina+Outline);
span {
  font-family: 'Playfair Display SC', serif;
}
<span> This is an example text. </span>

html5 - how to use google font in less css ? any other solution to emb...

css html5 less google-font-api
Rectangle 27 9

If you are using Google fonts I would suggest the following.

If you want the fonts to run from your localhost or server you need to download the files.

Instead of downloading the ttf packages in the download links, use the live link they provide, for example:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

Paste the URL in your browser and you should get a font-face declaration similar to the first answer.

Open the URLs provided, download and rename the files.

Stick the updated font-face declarations with relative paths to the woff files in your CSS, and you are done.

css - How to add multiple font files for the same font? - Stack Overfl...

css fonts css3 font-face
Rectangle 27 30

The following code should work:

@font-face {
    font-family:"AgencyFBRegular";
    src: url("agencyr.eot") /* EOT file for IE */
}
@font-face {
    font-family:"AgencyFBRegular";
    src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}

h3 {
    font-family:'Agency FB', sans-serif;
    font-size: 26px;
    font-weight:normal;
    text-align: left;
    line-height: 100%;
    border-bottom: 1px solid #484848;
    padding-bottom: 5px;
    margin-bottom:7px;
}

css - How do I embed a custom website font in ttf format for all brows...

css fonts font-face true-type-fonts