Dom-to-image: Doesn't working with Google Fonts

[ralharabi]

https://jsfiddle.net/3Lu1xpxh/

It generates the DOM element without applying the element font as it's show. I'm not sure if there is limitation with some types of fonts or there are another way to apply the element font

https://jsfiddle.net/3Lu1xpxh/

[tomeraz]

I'm also having fonts changed in the image, using 'open sans' font.
style is written as:

font-family: 'Open Sans', sans-serif

It seems to replace open sans with another font.
Does dom-to-image handle fonts with quotation marks?

[srapp]

I've run into this as well. It looks like webfonts aren't being included as part of the SVG. I've modified @ralharabi's fiddle to make it easier to access the SVG: https://jsfiddle.net/kuou44ry/

One workaround I've found is that including the contents of the Webfont into your app's CSS seems to work: https://jsfiddle.net/heycr5em/

I've done a little research and it looks like it's possible to include webfonts within an SVG. I'm not sure just yet how it should be approached in this library, but this does seem like a solvable problem.

[ralharabi]

Thanks, it's work with me
one more note you have to make sure where you should but the font face code !.

[MichalBryxi]

Example of workaround for Google fonts:

1. Get your font import URL:

<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
</style>

1. Visit that URL (https://fonts.googleapis.com/css?family=Lato) and copy & paste everything you will see there to your CSS.

[TiagoRocha1985]

Thanks!

[TiagoRocha1985]

@MichalBryxi stopped working in Chrome =/

[MichalBryxi]

@TiagoRocha1985 Yes the same for me with latest Chrome. And that's not the only regression I encountered. I believe there is something really wrong in Chrome-67. In Safari, it works still ok.

[TiagoRocha1985]

@MichalBryxi For me in firefox still works!!

Is it possible to find another solution to get back to working in chrome?

[MichalBryxi]

No idea @TiagoRocha1985. Haven't dug into that one yet. But for me not only the fonts are an issue. So I suspect that it's something bigger.

[TiagoRocha1985]

Then it will be the way to use the html2canvas for the chrome.

If you find out something, I'll let you know @MichalBryxi

[MichalBryxi]

FYI: Looks like some of the forks have patches: https://github.com/lucadeangeli/dom-to-image/commit/bd1ccfd47d331ce0896a2e879d1227be0dfffdfb. So I forked the repo and cherry-picked everything that looked nice here: https://github.com/MichalBryxi/dom-to-image (no guarantee)

[TiagoRocha1985]

thank you brother!

Yes, it worked! Many, many thanks!

[randomdipesh]

Many thanks to the fork of @MichalBryxi , it worked fine

[sentika]

https://github.com/MichalBryxi/dom-to-image
it works fine for me. Will it include to dev branch? I still hope use it via npm

[impactcolor]

I'm trying this fix but I get a CORS error. The error doesn't appear in the regular js file (updated a year ago) from the src folder. Any idea why?

[sentika]

Can you check with anonymous attribute?
<script src"path/to" crossorigin="anonymous"></script>

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes#Example_crossorigin_with_the_script_element

[MichalBryxi]

@sentika The branch I provided is consumable via npm. You just need to point directly on GitHub: https://stackoverflow.com/questions/16350673/depend-on-a-branch-or-tag-using-a-git-url-in-a-package-json

As I'm not a maintainer, I can't integrate it into a build.

[bornfree]

Thank you @MichalBryxi.
Works like a charm!

[conradolopez]

Excellent, solved a bug with Google Fonts. Thanks

[Hinrick]

@MichalBryxi thanks for your hard work, however, I got the issues with using your version with adobe fonts (typekit)

There are two ways to import adobe fonts, one of them is put the in the head of your app, the other way is to put the script like this:

--

Because I'm developing a Chinese web, I need to do the script one. I tried the script of google font it works ok and the link tag of adobe font it also works fine. But it doesn't work when I importing adobe font by script.

Any thoughts?

[MichalBryxi]

@Hinrick I might take a look if you provide jsbin where (a) you have working example with "standard" fonts and (b) your non-working example.

Quick search showed me that this PR might have the necessary code: https://github.com/tsayen/dom-to-image/pull/118

If that is proven true by testing on your example, I could integrate it to my branch as well.

[arijitnaskar]

Example of workaround for Google fonts:

1. Get your font import URL:

<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
</style>

1. Visit that URL (https://fonts.googleapis.com/css?family=Lato) and copy & paste everything you will see there to your CSS.

Thanks :)

[akshaybosamiya]

Example of workaround for Google fonts:

1. Get your font import URL:

<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
</style>

1. Visit that URL (https://fonts.googleapis.com/css?family=Lato) and copy & paste everything you will see there to your CSS.

It works! :)

But do you have any idea that how it can be done dynamically without copy & paste?

[akshaybosamiya]

Example of workaround for Google fonts:

1. Get your font import URL:

<style>
@import url('https://fonts.googleapis.com/css?family=Lato');
</style>

1. Visit that URL (https://fonts.googleapis.com/css?family=Lato) and copy & paste everything you will see there to your CSS.

It works! :)

But do you have any idea that how it can be done dynamically without copy & paste?

Never mind. I found the below way to achieve it.

const loadFont = (url) => {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let css = xhr.responseText;
      css = css.replace(/}/g, 'font-display: swap; }');

      const head = document.getElementsByTagName('head')[0];
      const style = document.createElement('style');
      style.appendChild(document.createTextNode(css));
      head.appendChild(style);
    }
  };
  xhr.send();
}

loadFont(format('https://fonts.googleapis.com/css2?{0}display=swap', fontFamilies));