How to import Google Web Font in CSS file?

Question

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

score 480 · Accepted Answer · edited Aug 22 '19 at 13:47

480

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.

edited Aug 22 '19 at 13:47

MultiplyByZer0

6,302
3
32
48

answered Feb 03 '13 at 20:00

ModernDesigner

7,539
10
34
41

@Ronny how come it needs to come before all other style rules? – iamkeir May 15 '14 at 09:19
47

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: http://stackoverflow.com/a/12380004/925560 – Renato Carvalho Jun 09 '14 at 10:41
5

Moving the @import line to the top resolved my life! Thank you! – joalcego Mar 30 '16 at 14:34
3

Why does google say this? Google Insides claims to not do @import. https://developers.google.com/speed/pagespeed/insights/? – Melroy van den Berg Nov 02 '16 at 20:42
7

This is an outdated answer. `@import` loads sequentially and is best avoided: https://varvy.com/pagespeed/avoid-css-import.html The preferred (and default) way to load Google fonts these days is using ``. – Chuck Le Butt Feb 24 '17 at 12:51
+100 for "Place @import at the very first line of the CSS file." – jon Feb 16 '18 at 18:30
3

You will regret this when you come to SEO and start to optimize your page speed with Google PageSpeed insights. Use `` and optimize it's delivery instead. – Accountant م Aug 22 '18 at 18:38

score 102 · Answer 2 · edited Sep 03 '21 at 10:44

102

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

edited Sep 03 '21 at 10:44

djvg

11,722
5
72
103

answered Jul 01 '15 at 21:52

Burk

2,969
1
23
24

25

Can you expand on why "Better to don't use"? I searched for this question because I would like to know which method is considered best. – Adam Hollow Aug 13 '15 at 02:52
3

I had internet explorer problem with @import. Sometimes it just don't read it. – Burk Aug 14 '15 at 12:21
19

He specifically said he can't use the tag in his header. – Nathan Nov 17 '15 at 02:25
1

I had problems with @import url and ended up with this solution. Thank you – Fabian Bigler Nov 19 '15 at 10:06
31

+1 for using 'link', as it will not block parallel loading of other external files. 'import' will block parallel loading of other external files. – James John McGuire 'Jahmic' Feb 04 '16 at 07:01
1

@AdamHollow `@import` loads sequentially and is best avoided: https://varvy.com/pagespeed/avoid-css-import.html – Chuck Le Butt Feb 24 '17 at 12:50
4

By using @import you are able to make the font part of the CSS styling instead of the HTML markup, which semantically feels more correct, and you can swap out the fonts on your site through CSS. But as Chuck commented, it seems you take a slight speed hit for it. Maybe clock the load times, then decide, case by case. Note that for SVGs [@import is the only way that works](https://stackoverflow.com/a/36254302/2454914) AFAIK. – Mentalist Mar 29 '19 at 00:19

score 72 · Answer 3 · answered Apr 23 '17 at 15:01

72

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

answered Apr 23 '17 at 15:01

Fidel

862
7
13

8

I like this answer because unlike all import & link answers, this does not let Google track your users ip address. Which in Europe would be a violation of GDPR – BHANG Feb 04 '22 at 17:09

score 47 · Answer 4 · edited Dec 22 '18 at 11:27

47

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

edited Dec 22 '18 at 11:27

Bhargav Rao

50,140
28
121
140

answered Dec 13 '15 at 11:45

Shubham Kumar

1,221
14
5

MarcoZen · Answer 5 · 2021-07-29T14:48:06.843

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

This also allows you to load `font-weight: 400` first and then load the rest of the font by using the same code with no arguments. This allows for quicker display and, if you don't end up needing the whole font, smaller CSS files. — moto, Dec 01 '18 at 20:42
i would not recommend using the `local` parts, because ppl rarely have the desired font installed, and even then most often have a different version of it came from somewhere else. It is also harder to develop and debug, especially if you installed the font and may miss that for some reason the font do not load for the users, because of some server failure or other bug. — venimus, Dec 03 '20 at 12:11

score 21 · Answer 6 · answered Oct 11 '16 at 07:38

21

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.

answered Oct 11 '16 at 07:38

karunesh

315
3
7

score 12 · Answer 7 · edited Feb 03 '13 at 20:23

12

Use the tag @import

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

edited Feb 03 '13 at 20:23

StarsSky

6,721
6
38
63

answered Feb 03 '13 at 19:59

jmz7v

351
2
10

score 4 · Answer 8 · answered Feb 03 '13 at 20:04

4

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.

answered Feb 03 '13 at 20:04

Eric Keyte

633
5
14

iframes result in a totally different space for everything. I don't think this would work. – OsamaBinLogin Sep 01 '20 at 20:01

rohanvtk · Answer 9 · 2018-07-07T10:32:47.730

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

score 3 · Answer 10 · answered Jun 12 '17 at 06:46

3

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');

answered Jun 12 '17 at 06:46

subindas pm

2,668
25
18

score 2 · Answer 11 · answered May 12 '21 at 12:28

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.

Mahozad · Answer 12 · 2023-08-12T18:17:44.480

1

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:

edited Aug 12 '23 at 18:17

answered May 15 '22 at 10:13

Mahozad

18,032
13
118
133

score 0 · Answer 13 · edited Dec 22 '17 at 15:22

0

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

edited Dec 22 '17 at 15:22

sohnryang

725
2
13
27

answered May 26 '16 at 09:20

Gyan

37
4

Scylax · Answer 14 · 2023-05-14T15:49:01.523

Everyone here have given an answer using link tag and @import. That works well if you have an internet connection while working on your project(html,css). But if you want to use your font 'offline' ie by downloading ,follow these steps-

Download zip file of desired font from google fonts website using DOWNLOAD ALL option.
Extract zip file and you will get your .ttf files.
in your styles.css use-
@font-face{ font-family: ....... ; src:url(........); }

**Inside font-family write name of the font you want to use from extracted .ttf file. Name can found by opening that .ttf file.

Inside url mention local path of your .ttf file.**

Now if you want to use your font. Simply use font-family property and inside it write name of font used in above step(that you got using opening .ttf file) If you want to add this font to whole webpage use font-family property within universal selector(*).

How to import Google Web Font in CSS file?

14 Answers14

Linked

Related