Html2canvas: doesn't support font-family property with multiple value

Created on 13 Feb 2016 · 7Comments · Source: niklasvh/html2canvas

Using 0.5.0-beta4, thanks so much for this great module!

The problem I am having is, say I have a class
.class { font-family: "somefont", "Arial" }
where "somefont" doesn't apply, the end result is elements that are .class would be rendered using Arial in the page, but in the canvas the default font is applied instead.

Any idea?

Bug

Source

rayax86

Most helpful comment

I found the reason: parent of canvas has to have explicit font declaration like so:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 on 18 Feb 2016

👍5 🎉2 😄2

All 7 comments

I'm having the same issue.

This is Roboto font, in Google chrome canary
screen shot 2016-02-18 at 15 18 27

This is rendered image

eZ0 on 18 Feb 2016

I found the reason: parent of canvas has to have explicit font declaration like so:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

eZ0 on 18 Feb 2016

👍5 🎉2 😄2

The join/split in CanvasRenderer.prototype.font was stripping out additional fonts. I submitted a fix for it

jordan314 on 12 May 2016

👍1

I am not sure if this is related, but here I think I am seeing the font rendered correctly, but then layered over with an erroneous font?

rsbondi on 13 Jun 2016

@eZ0 you are correct! Thank you!
As you said, i put font-family: arial at canvas parent element and works!.

Thank you! Thank you!

getJv on 28 Sep 2016

Should be fixed in https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0

niklasvh on 12 Dec 2017

🎉1

not work, I got the same error

rendered by

html2canvas(this.$refs.iFr, { useCORS: true }).then(canvas => {
        console.log(canvas)

        document.body.appendChild(canvas)

        canvas.toBlob(function(blob) {
          saveAs(blob, 'Dashboard.png')
        })
      })

Custom loaded fonts from server (not CORS) is not render. Used font — based64 css file as font-face to Liberation Serif