In modern web design many sites use web fonts. Almost since the beginning of the Internet, there were always plans to bring desktop fonts to the web. Nowadays the support for web typography in the modern browser is really big. Netscape introduced the <font> Tag in 1995 as a first attempt to bring different fonts to the web. Internet Explorer 4 was the first browser, as far as I know, that allowed font embedding back in 1997.
In general some really good articles about web typography can be found on http://www.alistapart.com/topics/design/web-fonts/ which is worth reading to deep dive into web typography.
@font-face in general
The @font-face support was first introduced in CSS 2.0 specification and was later removed and re-added in CSS 3.0. For better cross browser support certain font directories exists that provides scripts for embedding. I personally prefer font squirrel for two reasons. The first reason is they offer some nice font kits for web usage including all files and required Style Sheets. The second is that every Open Type or True Type Font can be converted to a web font using their generator. Over the last month some really nice fonts were created that use mostly creative common license.
The last addition for web fonts is Google’s font directory, which I will use in this example later on.
@Font-face, SharePoint and the Rich Text Editor
To use custom fonts in SharePoint is not rocket science, because the required code can simply be added to your style sheet. But what happens if an editor in SharePoint should choose that @font-face font in rich text editor?
It’s just as easy as that but the style sheet class must be defined specially. The code for that looks like this, where I used a font from googles front directory.
Add “Bangers” font from googles directory http://www.google.com/webfonts/family?family=Bangers&subset=latin
font-family: "Bangers", arial, helvetica, sans-serif;
In the code above, the @import simply imports another style sheet inside a style sheet. SharePoint default fonts are defined in the Style Sheet CoreV4.css with a range from .ms-rteFontFace-1 to .ms-rteFontFace-11 defining the default fonts. The ms-rteFontFace identifies the class that will be used for the font selection drop down in SharePoint. The number therefor should be greater than 11 to avoid overwriting the default fonts. In my example I use 12 for that.
–ms-name is a so called vendor specific style tag like –webkit for safari or chrome, -moz for firefox and –o for opera and this will be used in the font drop down as the display name. The rest is basic CSS that defines a font-family. The first value must match the name of the font face and the other fonts will be used as a fall back, if a browser doesn’t support the first font.
Finally all looks like this:
Web Font used in rich text editor
I like @font-face because it’s the best way to use nice typography on the web. Other options like Cufon and sIFR for web fonts are not that simple to implement. As mentioned before, nowadays there are a wide range of browsers that support @font-face so don’t be afraid to use it.
In SharePoint, the rich text editor is easy to extend by simply using Style Sheet Definitions, which also has improved a lot in SharePoint 2010.
One last word of warning is that the licences of the font that will be embedded should always be respected. Not every font is allowed to be used on the web. Some font directories offer commercial licenses for font embedding like Fontspring, FontShop or TypeKit.