Using Custom Web fonts for your website

  1. you can download the fonts you like from websites like,
  2. make sure you have read the license agreement and select fonts that are ‘free for commercial use’ if you want to use that font for your clients’ website
  3. unzip the font package and copy the font file (usually in .ttf, .otf extension) into your web application folders. I usually place my fonts inside my css folder, like,
    1. my_app_folder/css/webfonts/
  4. in your css, usually at the beginning of the file, include the font definition, like this :
    1. @font-face {
      font-family: ‘FontBold’;
      src:url(‘webfonts/Myfont-Bold.ttf’) format(‘truetype’);
  5.  after you have defined the font, you can use the font-family like this,
    1. .myclass {  font-family:’FontBold’; }
  6. Please note that if the font file is very big, it might take some time to load the font file onto your browser. I will include a alternative common font after the custom font, so it will still look good even if the custom font file cannot be loaded.
    1. .myclass { font-family:’FontBold’, Arial, helvetica; }