n8d

In modern web design many sites use web fonts. Nearly since the beginning of the Internet there were always intentions to bring desktop fonts to the web. Nowadays the support for web typography in modern browser is in 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 allows 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 was created that use mostly creative commons 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 it is not rocket science, because simply the required code can 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 easy as that but the style sheet class must be defined a little bit special. 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
*/
@import url("http://fonts.googleapis.com/css?family=Bangers");

.ms-rteFontFace-12
{
     -ms-name: "Bangers";
     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 for fall back, if a browser doesn’t support the first font.

Finally all looks like this:

Web Font used in rich text editor

Conclusion

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 simply to implement. As mentioned before nowadays there is a wide range of browser that supports @font-face so don’t be afraid to use it.

In matter of 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.

7 Responses to “Use @font-face in Rich Text Editor of SharePoint 2010”