Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Docs] What is the correct way to include fonts?

See original GitHub issue

Regardless of whether I use the resource-inliner or just a style tag, all font declarations get removed.

Since all my css comes from files, I tried only having the fonts in a style tag in the html file, but this seemed to be removed unless I set removeStyleTags to false, which of course meant all other styles that has been imported from files also remained in the head in a style tag.

What is the correct way to do this?

Issue Analytics

State:
Created 8 years ago
Reactions:1
Comments:9

Top GitHub Comments

2reactions

jritcommented, Jul 15, 2015

If you don’t want to inline a <link> you can add the attribute data-inline-ignore like <link href="..." data-inline-ignore >. This is documented here https://www.npmjs.com/package/web-resource-inliner

The issue with Google fonts is sort of complicated by the fact that it returns different CSS depending on the user-agent that makes the request.

I totally get what you are saying though, @font-face is another thing like @media that can’t be inlined. More generally, we probably need to add proper support for all CSS at-rules as listed on https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule - adding support for @media is only a special case of that support.

0reactions

jritcommented, Nov 21, 2015

#158 resolved this issue