@font-face and @font-family not working
Question
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;
}
2 answers
solution1
4 ACCPTED 2018-02-22 15:53:02
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:
Then it will create a little box in the corner. Click that box, and you will see this. Now you have the actual code:
solution2
1 2018-02-22 16:02:41
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.