CODEWITHSUNDEEP
htmlcssfonts
M.K
M.K

Reputation: 1505

@font-face and @font-family not working

I am trying to make something really simple: add 3 fonts to an html page.

I have looked at tons of examples but none have solved my problem. Maybe I am lacking something in the way it is written. I am actually not sure.

My html: 

<html>


<head>
    <title>Fuentes</title>
    <link type="text/css" rel="stylesheet" href="Fuentes.css">
</head>

<body>


<p class="a">This is a paragraph, shown in Roboto font.</p>

<p class="b">This is a paragraph, shown in  Bellefair font.</p>
<p class="c">This is a paragraph, shown in the Kavivanar font.</p>

</body>
</html>

And my .css:

@font-face {
    font-family: "Roboto";
    src: url(https://fonts.google.com/specimen/Roboto) format("truetype");

}
@font-face {
    font-family: "Bellefair";
    src: url(https://fonts.google.com/specimen/Bellefair) format("truetype");

}
@font-face {
   font-family: "Kavivanar";
    src: url(https://fonts.google.com/specimen/Kavivanar) format("truetype");

}




p.a {
    font-family: "Roboto", Roboto, sans-serif;
}

p.b {
    font-family: "Bellefair", Bellefair, sans-serif;
}
p.c{
    font-family: "Kavivanar", Kavivanar, sans-serif;
}

Upvotes: 0

Views: 1621

Answers (2)

Aeron Storm
Aeron Storm

Reputation: 119

You should add stylesheet link in your html for each google font you want to use. eg <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> for roboto font in your html and then use font-family: 'Roboto', sans-serif;in your css.

Upvotes: 1

Tallboy
Tallboy

Reputation: 13467

That's definitely not how to use Google fonts... You're not even linking to an actual font, you're linking to the support page.

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

First go to the page: https://fonts.google.com/specimen/Roboto

Then click this:

enter image description here

Then it will create a little box in the corner. Click that box, and you will see this. Now you have the actual code:

enter image description here

Upvotes: 5

Related Questions