Using custom .ttf or .otf fonts in css and html

If you want to use a custom font from dafont or other font websites they usually come as either a .TTF or .OTF here is how to use these fonts in web development and design.

Firstly have your font file that you want to use downloaded. Now go to onlinefontconverter.com

Make sure these types are selected

Click SELECT FONTS and upload your font file (.TTF or .OTF)

Now you want to download the zip file, in it there will be a folder with your font in 5 different file types.

* The reason we wanted the font file in all these different types is because we want to support a wide variety of browsers. .WOFF type is used by every major desktop browser, while the .TTF type is for older Safari, Android and iOS browsers.

Drag these font files into a fonts folder in your web site directory.

Now in your .CSS file you want to paste what was in the font.css file in the onlinefontconverter zip into the top of your .CSS file. An example is like:

@font-face {
  font-family: 'customFont';
  src: url('/fonts/customFont.eot');
  src: url('/fonts/customFont.woff2') format('woff2'),
       url('/fonts/customFont.woff') format('woff'),
       url('/fonts/customFont.ttf') format('truetype'),
       url('/fonts/customFont.svg#customFont') format('svg'),
       url('/fonts/customFont.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

body {
color: white;
}

h1 {
font-size: 21px;
font-family: customFont;
}

You will see i wanted h1 to use my custom font that i uploaded so i made sure it had font-family: customFont; defined.