SharePoint branding: automatically resizing backup fonts on browser capability | Yaroslav Pentsarskyy on SharePoint Development

Here is the scenario: you’re creating a markup and styles for a SharePoint site (likely a public site). You’re not too sure what browsers are going to be accessing the site and definitely not sure which fonts those browsers are going to support. You can always design your site in arial or times new roman . But if you still want to use some fancy fonts (for example from Font Squirrel) on your site without making all the text as images – this post is for you.

The solution, well one of them::
CSS does support backup fonts already, you define it like this:

.myDIV{
font: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
font-size: 12px;
}

but as you can tell we can only define one size for all fonts. Depending on the font the difference between font sizes might be pretty signifficant. This is especially true for serif fonts.

Check this example below.

Well, one solution can be using dynamic font resizing with JavaScript. A suggestion a friend gave me, thank you Susan, is using Font Detector to detect whether a font is available for the client and if not assign a fallback font and resize it accordingly.
In your custom SharePoint masterpage, define jQuery and fontdetector:

<head>
<!-- ... -->
<script type="text/javascript" src="/Style Library/JS/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/Style Library/JS/fontdetect.js"></script>
<!-- ... -->
</head>

Then at the bottom of the masterpage add the code performing the resizing and fallback definition

Here is the example:

<script type="text/javascript">
        $(function(){
               var fontDetector = new Detector();
               if(!fontDetector.test('calibri')) {
                       $('.myDiv p').css('font-size', '14px');
                       $('.myDiv p').css('font-family', 'arial');
               }
        });
</script>

In here, we test for calibri and if it’s not available we fall back to arial with 14px size.
Download font detector from here

If you hae quite a few of font fallback definitions which need to be triggered on backend logic – use a custom control which will output the JavaScript above according to your logic.

Enjoy!