# Font not loaded when exporting SVG

**URL:** <https://talk.observablehq.com/t/font-not-loaded-when-exporting-svg/7294>\
**Category:** Help\
**Created:** [November 17, 2022, 6:31pm UTC](https://talk.observablehq.com/t/font-not-loaded-when-exporting-svg/7294 "2022-11-17T18:31:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cittadhammo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cittadhammo/32/9381_2.png) [@cittadhammo](https://talk.observablehq.com/u/cittadhammo)\
**Post date:** [November 17, 2022, 6:31pm UTC](https://talk.observablehq.com/t/font-not-loaded-when-exporting-svg/7294/1 "2022-11-17T18:31:22Z")

</div>

I succeded in the past to export my font when downloading a chart by cliking on the 3 dots next to the chart. In [this exemple](https://observablehq.com/d/26fc1d930c9cf8ec), it works very nicly, for PNG or SVG export.

But, for [this Chart](https://observablehq.com/d/3915c29fed00300c), I cannot make it work anymore.

The relevant code is:

```auto
const fontName = "Cormorant SC";

  GFontToDataURI(
    "https://fonts.googleapis.com/css2?family=Cormorant SC&display=swap"
  )
    .then((cssRules) => {
      let fontRules = cssRules.join("\n");
      d3.select("svg")
        .append("defs")
        .append("style")
        .attr("type", "text/css")
        .text(fontRules);
      console.log("Added Font");
    })
    .catch((reason) => console.log(reason));

  const g = svg.append("g").attr("font-family", "Cormorant SC");

```

It seems to me that the later notebook should work as well, but it dosen’t.

Thanks for your help !

---

<div class="post-metadata">

**Author:** ![cittadhammo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cittadhammo/32/9381_2.png) [@cittadhammo](https://talk.observablehq.com/u/cittadhammo)\
**Post date:** [November 26, 2022, 6:09pm UTC](https://talk.observablehq.com/t/font-not-loaded-when-exporting-svg/7294/2 "2022-11-26T18:09:26Z")

</div>

Solved, the defs were not added because of d3.select was not well define. I changed to

```auto
 GFontToDataURI(
    // "https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@700&display=swap"
    "https://fonts.googleapis.com/css2?family=Cormorant SC&display=swap"
  )
    .then((cssRules) => {
      let fontRules = cssRules.join("\n");
      svg
        .append("defs")
        .append("style")
        .attr("type", "text/css")
        .text(fontRules);
      console.log("Added Font");
    })
    .catch((reason) => console.log(reason));

```

And it works 😉