HTML/CSS Designer

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

@ben do you have any thoughts?

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:
Ohne Titel

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 :+1: