Supporters of End User
Web

Use @font-face in Rich Text Editor of SharePoint 2010

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:CSS; Design; Site Manager/Power User; MOSS; WSS; 2007; 2010

 

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
*/
@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 as a fall back, if a browser doesn’t support the first font.

Finally all looks like this:

2011-07-11-FontFace-01.png
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 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.

Comments

Bradley Ross

Cool idea; didn't work in my initial attempt

I tried to make this work on my SharePoint 2010 site. It looks like the CSS is getting applied, but the actual font isn't coming down. Could this be a result of Google not including all the types of 'src' attributes that are usually recommended for using web fonts? Here is a video clip of what I see on my machine. http://screencast.com/t/tz5pGp38d

Posted 19-Jul-2011 by Bradley Ross
Stefan Bauer

Worked for me

I retried it using SharePoint Designer. What i did was open SharePoint Designer created a new StyleSheet File and stored it into Style Library of a normal team site.
Than i added a link to <link href="/Style Library/fonttest.css" rel="stylesheet" type="text/css" media="screen" /> in the head section of the v4.master page and it worked.
 
One thing you have to make sure is that your client have access to googles font directory.
 
greetings
Stefan

Posted 20-Jul-2011 by Stefan Bauer

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: