Skip to content

How to insert your own fonts on a template

Number of views: 5078 1 min read

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>

Was this entry helpful?

Share

Comments (0)