How to insert your own fonts on a template

If you are creating your own invoice template and you want to use custom fonts in it, you can add them in two ways: 

Install fonts in the CSS file as described below

@font-face {
    font-family: 'FONT-NAME';
    src: url('FONT-FILE-PATH.eot');
    src: url('FONT-FILE-PATH.eot') format('embedded-opentype'),
         url('FONT-FILE-PATH.woff') format('woff'),
         url('FONT-FILE-PATH.ttf') format('truetype'),
         url('FONT-FILE-PATH.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

or download the fonts from google fonts as shown below:

<link href="//fonts.googleapis.com/css?family=FONT-NAME​:400,700" rel="stylesheet" type="text/css" />

The downloaded font might look like this:

@import url('https://fonts.googleapis.com/css?family=Lato'); 

You need to create a new template through Settings > Account Settings > Invoice templates, select the base template, and at the top of the CSS add lines with import and:

*{ 
font-family:'font name'; 

NOTE:

when adding fonts from your own server, you must configure your own server accordingly. This method is called CORS (Cross-origin resource sharing). Here is a description of what to configure on your own server:

http://enable-cors.org/server.html

General description of CORS:

http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Sample CORS for AWS S3: