How to Import Google Web Font in Css File?

<link rel="stylesheet" href="//" />

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

Download the font ttf/other format files, then simply add this CSS code example:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

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

@import url();

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

Your CSS file should look like:

@import url();

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

Along with the above answers, do also consider this site;

Main Advantage:

• allows you to self-host those google fonts for better response times

Other Advantages :

• choose your font(s)
• choose your character set
• choose your font styles/weight
• choose your target browsers ( modern preferred )
• and u get the CSS snippets ( to add to your css stylesheet ) plus a zip of the font files to include in your project folder ( say css_fonts )

In file 'your_css_theme.css' add

/* open-sans-regular - latin - modern browsers  */
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: local(''),
        url('css_fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('css_fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

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

1. Just go to
2. Add font by clicking +
3. Go to selected font > Embed > @IMPORT > copy url and paste in your .css file above body tag.
4. It's done.

Use the tag @import

@import url(');

You can also use @font-face to link to the URLs.

Does the CMS support iframes? You might be able to throw an iframe into the top of your content, too. This would probably be slower - better to include it in your CSS.

<link href="(any font of your 
choice)" rel="stylesheet" type="text/css">

To choose the font you can visit the link :

Write the font name of your choice from the website excluding the brackets.

For example you chose Lobster as a font of your choice then,

<link href="" rel="stylesheet" 
type="text/css">

Then you can use this normally as a font-family in your whole HTML/CSS file.

For example

<h2 style="Lobster">Please Like This Answer</h2>

Jus go through the link

To import it to stylesheet use

@import url(');

Googles side changed a bit since 2015.. I had some difficulties finding it so figured to include the new method:

1. Scroll down on the desired font page
2. click the small plus icon on the side of the font name
3. the embed link and other options will appear on the "selected family" dialogue on the right of the web page.

We can easily do that in css3. We have to simply use @import statement. The following video easily describes the way how to do that. so go ahead and watch it out.

1. Go to and select your desired font family (you can search by name):

2. Select the desired variations (weight, italics, etc.):

3. Click on View selected families button on the top right corner:

4. Select @import on the right panel to get the code: