How to embed custom fonts in web pages

How to embed custom fonts in web pages 

In order to do this yourself you need your font in at least 2 formats, I actually use all of them. This is the only way I know to convert the fonts at this moment, you can use "Font Squirrel". Once you have converted your fonts here is what you need: (place this in your CSS file)

@font-face {
font-family: 'Font Name HERE';
src: url('path_to_EOT_FONT.eot');
src: local('Font Name HERE'), url('path_to_SGV_FONT.svg')
format('svg'), url('path_to_WOFF_FONT.woff') format('woff'),
url('path_to_TTF_FONT.ttf') format('truetype');
}

One you have that some where (in the beginning) of your CSS, you can then call your font file by name in your font specification. Here is an example. Lets pretend I was using a font named "Crazy Font 1" here is what my CSS would look like.

h1 {
   font-family: ''Font Name HERE’, Arial, sans-serif;
}
Example using TimeBurner font in web page :

@font-face {
  font-family: TimeBurner; 

  src: url('TimeBurner/timeburner_regular.ttf') ,
  url('TimeBurner/timeburner_regular.eot');
}

style="font-family: 'TimeBurner';”

.Folder structure would look like this,




Thanks :) .