How to Import Google Web Font in CSS File

How to import Google Web Font in CSS file?

Use the @import method:

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

Obviously, "Open Sans" (Open+Sans) is the font that is imported. So replace it with yours. If the font's name has multiple words, URL-encode it by adding a + sign between each word, as I did.

Make sure to place the @import at the very top of your CSS, before any rules.

Google Fonts can automatically generate the @import directive for you. Once you have chosen a font, click the (+) icon next to it. In bottom-left corner, a container titled "1 Family Selected" will appear. Click it, and it will expand. Use the "Customize" tab to select options, and then switch back to "Embed" and click "@import" under "Embed Font". Copy the CSS between the <style> tags into your stylesheet.

Including Google Fonts link or import?

For 90%+ of the cases you likely want the <link> tag. As a rule of thumb, you want to avoid @import rules because they defer the loading of the included resource until the file is fetched.. and if you have a build process which "flattens" the @import's, then you create another problem with web fonts: dynamic providers like Google WebFonts serve platform-specific versions of the fonts, so if you simply inline the content, then you'll end up with broken fonts on some platforms.

Now, why would you use the web font loader? If you need complete control over how the fonts are loaded. Most browsers will defer painting the content to the screen until all of the CSS is downloaded and applied - this avoids the "flash of unstyled content" problem. The downside is.. you may have an extra pause and delay until the content is visible. With the JS loader, you can define how and when the fonts become visible.. for example, you can even fade them in after the original content is painted on the screen.

Once again, the 90% case is the <link> tag: use a good CDN and the fonts will come down quick and even more likely, be served out of the cache.

For more info, and an in-depth look at Google Web Fonts, check out this GDL video

How to import Google Fonts to HTML/CSS?

add this before </head>

<style>
body {
  font-family: "Roboto", sans-serif;
}
</style>

Google Fonts in head or in CSS with @import?

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!

Example #1

style1.css and style2.css are loaded using the <link> tag:

Example #1

Example #2

style1.css is loaded using the <link> tag and style2.css is loaded using @import rule:

Example #2

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.

Import Google Font using real url to font file

You need to consider the latin file not the latin-ext but I recommend that you copy the whole Google file to make sure it works fine because the unicode-range is important

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page.
The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. ^ref

@font-face {
  font-family: 'Titan One';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/titanone/v7/mFTzWbsGxbbS_J5cQcjClDgm-khykw.woff2);
}

h1 {
  font-family: 'Titan One';
}

<h1>The @font-face Rule</h1>

I want to import and use Google Web Fonts in the style component

Download the Google font file(WOFF or TTF) from here and use the below CSS

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Downloading a Google font and setting up an offline site that uses it

Just go to Google Fonts - http://www.google.com/fonts/ , add the font you like to your collection, and press the download button. And then just use the @fontface to connect this font to your web page.
Btw, if you open the link you are using, you'll see an example of using @fontface

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

For an example

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

Just change the url address to the local link on the font file, you've downloaded.

You can do it even easier.

Just download the file, you've linked:

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

Name it opensans.css or so.

Then just change the links in url() to your path to font files.

And then replace your example string with:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Import google font but specific font weight is not included

you may try this link :

<link href='https://fonts.googleapis.com/css?family=Rubik:500,500i' rel='stylesheet'>

By the way when you open the link https://fonts.googleapis.com/css?family=Rubik:500,500i in your browser you can see the styles that are included.

And when you don't specify anything you will only get the regular one (font-weight:400)

All the possibilties for this font are : 300,300i,400,400i,500,500i,700,700i,900,900i

Is it possible to use a google web font in a css file by it's name modified(italic, font-weight)?

Yes and no,

Your example is:

font-family: 'Montserrat', Light Italic;

The Google font weight 'light' is weight 300 (for italic or normal font-style). And also in CSS font-weight: normal is equivelent to font-weight: 400, and bold is equivelent to 700.

So that allows us to get close using the font shorthand syntax which allows a number of font properties such as the font-style, font-weight and font-family you want to be declared in one go.

Unfortunately, the font-size value is a requirement of the font shorthand syntax so you'll need that in there too:

font: italic normal 1rem 'monserrat'

font: italic 300 1rem 'monserrat'

The second one there gets you the equivalent of the 'Light' font-weight but 'Light' isn't a valid CSS font-weight - 'normal' and 'bold' are along with a few relative terms as well such as 'lighter' or 'bolder'.

You could also use initial or inherit as possible values for the font-size.

You can use that style inline.

<p style="font: italic 300 1rem 'monserrat'">...</p>

Not quite what you were after? But as close as you will get :)

More about font shorthand:

https://css-tricks.com/snippets/css/font-shorthand/

https://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/

And an additional point - each of the styles you include in your import rule add to the load time and bulk of your page, it's probably a good idea to identify which you will use and only include those. For example, if you don't need a 700 weight italic font, don't include the 700i in your import

How to Import Google Web Font in CSS File