Tags

, , , ,

I wanted to put a font on my webpage but I din’t know how to enable it. So I did some R&D and came up with various approaches

  • First one is Google Web Fonts. This gives a good list of fonts to choose from and the relavent code for you.
  • The second and the best one is Font Face Generator. This is absolutely superb. Just upload the font file(.ttf file of your FuturaCondensedMedium) which you will get by googling the name of your font and your font kit will be generated within seconds. The downloaded folder will contain all the different types of format that will be required by different browsers.Download it and your font will seamlessly work across browsers.
    The simple steps will be :

    1. Put the following code is a stylesheet (say stylesheet.css)

      @font-face {
      font-family: 'FuturaCondensedMedium';
      src: url('futura-condensedmedium-webfont.eot');
      src: url('futura-condensedmedium-webfont.eot?#iefix') format('embedded-opentype'),
      url('futura-condensedmedium-webfont.woff') format('woff'),
      url('futura-condensedmedium-webfont.ttf') format('truetype'),
      url('futura-condensedmedium-webfont.svg#FuturaCondensedMedium') format('svg');
      font-weight: normal;
      font-style: normal;

      }

    2. Add the following code in your html header

      body{
      font-family: 'FuturaCondensedMedium'';
      }

    3. By following these simple steps your font is ready to be published on the website.

  • Advertisements