Customize Invoice Design Issues

Hi Good day,

Im trying to customize my invoice to use Roboto font by set it on primary font and secondary font, but it doesn’t worked. Instead it using only Liberation Sans.

And then i tried edit the below under “includes”

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: Arial, Helvetica, sans-serif;
font-size: “$font_size”;
zoom: 80%;
}

Change it to this

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: Roboto;
font-size: “$font_size”;
zoom: 80%;
}

But it also didnt work, is there something i missed? And im using invoiceninja_hosted_pdf and not the phantomJS

another thing is, i tried to look how to change the footer (invoice and Quote, Terms and footer) but as far as i explore, id dont know where to change them.

Hi @NoobKS92,

try to add i.e.

<style>
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
</style>

like here:

and use your font like this (add to body section):

font-family: 'Architects Daughter', cursive;

Bildschirmfoto 2021-03-28 um 16.29.05

Sorry for the weird font example, but I had to choose it to see if it got properly substituted.

2 Likes

Hi @cdahinten , sorry for the late reply, i have a busy weeks, and this actually worked, was this means this is probably a bug in v5 as it didnt load from google font as it should be? Which causes all other selection on the edit on the font design panel didnt work

@NoobKS92, yes the code for fonts works, but the UI selections for Font and Size seem not to affect the tempate. @ben, @david does these settings are meant to set up the GUI, not the templates? I use IN in browser an here it does not change the UI nor the template.