Editing Courses/Design & Technique-Essential Web Design/05 (section)

== use a custom font ==
To use a custom font, the font file has to be stored somewhere, either '''locally''' (same folder as your site) or remotely.

=== locally ===
* download a font from: https://fontlibrary.org/
* save the font files (.ttf .woff) on your website folder, best in a folder dedicate to fonts
* write the CSS @font-face rules for each of the fonts and font files

Try changing the following example with other custom font

In this case I'll use 5by7 https://fontlibrary.org/en/font/5by7  which includes 2 styles: regular and bold. 

Notice how 2 font sources (files) are used under the same font name, but with different weight, so that both the regular and bold font-styles are used. 

<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">

      @font-face {
      font-family: "5by7";
      src: url("fonts/5by7.ttf");
      font-weight: normal;
      font-style: normal;            
      }

      @font-face {
      font-family: "5by7";
      src: url("fonts/5by7_b.ttf");
      font-weight: bold;
      font-style: normal;            
      }

      body {
      font-size: 16pt;
      font-family: "5by7"; }



    </style>
  </head>
  <body>
    <h1>This is a custom font in Bold.</h1>
    <b>Bold again</b>
    <p>Regular font-weight in a paragraph</p>
  </body>
</html>
</source>