Custom fonts

custom-fonts.md

How to add custom fonts to a webpage:

1. Generate web fonts for every browser eg, use https://www.fontsquirrel.com/tools/webfont-generator or https://transfonter.org/

2. Add fonts to css/fonts folder or equivalent

3. Look inside downloaded font files for a stylesheet.css or equivalent and copy the @font-face, while adjusting the file paths to match the location of the font folder

   @font-face {
     font-family: "Some font";
     src: url("css/fonts/some-font.eot");
     src: url("css/fonts/some-font.woff") format("woff"),
          url("css/fonts/some-font.otf") format("opentype"),
          url("css/fonts/some-font.svg#filename") format("svg");
   }
   

4. Use the font with

   h1 {
     font-family: 'Some font', Arial, sans-serif;
     font-weight:normal;
     font-style:normal;
   }