::Bugs Assistants::

There are a number of formats for typefaces available which are used within @font-face. Typically, you may only have a typeface in one format, such as TrueType or OpenType. To provide as much support for your choice of typeface as possible in your Magento store, you will want to convert to a range of formats.

There are a number of online @font-face conversion tools that generate the necessary CSS and typeface files for you, including Font Squirrel’s FontFace Generator (http://www.fontsquirrel.com/fontface/generator).

@font-face support across browsers
There is surprisingly good support for @font-face across even older browsers.

EOT: Internet Explorer
The EOT (Embedded Open Type) format typefaces are supported in all versions of Internet Explorer.

TTF: Safari, Opera, Chrome, and Firefox
Safari version 3.2 onwards, Opera version 10 onwards, Firefox version 3.5 onwards, and all versions of Chrome support the TTF (TrueType Format) for typefaces in @font-face.

OTF: Safari, Opera, Chrome, and Firefox
Similarly to the TrueType Format, OTF (OpenType Format) is supported by Safari version 3.2 onwards, Opera version 10 onwards, Firefox version 3.5 onwards, and all versions of Chrome support the TTF (TrueType Format) for typefaces in @font-face.

SVG: iPhone and Chrome
The SVG (Scalable Vector Graphics format) is supported by the iPhone and Chrome browsers. SVG font files are specially formatted .svg files that contain vector graphics for each glyph and character of the typeface it represents, allowing for easy scalability.

WOFF: Firefox
The WOFF (Web Open Font Format) is currently supported by Firefox, but is in the process of becoming a standard for font formats across all major browsers, including those by Opera, Microsoft, and Mozilla.

CSS for @font-face
The CSS for using the @font-face attribute is relatively simple. In your new theme’s local.css file (in the /skin/frontend/default/m2/css directory), add the @ font-face  CSS at the top of the file:

@font-face {
font-family: ‘FranchiseRegular’;
src: url(‘../types/franchise-webfont.eot’);
src: local(‘?’), url(‘../types/franchise-webfont. woff’) format(‘woff’), url(‘../types/franchise-webfont. ttf’) format(‘truetype’), url(‘../types/franchise-webfont. svg#webfontgvcdROVT’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
font-family: FranchiseRegular, sans-serif;
}