Using your own fonts

Using non-standard fonts in your documents can help create a more expressive and unique look. Many organisations have a corporate style, and of course you want your online documents to reflect that corporate style as close as possible.

If you have ODF-documents with embedded fonts, such as presentations or text documents (note: not every office suite can do this), these additional fonts will be used without any configuration from your end. It should just automatically work.

But what if you want to use specific fonts in the office documents you put online, but the documents themselves don't have these fonts included? In that case the documents will look great on your own computer (assuming it has the fonts installed itself), but will fall back to unpredictable fonts on everyone elses computer, tablet or cellphone. This is not a ViewerJS problem per se, as any office application faces the same issue - you can't make up fonts. Don't worry, in the case of ViewerJS it is pretty easy to fix.

All we need to do is tell the browser which font you are using and where to find it (by using the @font-face) declaration). Of course make sure to use a font you are allowed to use, for instance from Fontsquirrel or Google Fonts.

What you need to do is the following:

0) (If you haven't done so already, install ViewerJS as above)

1) Upload a document (for the demo we'll use a presentation in OpenDocument Format, but you can also use text documents, spreadsheets etc). Note down the exact name of the font as it appears in the office application you created the document in (in this case we'll take The Font Name as the name). You need the exact spelling, including spaces, capital letters etc.

2) Upload the necessary font files to the webserver. For support of legacy systems it makes sense to add fonts in a number of different formats. If the fonts are already on your webserver, note down the exact location of the fonts, including their full filename. In this case we'll take /ViewerJS/fonts as the location for the fonts.

3) In the folder ViewerJS, rename the file "example.local.css" to "local.css" and open it with your text editor. Add the @font-face declaration for the fonts you want to add. A font declaration looks like this:

@font-face {
  font-family: '**The Font Name';
  src: url("/ViewerJS/fonts/filename-of-webfont.eot");
  src: url("/ViewerJS/fonts/filename-of-webfont.eot?#iefix") 
       format("embedded-opentype"), 
  url("/ViewerJS/fonts/filename-of-webfont.woff") 
       format("woff"), 
  url("/ViewerJS/fonts/filename-of-webfont.ttf") 
       format("truetype"), 
  url("/ViewerJS/fonts/filename-of-webfont.svg#The%20Font%20Name") 
       format("svg");
  font-weight: normal;
  font-style: normal;
}

That is it. Check in the browser if it works correctly for your test document. If it doesn't work as advertised, check if all the font files have been uploaded correctly.