How to import Google Web Font in CSS file?

Css Problem Overview

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from within the CSS file?

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

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

Solution 3 - Css

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

Solution 4 - Css

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

Solution 5 - Css

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

Solution 6 - Css

Just go to https://fonts.google.com/
Add font by clicking +
Go to selected font > Embed > @IMPORT > copy url and paste in your .css file above body tag.
It's done.

Solution 7 - Css

Use the tag @import

@import url('http://fonts.googleapis.com/css?family=Kavoon');

Solution 8 - Css

You can also use @font-face to link to the URLs. http://www.css3.info/preview/web-fonts-with-font-face/

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.

Solution 9 - Css

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

To choose the font you can visit the link : https://fonts.google.com

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="https://fonts.googleapis.com/css?family=Lobster" 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>

Solution 10 - Css

Jus go through the link

https://developers.google.com/fonts/docs/getting_started

To import it to stylesheet use

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

Solution 11 - Css

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

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

Solution 12 - Css

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.

https://www.youtube.com/watch?v=wlPr6EF6GAo

Solution 13 - Css

Go to https://fonts.google.com/ and select your desired font family (you can search by name):

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

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

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

Content Type	Original Author	Original Content on Stackoverflow
Question	David	View Question on Stackoverflow
Solution 1 - Css	ModernDesigner	View Answer on Stackoverflow
Solution 2 - Css	Burk	View Answer on Stackoverflow
Solution 3 - Css	Fidel	View Answer on Stackoverflow
Solution 4 - Css	Shubham Kumar	View Answer on Stackoverflow
Solution 5 - Css	MarcoZen	View Answer on Stackoverflow
Solution 6 - Css	karunesh	View Answer on Stackoverflow
Solution 7 - Css	jmz7v	View Answer on Stackoverflow
Solution 8 - Css	Eric Keyte	View Answer on Stackoverflow
Solution 9 - Css	rohanvtk	View Answer on Stackoverflow
Solution 10 - Css	subindas pm	View Answer on Stackoverflow
Solution 11 - Css	Leon	View Answer on Stackoverflow
Solution 12 - Css	Gyan	View Answer on Stackoverflow
Solution 13 - Css	Mahozad	View Answer on Stackoverflow