Documents. On your site. Now.

Get It

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") 
  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.

What is ViewerJS?

ViewerJS is a combination of a number of excellent open source tools that are built on HTML and JavaScript. ViewerJS was funded by NLnet foundation, consider a donation.

NLnet logo

The heavy lifting in ViewerJS is done by these awesome projects:

PDF.js (by Mozilla)

PDF.js logo

PDF.js is a library created by Andreas Gal and others at Mozilla Labs. It is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance. PDF.js is community-driven and supported by Mozilla Labs. Its goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually release a PDF reader extension powered by PDF.js.
Visit project website

WebODF (by KO GmbH)

WebODF logo

WebODF is a JavaScript library that shows office documents created by KO GmbH. It was started by Jos van den Oever at KO and is now developed by a growing team including external collaborators. It makes it easy to add Open Document Format (ODF) support to your website and to your mobile or desktop applications. It uses HTML and CSS to display ODF documents.
Visit project website

Download or fork now


Download now (see instructions), or fork the code at GitHub and send us a pull request.

Download Source code

ViewerJS is brought to you by KO GmbH | Impressum