Using Custom Font Files – Metro Publisher Community & Support Site

PRO sites can use custom font files. To do this, you must first obtain a webfont files and upload the files to our Design Studio/Images, and then reference the fonts in the CSS utilizing @font-face function.

Most font resellers offer web font files. Sites like MyFonts.com, FontSpring.com, and FontSquirrel.com provide @font-face kits to make this easier. Below are listed the necessary formats and the browsers they correspond with. (A list of some webfont providers at the bottom.)

TTF - Works in most browsers except IE and iPhone.
EOT - IE only.
WOFF, WOFF2 - Compressed, emerging standard.
SVG - iPhone/iPad.

Upload your font files into Metro Publisher's Design Studio in Images, the same area where you upload your design imagery.

Use @font-face to utilize the newly added fonts in your design.

Here's an example:

Download the @font-face kit for a typeface called St. Marie from FontSquirrel. You'll get a zip file.
Unzip and see that it contains StMarie-Thin-webfont.eot, StMarie-Thin-webfont.svg, StMarie-Thin-webfont.ttf, and StMarie-Thin-webfont.woff. You'll also find examples of HTML (demo.html) and CSS (stylesheet.css).
Upload those font files to Metro Publisher.
Go to the CSS area and click to edit your screen.css file.

Add the following @font-face function to the top of your CSS.

@font-face {
    font-family: 'StMarieThin';
    src: url('StMarie-Thin-webfont.eot');
    src: url('StMarie-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('StMarie-Thin-webfont.woff') format('woff'),
         url('StMarie-Thin-webfont.ttf') format('truetype'),
         url('StMarie-Thin-webfont.svg#StMarieThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

Now you can reference StMarieThin in any font-family parameter in your CSS and it should appear. For example for an H3, it could look like this (*keep in mind to use the exact name you give it in the @font-face part - capitals and all):
```
H3   { font-family: 'StMarieThin', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 1.2em}
```

Webfonts sources

Typekit (increase webfont options in Metro Publisher)
Google Webfonts (free/opensource)
FontSquirrel.com (free and paid)
The League of Moveable Type (free/open-source)
Fontspring.com (webfonts for sale)
Myfonts.com (webfonts for sale)

Kommentare