is someone here who can recreate my existing invoice design in invoiceninja? preferably with my own ttf-font. pay for that too, of course
Hi,
We recommend this company for help with custom designs:
ok, but that’s a bit to expensive for me. I only need small adjustments to the plain design and my own font. Can someone help me or explain how to do it?
If you have specific questions we can try to help.
the most important thing is to include my own font. it’s not a google font, just a ttf file. I found a tutorial for v4, unfortunately not for v5
Hi @sir_wem,
you can copy your font into a public sever folder (when selfhosted) like invnin.sample.com/fonts and include them in the Invoice Design CSS like here:
… or create a font folder like invoiceninja/public/fonts and access the font via i.e. invnin.sample.com/fonts/montserrat-v15-latin-regular.ttf in the css.
@ben is it upgrade-save to have user content in /public/foo? I didn’t test it.
1 Like
thank you for your support!
the fonts are stored in …/invoiceninja/public/fonts und they are reachable via Browser. Following results with wrong font:
with this code:
<style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: ‘Bernardo’;
font-style: normal;
font-weight: 400;
src: url(‘https://my.server.com/fonts/Bernardo_Moda_Semibold.ttf; /*IE9 Compat
Modes */
src: local(’'),
url(‘https://my.server.com/fonts/Bernardo_Moda_Semibold.eot?#iefix’) format(‘embedded-opentype’), /*IE6-IE8 */
url(‘https://my.server.com/fonts/Bernardo_Moda_Semibold.woff2’) format(‘woff2’), /*Super Modern Browsers */
url(‘https://my.server.com/fonts/Bernardo_Moda_Semibold.woff’) format(‘wow’), /*Modern Browsers */
url(‘https://my.server.com/fonts/Bernardo_Moda_Semibold.ttf’) format(‘truetype’), /*Safari, Android, iOS */
url(‘https://my.server.com/fonts/Bernardo_Moda_Semibold.svg#Bernardo’) format(‘sag’); /*Legacy iOS */
font-size: "$font_size";
zoom: 80%;
}
Hey guys, just came across this. Is everything fine, you made it work?
hi ben, current status see last posting.
all hope on you!
Hi @ben,
after testing my and @sir_wem Code snippets I could not get it running.
I tested my code, but was missleaded by my chosen font, that it would work properly but it doesn’t.
I’ve checked permissions of fonts and folder and enablend CORS in nginx and mime types without success. Although this works:
I have no clue, but I know that there is a big need out there to have corporate looking documents out there. Maybee you have an idea?
Is it possible to use @font-face with your font? Here’s a tool that will automatically help you generate it. After that, just make sure you point to correct & URL and it should work.
I have integrated my font on my website via font-face, so it should actually work … where exactly should I insert the CSS code? Tried several positions, unfortunately without success
Hi @sir_wem, the same here: different positions of @font-face but no success. @ben can you provide a working code-snippet by occasion? I have no idea especially because using google fonts via @import works fine.
Hey there, you can achieve the same by replicating what Google did, that’s how I did it previously. I’ll post example soon 
Hi Ben, Unfortunately I can’t get any further. can you send us the example?
- If your fonts aren’t woff2, please convert them first. TTF to WOFF (Online & Free) — Convertio
- Go to https://transfonter.org/ & upload your fonts
- Host that file somewhere, you can even it put it in the Invoice Ninja public/ directory.
- Now you should be able to do same as with Google Fonts and it should load correctly.