Creating a web font to be used in SharePoint (Internet Explorer)

I was recently asked to embed a custom font in a CSS file that will be used in a branding project for SharePoint 2013. I was given a TrueType Format file (TTF) to accomplish this. The problem is that Internet Explorer will not take TTF files however Firefox will. To make these both compatible, you will need a few different file types (EOT, TTF, OET) to ensure cross-browser compatibility.

Here is what I did to get my font working.

1) I went to http://www.fontsquirrel.com to use its webfont generator. This tool will create those other file types for you.

2) In the top tabs, select “WEBFONT GENERATOR”.

3) You will be taken to a screen where you will add the font (the TTF file you have). Select either the basic option or advanced.

4) After uploading your TTF file, click “Download Your Kit”

5) You will download a zip file all of the files

6) Unzip the zipped folder

7) Add the files to the Hive in a specific location under a folder or within a document library if you would like. For this example, I added the files to the 15 Hive for SharePoint 2013. If you use a document library, just update the locations in step 8 to point to the files in the document library.

8) Edit your custom CSS style sheet used for branding (replace “FontName” with the name of your font and replace the “CustomFolder” with the name of the folder you use) and use the code below. I put the code below at the top of my CSS file.

@font-face {
font-family: ‘FontName’;
src: url(‘/_layouts/15/1033/styles/CustomFolder/FontName.eot’);
src: url(‘/_layouts/15/1033/styles/CustomFolder/FontName.eot?#iefix’) format(’embedded-opentype’),
url(‘/_layouts/15/1033/styles/CustomFolder/FontName.woff’) format(‘woff’),
url(‘/_layouts/15/1033/styles/CustomFolder/FontName.ttf’) format(‘truetype’),
url(‘/_layouts/15/1033/styles/CustomFolder/FontName.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

9) Refer to the fonts that you would like changed by doing something like the following. The font name used should be the same name used above in the line “font-family: ‘FontName’;”. In the example below, I’m referring to an element with an ID of “pageTitle” and the font being used will be my custom font loaded from the top of my CSS file. In addition, the code below is written after the code in step 8 to ensure the font is loaded before it is being called.

#pageTitle {
font-family: ‘FontName’;
}

After that, you will be done. You may notice a little bit of load time and a delay the first time your custom font gets downloaded but it should get cached after its first download. 

Advertisements
Posted in CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: