Host Google Fonts ourselves? about classlesscss HOT 11 CLOSED

For projects using npm and its ilk you can add instructions for using @fontsource really easily.

1. npm install @fontsource/open-sans
2. In classless.css Change @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400'); to @import '@fontsource/open-sans';

That's it. This is also almost the complete instructions for selecting a different font...

from classlesscss.

We can add different ways how to import the fonts. So let's remove the import, modify the fonts to 'Open Sans', open-sans, 'helvetica neue', helvetica, arial and add the description to the documentation.

from classlesscss.

Sounds good 👍 I will add instructions for all proposed ideas.

from classlesscss.

Thanks for pointing this out. I will look into this when I find the time. I guess self-hosting Open Sans would be an option. How would you make this configurable?

from classlesscss.

I wonder if we'd be able to use a data- attribute and a CSS variable?

from classlesscss.

I do not use npm but sure, we can add instructions on how you can self-host the font with npm.
However, I would rather not add any npm dependencies. Any other suggestions? Are there CDNs for fonts that are GDPR compliant? Classless could also use a different font.

from classlesscss.

We may be able to use unpkg i.e. unpkg

from classlesscss.

Looks promising! They also have an open issue regarding GDPR compliance, but so far there is no statement.
Are there any indications that unpkg does not process IP addresses?

from classlesscss.

@emareg I was mostly suggesting adding instructions because a huge number of people are using NPM.

from classlesscss.

I suggest removing the import from classless and add a description to use Google Web fonts, NPM or whatever. Open Sans is nowadays often already on the systems. So perhaps there is no need at all to load it. On that way, it's up to the user to decide.

from classlesscss.

I can recommend the following project for hosting google fonts on your own server:
https://google-webfonts-helper.herokuapp.com/fonts

Comes with a step-by-step explanation.

from classlesscss.