/font-to-base64

Primary LanguageHTML

Convert Font to Base64

Used Font Squirrel website to get the CSS properties converted. (https://www.fontsquirrel.com/tools/webfont-generator)

Steps to get the CSS file

  1. Download the font you want to convert.
  2. Go to the website.
  3. Upload the font.
  4. Select the EXPERT option in the Font Squirrel Configuration.
  5. Check the Font Squirrel Base64 option.
  6. Check the Font Squirrel Agreement.
  7. Download the file.

Also make sure to define/change the NAME of the font (In this case I called it Montserrat):

@font-face {
    font-family: 'Montserrat';
    src: ...
}

Check if it is working

Use main1.css main2.css main3.css and index.html to verify that it is actually using your font.

main1.css: In this file you need to change the import URL to the one you are using from Google Fonts

main2.css: In this file you need to change the BASE64, the font name, and the font used for the body tag

main3.css: This file has arial as the default font.

index.html: This file calls the CSS files.

In order to check, you need to serve the html and change the css file used.