View Single Post
Old November 20th, 2013 (10:33 AM).
Twiggy's Avatar
Twiggy Twiggy is offline
You like dragons?
Join Date: Dec 2010
Location: Plushies.
Gender: Male
Nature: Hasty
Posts: 5,930
Originally Posted by MKGirlism View Post
Come on, the @font-face method really isn't hard at all!
Indeed. As long as you know the bulletproof web font syntax, you should have no problems with compatibility.

I prefer to also define font styles and weights in a @font-face block as I prefer using the same font family name and using the "correct" weights using font-weight and font-style in the actual CSS.

You might fancy something like this:
@font-face {
    font-family: 'Open Sans'; /* Specify a global font name */
    font-weight: normal; /* Specify what "weight" (e.g. normal, bold, lighter) these files are for */
    font-style: normal; /* Specify what "style" (e.g. normal, italic) these files are for */
    src: url('/styles/fonts/opensans/opensans-regular.eot');
    src: url('/styles/fonts/opensans/opensans-regular.eot?iefix') format('eot'),
	     url('/styles/fonts/opensans/opensans-regular.woff') format('woff'),
	     url('/styles/fonts/opensans/opensans-regular.ttf') format('truetype'),
	     url('/styles/fonts/opensans/opensans-regular.svg#webfont') format('svg');