Question about @font-face for styling individual elements

HTML & CSS
1

What I need to do is style some paragraphs and headings with custom font using @font-face
How do I do that for individual elements? Is @font-face class? Do I need to specify class or id next to it
in order to call for CSS rules for element I want to stylize?

Thanks.

2

AFAIK @font-face gets the font (hopefully*) and then you can use it like others. eg. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>

*in this example serif is the fallback in the font stack in case it doesn’t load.

3

Oh so it does not make that font default for all, but just registers it in CSS of website so using defined name (do you define it?) it can be applied individually.

Thanks!

4

Yes once the browser has downloaded the new font you just use it like you would for any other font (e.g. Arial or verdana). Nothing will get the new font by default until you apply it to something using the font’s defined name (as Mittineague has shown above).