Static hosting of google fonts

[cw789]

To be discussed

Close #1607

[josevalim]

Yes, let's go ahead. GDPR is a strong enough argument to me.

[jonatanklosko]

Not sure if it works well with esbuild, but there's a @fontsource/* npm package for every font from google fonts, like @fontsource/merriweather, which simplifies it into a single import.

[cw789]

I think it also worked with esbuild without problems. At least if mix build does nothing different then mix docs will do in projects.

But I will check @fontsource/* packages next week. Possibly it's anyway the better solution.

[jonatanklosko]

@cw789 to clarify, I meant that I'm not sure if @fontsource/* will work with esbuild, but if it does that would be great :)

[cw789]

Hi @jonatanklosko. Sorry to misunderstood you first. Thanks for clarification.
So @fontsource/* works perfectly fine with esbuild.

But they ship still legacy .woff. In my opinion we wouldn't need them anymore.
What we could do, is to not copy .woff over to dist. In CSS it will still remain.

The additional size in dist we will get (if it matters ;):
@fontsource with .woff2 only: 288 kB
@fontsource + additional .woff: + 298 kB
Manually, only .woff2, only in latin, within the assets directory as I did in the beginning: 115 kB

[josevalim]

I don’t think we should be Latin only because someone can write documentation in Chinese, right?

But I am fine with getting rid of woff.

[cw789]

I don’t think we should be Latin only because someone can write documentation in Chinese, right?

I also think so.

But I am fine with getting rid of woff.

Done.

From my side it's ready then.

[josevalim]

Thank you! I am thinking we should revert to your original commit and host them ourselves as we don't need woff. Thoughts?

[josevalim]

Ah, maybe your original commit is latin only?

[jonatanklosko]

As far as I understand a888a90 got rid of woff, but I don't see it in the final diff for some reason.

[cw789]

We can go with my initial solution (all fonts within our assets directory),
but yes I would need to add the additional character sets (it was more just a proof of concept, with latin only as starting point).

The @fontsource/* solution is also quite fine in my opinion.
To clarify the behavior:

• it includes the legacy woff in the imported CSS → Lato example
• esbuild needs to process the legacy woff with its file loader
  Otherwise esbuild will fail, I think there is no loader to just ignore .woff.
  But this is just a minor overhead of the build process.
  

  ex_doc/assets/build/build.js

  Lines 86 to 87 in a888a90

  	// TODO: Remove when @fontsource/* removes legacy .woff
  	'.woff': 'file',

• Our existing HTML formatter does not copy woff from the assets to the final docs/dist directory.
  I added this behavior and just removed it in commit a888a90 again.
  That's why it's not in the final diff.

So my conclusion about the @fontsource/* solution is - it is also really fine.
We would have woff just in the build process and in CSS.
But browsers will anyway prefer woff2 and the ~2 % of browsers just supporting woff
will just fail to load the font and fallback to a local font.

What solution should we prefer?
I'm good with both of them.

[josevalim]

💚 💙 💜 💛 ❤️