Reputation: 21
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
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 here to find out more about css selectors
Upvotes: 1
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