How to add fonts to classes

Question

Hey can anyone fill me in on how to add fonts to HTML classes? I was watching a tutorial and that part skipped and I'm confused exactly what he did. There was a box class with different elements in it and he was trying to add font styling before it skipped.

This is the HTML and CSS, excluding the <head> and <body> tags:

.body {
  Background-color: red;
}

.box {
  Width: 174px;
  Height: 250px;
  Background: yellow;
  Width: 25px Padding:20px;
}

.true {
  Background-color: brown;
}

.true2 {
  Background-color: green
}

<Div class="box true"> this is an example</Div>
<Div class="box true2> parenthesis</Div>

Please make sure your HTML and CSS is syntactically correct. You’ve got a missing semicolon before `Padding` and a missing quote for your `class` attribute. — Sebastian Simon, Aug 17 '18 at 17:54
Do you mean any font (answered in any decent documentation - here's [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font)), or a custom font (answered in [Using custom fonts using CSS?](https://stackoverflow.com/q/12144000))? — Heretic Monkey, Aug 17 '18 at 18:00
It's common practice to keep your HTML elements lowercase, so your `Div`s would be come `div`s. [Read more](https://stackoverflow.com/questions/19808514/is-it-bad-to-use-uppercase-letters-for-html-tags#answer-19808671) — NonameSL, Aug 17 '18 at 18:52

pretzelhammer · Answer 1 · 2021-02-06T14:11:46.833

2

Use the font-family styling in your classes:

Example:

body {
    font-family: Arial, sans-serif;
}

edited Feb 06 '21 at 14:11

answered Aug 17 '18 at 17:52

pretzelhammer

13,874
15
47
98

score 1 · Answer 2 · answered Aug 17 '18 at 17:54

1

You can also add custom fonts like this:

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

And then just juse font-family: myFirstFont; whenever you need it.

answered Aug 17 '18 at 17:54

Mayari

510
1
3
16

How to add fonts to classes

2 Answers2