How to import Google Web Font in CSS file?

Question

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.

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

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(https://fonts.googleapis.com/css?family=Open+Sans);

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

Your CSS file should look like:

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

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

1. Just go to https://fonts.google.com/
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.

Along with the above answers, do also consider this site; https://google-webfonts-helper.herokuapp.com/fonts

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;  
 }