— words and things

adding .ttf to your css

recently i was consulted to do a simple font change for a web developer friend of mine. luckily i am a web ninja and was able to complete his request very quickly. this is a simple tutorial of how i accomplished this task.

  1. tell your client that this is quite a difficult task to accomplish but that you are 100% sure you can do it ( this way they think you are way smarter than you really are and you can charge them more money )
  2. tell them to send you the font in a ttf format
  3. find the main css of the clients web page and copy / paste the following code
  4. /* Set up a new font face and call it whatever you want.
       In this case the font-family variable I create is American-Typewriter.
       Make sure you point the src attribute to the correct .ttf file.
       If you wish to use this font anywhere simply apply 
       American-Typewriter to the font-family for any given style.
    @font-face {
      font-family: 'American-Typewriter';
      src: url("fonts/american_typewriter.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
  5. Tell your client that it took alot of work to copy and paste from this example and send them the bill

on a side note this is for css3 only.

for more info see this web page

Submit comment