Changing font-family in class

Question

This is a really simple question that I can't figure out the answer to. I am a total beginner. I can't change the font-family for some reason. I can physically type something different but it doesn't change the font at all. This is what my code looks like:

<!DOCUTYPE html>

<html>

<head>
    <title>Fruit</title>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<style>
.left {
    width:800px;
    margin:auto;
    text-align:center;
    box-sizing:border-box;
    background-color:#FFEBCD;
    border:2px solid black;
    font-family: 'Alegreya SC';font-size: 22px;
}
</style>
</head>

<body>
    <div class="left">
    <h1><strong>Fruit</strong></h1>
</body>
</html>

Does this answer your question? [Using custom fonts using CSS?](https://stackoverflow.com/questions/12144000/using-custom-fonts-using-css) or [this answer for using import](https://stackoverflow.com/questions/44259509/css-import-font-doesnt-work/44259654#44259654) You need to include the font so that it can be used. — FluffyKitten, Sep 19 '20 at 17:16

score 1 · Answer 1 · answered Sep 19 '20 at 17:33

You need to include the desired font ( google font in your case ) inside your project. You can do that in multiple ways. One is adding a link to it in your HTML

You can also that a quick look at this documentation

Other ways:

import in your stylesheet (CSS) with @import url('https://fonts.googleapis.com/css2?family=Alegreya+SC'); or
download the font and include it in your project and then import it
with @import(pathToFont)

.left {
    width:800px;
    margin:auto;
    text-align:center;
    box-sizing:border-box;
    background-color:#FFEBCD;
    border:2px solid black;
    font-family: 'Alegreya SC', serif;
    font-size: 22px;
}

<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC&display=swap" rel="stylesheet">
<div class="left">
  <h1>
  AAAA
  </h1>
</div>

Changing font-family in class

1 Answers1