Free Consultation: +1 (888) 374 0906

Seriously it is this easy. Thanks to some great tool kits that are out there and the straight forward setup of SiteCM.

  1. Go to Font Squirrel and choose your @font-face font kit.


  2. Unpack the kit and view the css file.


  3. Copy the @font-face declaration from the top of the css file into the top of styles.css


  4. Add the font tag declaring your new font to the body declaration at the top of styles.css like so:


    body, td, p, li, input, select, textarea {

    font: 12px 'DeutschGothicNormal', Arial, sans-serif;}



    Remember to include a relevant and useful font stack because @font-face is only supported by the latest version of major browsers.

  5. Copy the eot, ttf, woff and svg files into your SiteCM css folder.

    Don't forget to also copy the license txt file!



Tada!
Check the display of your font in all major browsers as this is cutting edge stuff and not all are going to render it the same.
Works in these versions or higher of the following browsers: IE7, FF3.5, Safari 4.0, Opera 10, Google Chrome (iffy)

cross browser @font face

References:
Fonts.SiteCM.com
Font Squirrel
CSS @ Ten: The Next Big Thing
Write A Comment

Post A Comment

 
Submit

Sign up for email updates from our team

View Our Privacy Policy or Terms of Use