Georgia
Georgia

Reputation: 21

Can't get google font to work

I have looked through other peoples answers to the question and followed the instructions on google and just cannot get it to work. Here is what I have used.

@import url('https://fonts.googleapis.com/css?family=Archivo+Black|Playfair+Display:400,700i,900');

The worst part is that Playfiar Display is working fine, Archivo is not at all.

For reference, georgialee.design is the URL. (works on every browser except for internet explorer)

Thank you so much! I'm sure it'll be some silly mistake :)

Upvotes: 1

Views: 1334

Answers (2)

Hooman Bahreini
Hooman Bahreini

Reputation: 15549

Copy this code into the < head > of your HTML document:

<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">

In your CSS file, use the following rule to set the font-family:

// if you only want to change h1 fonts, use this selector
h1 { 
    font-family: 'Archivo Black', sans-serif;
}

For example:

<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
 <style>
  // default font for everything in the body
  body {
    font-family: 'Playfair Display', serif;
  }

  // make all h1 Archivo 
  // note: if you want h2, h3 etc to be archivo as well you need to add the respective selector
  body h1 {
    font-family: 'Archivo Black', sans-serif;
  }
 </style>
</head>
 <body>
  <div>rest of your page...</div>
 </body>
</html>

see more examples here

see here to find out more about css selectors

Upvotes: 1

MD.ALIMUL Alrazy
MD.ALIMUL Alrazy

Reputation: 330

In header section you import it

<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">

or

<style>
    @import url('https://fonts.googleapis.com/css?family=Archivo+Black');
</style>

In style.css file

body{
    font-family: 'Archivo Black', sans-serif;
}

Upvotes: 1

Related Questions