How to insert your own fonts on a template

Created: 2020-08-26
Last updated: 2020-08-26

Post view count: 55

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>

 



Back


Add Comment