Error: Multiple @font-face with the same font-family/font-style/font-weight

[s0kil]

Latest update triggers an error never seen before:

Error: Multiple @font-face with the same font-family/font-style/font-weight (maybe with different unicode-range?) is not supported yet: cera_pro_black/normal/normal
    at subsetFonts (/home/sokil/Desktop/Projects/European-Market-Web-App/node_modules/.pnpm/registry.npmjs.org/subfont/4.1.2/node_modules/subfont/lib/subsetFonts.js:685:19)
    at async subfont (/home/sokil/Desktop/Projects/European-Market-Web-App/node_modules/.pnpm/registry.npmjs.org/subfont/4.1.2/node_modules/subfont/lib/subfont.js:148:24)

This was not an issue before.

[papandreou]

Hmm, can you share the full set of @font-face declarations that your web site has?

[s0kil]

Just one

  @font-face {
    font-family: "cera_pro_black";
    src: url("/fonts/cerapro-black-webfont.woff2") format("woff2"),
      url("/fonts/cerapro-black-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
  }

[s0kil]

Also, probably unrelated, two Google Fonts

    <link
      href="https://fonts.googleapis.com/css?family=Lato|Merriweather&display=swap"
      crossorigin="anonymous"
      rel="stylesheet"
    />

[papandreou]

I tried putting that into a simple webpage, but I can't seem to reproduce it, except if I duplicate the @font-face declaration for cera_pro_black 🤷‍♂️

Which command line switches are you using? Are you running subfont on multiple pages?

Could I get you to try to make a small test case that reproduces it? You're also welcome to send me a copy of European-Market-Web-App, then I can try to narrow it down.

[s0kil]

I'm using Sapper + Svelte, and it exports the page into a static site.
The cera_pro_black font face is used in the navigation which is generated for every page, but it is not defined twice on each individual page.

[papandreou]

Thanks! I tried building your project and ran subfont on __sapper__/export/index.html, and that reproduced the error. Then I started trimming down the document, and it still happens with just:

<link href=client/main.4118517638.css rel=stylesheet>
<link href=client/client.f63cc1a2.css rel=stylesheet>

But it makes sense, because main.4118517638.css contains:

@font-face {
  font-family: "cera_pro_black";
  src: url("/fonts/cerapro-black-webfont.woff2") format("woff2"),
    url("/fonts/cerapro-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

... and client.f63cc1a2.css contains:

@font-face {
  font-family: "cera_pro_black";
  src: url("/fonts/cerapro-black-webfont.woff2") format("woff2"),
    url("/fonts/cerapro-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

So it seems to be more of a known limitation than a bug that it happens.

Could you find a way to avoid having two @font-face declarations that declare the same font?

We should probably also make subfont more resilient so it just patches all the @font-faces in this case. It's safe in this case, but in general it would require us to verify that the url sets are the same. As the error message hints at, handling different unicode-ranges in seemingly duplicate blocks would require extra care.

[s0kil]

@papandreou I think this is a problem with Sapper:
The files client/main.hash.css and client/client.hash.css are the same, I'm not sure why this happens.

The main.hash.css is for styles that apply to every page and the index.hash.css file is for index route.

[s0kil]

I have created an issue for this behavior.
sveltejs/sapper#1076

[s0kil]

This issue has been fixed in Sapper 0.27.10