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:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>