2
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">

How do I call the above Google font family link in CSS file?

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Ewall Tester
  • 145
  • 8
  • 1
    All you need to do is Google it. You are supposed to decently (re)[search](https://www.google.ro/search?q=how+to+include+font+into+css&oq=how+to+include+font+into+css) any question before asking it, have an attempt at solving the problem, specify what you researched and why it didn't work in your case. Besides, Google Fonts also gives you the `@import` alternative to ``. – tao Sep 22 '17 at 10:09

5 Answers5

2

You can select font(s) from the list of Google Fonts. After selecting the fonts you want you can press the "(x) family selected" panel at the bottom of page. There's good examples like @import.

Imports must be always first thing on CSS file or it doesn't work.

enter image description here

1

Use @import to include the Google Fonts stylesheet from your CSS. Make sure to place the @import statement at the very top of your CSS file, before any other rules.

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');

#p{
  font-family: 'Montserrat', sans-serif;
}
<p id="p">Montserrat font.</p>
<p>Default font.</p>
MultiplyByZer0
  • 6,302
  • 3
  • 32
  • 48
Shadow Fiend
  • 1,829
  • 1
  • 9
  • 14
1

Use the @import in your css file.

Better to put the link in your html head, @import loads sequentially and is best avoided 

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
body, html{
  font-family: "Montserrat";
}
<h1>Font Face</h1>
bhansa
  • 7,282
  • 3
  • 30
  • 55
0

You have to use the @import:

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
artzz
  • 44
  • 7
0

Place this code at the top of your CSS:

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');

Here is a JSFiddle demo.

MultiplyByZer0
  • 6,302
  • 3
  • 32
  • 48
Codecraker
  • 327
  • 4
  • 19