Embedded Fonts – How To

By using CSS, it’s possible to use a non-standard web font on your website. Your web pages can reference 3rd-party fonts from a website, such as Google Fonts or you can install a font on your own web server and reference it from there. This post describes how to incorporate a new font onto a web server and make it viewable in the client web browser.
Here’s How:

1. First, upload the font to a web server directory, such as /fonts.

2. Secondly, register the font in your CSS, like this example:
@font-face {font-family: 'Raspoutine Medium';
            src: url(http://MySite/fonts/Raspoutine Medium.ttf); }

3. Then, reference the font CSS on elements within your site:
body {font-family: 'Raspoutine Medium', Arial, Helvetica, san-serif; }

Note that this will only work in select “modern” browsers, namely current versions of Firefox, Chrome, Safari, Opera, and IE9. IE8 and older versions of IE don’t support font embedding. As always, it’s good practice to declare fallback fonts in your CSS, such “Arial, Helvetica, san-serif” in the example above.

Also note that there may be licensing issues in using fonts. Depending on the font, you may need to buy a license in order to install the font on your web server or make other use of it.

References
Web Typography: http://en.wikipedia.org/wiki/Web_typography
Google Fonts: http://www.google.com/fonts
Raspoutine Medium: various font sites, such as: Fonts2U
W3.org, The @font-face rule: http://www.w3.org/TR/css3-fonts/#the-font-face-rule
Another Font Resource: Font Squirrel
740 Digital: Custom Web Fonts – How To

This site may contain links to third-party sites. 740Digital website does not endorse, approve, certify, or control these external web sites, and does not guarantee the accuracy or warranties regarding products or services offered by these sites.740Digital Terms of Use