Custom Fonts

If a font on your web page is not installed on a client machine then there may be difficulty in making that font appear on the page when it is displayed. Normally the browser will use fonts installed on the client machine however there are various ways to get around this problem but different browsers handle fonts differently. Adding custom font support for all browsers can be a big task so there are some tools that will help.

This tool seems to be very popular: Font Squirrel. All you need to do is give a font and it will translate it to various formats and give them to you in a .zip file. This file also has examples so you can see what to include in your project and has support for all modern browsers which support @font-face css.

@font-face {
    font-family: 'myfontregular';
    src: url('/Content/Fonts/webfont.eot');
    src: url('/Content/Fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('/Content/Fonts/webfont.woff') format('woff'),
         url('/Content/Fonts/webfont.ttf') format('truetype'),
         url('/Content/Fonts/webfont.svg#myfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

This allows you to define your own font on the web page which can be used in your style sheet like any other font.

font-family: 'myfontregular', Arial, Helvetica, sans-serif;