How to implement a font on a site

Question

Can someone tell me what to put in my css file to install a font named "Burbank.otf" and what to put in the html to make the text in that font

I have this in HTML:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
   <body>
      <h1>Hey, June</h1>
   </body>
</head>
</html>
<html>

<head>
  <title>Test</title>
</head>

And this in CSS:

@font-face { font-family: Junebug; src: url('Burbank.otf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

It’s 2019. Are we still not googling things before asking? Surely there was a recommended question similar to yours prior to posting just based off the title — soulshined, Feb 09 '19 at 17:41
Possible duplicate of [Using custom fonts using CSS?](https://stackoverflow.com/questions/12144000/using-custom-fonts-using-css) — soulshined, Feb 09 '19 at 17:43

score 0 · Accepted Answer · answered Feb 09 '19 at 17:26

You are selecting the class .junebug in your css file, but there isn't any html tag with a class like that.

Your CSS:

@font-face { font-family: Junebug; src: url('Burbank.otf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

Give an html tag the class junebug eg:

<h1 class="junebug">Hey, June</h1>

score 0 · Answer 2 · answered Feb 09 '19 at 18:31

0

you can use it simply like this :

@font-face {
  font-family: Burbank.otf ;
  src: "url from the font"
}

your cla{
  font-family: Burbank.otf;
}

I hope this will help .

answered Feb 09 '19 at 18:31

Dejan Zileski

1

score 0 · Answer 3 · answered Feb 11 '19 at 08:46

If your font is in the same folder of the HTML you can use this css:

@font-face {
    font-family:'Burbank';
    src: url('Burbank.otf') format('opentype');
    font-style: normal;
    font-weight: normal;
}
.junebug { font-family: Burbank; font-size: 4.2em; }

To make it works you need to use the same font-family name as the name of the font file.

How to implement a font on a site

3 Answers3