Munter / subfont

Command line tool to optimize your webfont loading. Aggressive subsetting based on your font use, self-hosting of Google fonts and preloading
MIT License
1.57k stars 29 forks source link

Add self-hosting of fonts-com fonts #34

Open Munter opened 6 years ago

Munter commented 6 years ago

Forked from discussion in https://github.com/Munter/subfont/issues/31

What does a typical fonts.com css and fonts setup look like when using their service?

How do we determine if self-hosting is permitted?

How do we get at all the font assets. Do they serve browser specific css like google fonts does?

@papandreou

papandreou commented 6 years ago

What does a typical fonts.com css and fonts setup look like when using their service?

Looks like we use it by putting something like this in <head>:

<link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/34d68d8f-2eac-4fb7-b0da-1759668cf274.css" />

That's probably a personalized url that was issued when we signed up and paid for the service.

They use an @import to phone home/track usage

@import url(/t/1.css?apiType=css&projectid=34d68d8f-2eac-4fb7-b0da-1759668cf274);

How do we determine if self-hosting is permitted?

Since some of their packages permit self-hosting, I think it would be OK for subfont not to try to enforce anything on their behalf?

Munter commented 6 years ago

Hmm. https://fast.fonts.net/cssapi/34d68d8f-2eac-4fb7-b0da-1759668cf274.css doesn't even annotate font-weight and font-style. Would our resolver even work for that?

The stylesheet itself links to all the fonts, so from that perspective its much easier than with google fonts, where you have to fake a user agent to get it to serve the css with links to the right font format

papandreou commented 6 years ago

How do we get at all the font assets. Do they serve browser specific css like google fonts does?

It looks like their @font-face syntax is "bulletproof". They don't seem to be serving dynamic CSS.

papandreou commented 6 years ago

doesn't even annotate font-weight and font-style. Would our resolver even work for that?

I think we do support that (I'm fairly sure they just default to their initial value, normal). Would be good to add a test, though.

papandreou commented 6 years ago

Yup: https://drafts.csswg.org/css-fonts-3/#font-prop-desc

Munter commented 6 years ago

That seems like a problem though. That CSS you linked to contains a bunch of different variations of Avenir. Light, light + italic, regular, demibold etc. But they are only identified by their unique name. That means that any use of italics or boldness would not enable the browser to switch to a different font-family definition. It would have to faux all of it.

But maybe that's mostly a problem with the font service. If one of those unique font names apply based on our calculations, we should still be adhering to whatever the browser interprets it as

papandreou commented 6 years ago

Yeah, agreed. It could be that they thought this would be "simpler" for the user, to just use distinct font-faces for each variant.

papandreou commented 6 years ago

doesn't even annotate font-weight and font-style. Would our resolver even work for that?

We do support that. Added a test here: https://github.com/assetgraph/assetgraph/commit/47c18dcf7002a1d04c3c50793559939677238e5a

papandreou commented 6 years ago

Turns out we're actually in the process of switching away from fonts.com, so I'm less likely to look into this atm.

Munter commented 6 years ago

I'll get o it eventually. I have a bunch of changes I want to make in the subset transform anyway

papandreou commented 6 years ago

@Munter, okay, cool!

Which changes are you planning to make? Just so we don't step on each other's toes :)