doesn't support font-family property with multiple value

[rayax86]

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?

[eZ0]

I'm having the same issue.

This is Roboto font, in Google chrome canary

This is rendered image

[eZ0]

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

[alana314]

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

[rsbondi]

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?

[getJv]

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

Thank you! Thank you!

[niklasvh]

Should be fixed in 77d258f

[ruslankonev]

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

[camohub]

I have the same problem. You can fix it via clone callback and style it separately.

               onclone: (document) => {
                        document.querySelectorAll('.button span').forEach(element => {
                            element.style['font-family'] = 'sans-serif';
                        });
		}