Unable to use custom fonts #6

New issue

Closed

opened 2021-12-05 02:38:52 -05:00 by metasoarous · 2 comments

metasoarous commented

2021-12-05 02:38:52 -05:00

(Migrated from github.com)

Hi; Thanks for putting out this project.

I'm having trouble getting custom fonts to render. Should something like this work?

(pdf/->pdf
  [:div
   {:style {:font-family "concrete-roman"}}
   [:h1 "HTML to PDF"]
   [:p "With glorious concrete roman!"]]
  "test.pdf"
  {:styles {
            :styles ["/home/csmall/code/oz/public/css/style.css"]
            :fonts [{:font-family "concrete-roman"
                     :src "/home/csmall/code/oz/public/fonts/computer-modern/cmunorm.ttf"}
                    {:font-family "concrete-roman"
                     :src "/home/csmall/code/oz/public/fonts/computer-modern/cmunoti.ttf"}
                    {:font-family "concrete-roman"
                     :src "/home/csmall/code/oz/public/fonts/computer-modern/cmunobx.ttf"}
                    {:font-family "concrete-roman"
                     :src "/home/csmall/code/oz/public/fonts/computer-modern/cmunobi.ttf"}]}})

Everything renders, but it's just using some random serif font instead. Am I missing something?

Thanks very much.

Hi; Thanks for putting out this project. I'm having trouble getting custom fonts to render. Should something like this work? ```clj (pdf/->pdf [:div {:style {:font-family "concrete-roman"}} [:h1 "HTML to PDF"] [:p "With glorious concrete roman!"]] "test.pdf" {:styles { :styles ["/home/csmall/code/oz/public/css/style.css"] :fonts [{:font-family "concrete-roman" :src "/home/csmall/code/oz/public/fonts/computer-modern/cmunorm.ttf"} {:font-family "concrete-roman" :src "/home/csmall/code/oz/public/fonts/computer-modern/cmunoti.ttf"} {:font-family "concrete-roman" :src "/home/csmall/code/oz/public/fonts/computer-modern/cmunobx.ttf"} {:font-family "concrete-roman" :src "/home/csmall/code/oz/public/fonts/computer-modern/cmunobi.ttf"}]}}) ``` Everything renders, but it's just using some random serif font instead. Am I missing something? Thanks very much.

gered commented

2021-12-07 18:00:15 -05:00

(Migrated from github.com)

Hello,

Took me a little bit to find this, but what finally highlighted the problem was adding this bit to the ->pdf function's third argument (the options map):

:debug  {:display-html?    true
         :display-options? true}

That showed me that the <div> tag was being rendered like so:

<div style="{:font-family &quot;concrete-roman&quot;}">

Which is obviously wrong. :-)

clj-htmltopdf just utilizes Hiccup itself for rendering HTML in Clojure/EDN form as you are doing, and hiccup doesn't know how to convert EDN-style CSS to a CSS string last I checked?

Anyway, the easiest solution for you right now is to use an actual CSS style string for inline styles like this, e.g.

[:div
 {:style "font-family: concrete-roman"}
 [:h1 "HTML to PDF"]
 [:p "With glorious concrete roman!"]]

After I made that change using your example, the PDF was rendered using the custom font as expected.

Hope this helps!

Hello, Took me a little bit to find this, but what finally highlighted the problem was adding this bit to the `->pdf` function's third argument (the options map): ```clojure :debug {:display-html? true :display-options? true} ``` That showed me that the `<div>` tag was being rendered like so: ```html <div style="{:font-family "concrete-roman"}"> ``` Which is obviously wrong. :-) clj-htmltopdf just utilizes Hiccup itself for rendering HTML in Clojure/EDN form as you are doing, and hiccup doesn't know how to convert EDN-style CSS to a CSS string last I checked? Anyway, the easiest solution for you right now is to use an actual CSS style string for inline styles like this, e.g. ```clojure [:div {:style "font-family: concrete-roman"} [:h1 "HTML to PDF"] [:p "With glorious concrete roman!"]] ``` After I made that change using your example, the PDF was rendered using the custom font as expected. Hope this helps!

metasoarous commented

2022-01-04 19:41:14 -05:00

(Migrated from github.com)

Wonderful! Thanks for your response!

👍 1