Adobe Dreamweaver CS6 Adding Fonts from Fontsquirrel

Adding Fonts from Fontsquirrel

• Fontsquirrel is located at http://www.fontsquirrel.com/
• Read over their information about the font before you use the fonts
• Look over the license section, fonts are all licensed so you have to be careful
• Check the license as you look at the fonts
• Steps:
1. Download fonts you want to use in the various formats
2. Set up the @font-face in your CSS
3. Add src with urls to the font locations in your site, assign the font family name
4. Use that name in yoru CSS for the various selectors
5. Watch for the globe icon in the font description
6. Download the fonts & unzip
7. Go to the font generator & upload, only do 1 font for this lesson
8. Select optimal & click agreement, you must have checked the licensing for each font
9. Click the button
10. Wait for it to give you a kit which contains an html file, and the font in various formats
11. The Add the correct type in the format area & the sources twice
12. View the CSS stylesheet that the font generator makes & the various html files
13. Test the fonts in the various browsers
14. @font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/chunkfive/Chunkfive-webfont.eot');
    src: url('fonts/chunkfive/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/chunkfive/Chunkfive-webfont.woff') format('woff'),
    url('fonts/chunkfive/Chunkfive-webfont.ttf') format('truetype'),
    url('fonts/chunkfive/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
• If your fonts are not working correctly, note this:IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.
• Troubleshooting info: http://www.fontsquirrel.com/forum/discussion/4/font-face-troubleshooting-font-face-problems