Installing web fonts

Because a clients identity will typically be seen in both print and web, you will want to make sure that their corporate fonts are available in both formats.
  • A desktop font typically has one of the following extension: .ttf, .otf, .t1, .tt (see teal circle below)
  • Older fonts came in four formats to accommodate different browsers: .eot, .svg, .ttf and .woff. (See pink circle below) Some newer fonts may jst have a .woff font in the kit.  The stylesheet.css supplied in the webfont kit is helpful.

  1. Download the webfont kit.
  2. Find the font files in the webfont kit.
    web_fonts
  3. Put the font files, ending in .eot, .svg, .ttf and .woff in the root directory. In this case, put them in the unit_1 folder. If you put them in a folder, they will not be found.
    fontFiles
  4. Find the .css code for your font in the webkit. Open the .css file in Dreamweaver so you can copy  the code.
    web_font_css
  5. Paste the css code into your .css style sheet. The code may look like this:
    @font-face {
    font-family: ‘1942_report1942_report’;
    src: url(‘1942-webfont.eot’);
    src: url(‘1942-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘1942-webfont.woff’) format(‘woff’),
    url(‘1942-webfont.ttf’) format(‘truetype’),
    url(‘1942-webfont.svg#1942_report1942_report’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }css
  6. From the css, copy the font name (‘1942_report1942_report’) and use it for your font-family like this:
    h1 {
    font-family: ‘1942_report1942_report’;
    font-size: 72px;
    line-height:72px;
    text-align: left;
    color: #333333;
    letter-spacing: 0.2px;
    }
  7. Remember to view “live” while in Dreamweaver. 
  8. Remember to send the font files (.eot, .svg, .ttf and .woff) and your new .css file to the server.
Here is a much more complicated explanation:
If the font you want is not available in a webfont kit, you can try the following webfont generator or pick a different font.

Leave a Reply

Your email address will not be published. Required fields are marked *