Adding new local fonts to your website

  1. Picking your favourite font: from preloaded type configuration either using outer resources
    e.g.,
    2Peas Mister GigglesCitizenArkwright


    https://fonts.google.com
  2. Then webfonts have to be converted
    https://transfonter.org/https://www.fontsquirrel.com/tools/webfont-generator

     

  3. Declaring styles:
    @font-face {
      font-family: 'my best Font';
      font-style: normal;
      font-weight: 400;
      src: local('my best Font'), 
     url('/fonts_folder/my_best_Font.woff2') format('woff2');
      src: url('/fonts_folder/my_best_Font.eot?#iefix') format('embedded-opentype'), url('/fonts_folder/my_best_Font.woff') format('woff'), url('/fonts_folder/my_best_Font.ttf') format('truetype'), url('/fonts_folder/my_best_Font.svg#my_best_Font') format('svg');

      /* latin */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    /* cyrillic */
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }