SOLVED: Inlining CSS causes loosing of font styles

[EvgeniyOrlov]

Hello!
I'm currently in theme.liquid and want to inline my CSS into the head with

<style></style>

It works just partly because I have two places where theme.css is included:

1. The first place, looking like the following code snippet, I can calmly comment out or delete after I added my styles inline.

<link rel="preload" as="style" href="{{ 'theme.css' | asset_url }}">

2. But the second place, looking like the following snippet, loads the theme.css again,

{%- render 'font-face' -%}
   {{ 'theme.css' | asset_url | stylesheet_tag }}
{%- render 'css-variables' -%}

and if I remove this part, which loads theme.css,

{{ 'theme.css' | asset_url | stylesheet_tag }}

my page loses font styles.

What should I do to achieve working of my inline styles?

Solution: copypaste error, style rules were partly commented out and because of this misinterpreted.

[oreoorbitz]

You shouldn't inline your entire stylesheet.

You'll end up loosing the benefits of caching. 

If you'll doing this to improve your pagespeed performance, I reccomend do a critical CSS and non render blocking CSS setup instead of inlining your entire stylesheet. and set it up so the css is non render blocking when you first visit the website, then normal afterwards.

[EvgeniyOrlov]

Isnt HTML cached? Why do I loose cache benefits?

[oreoorbitz]

In the case of Shopify, its not.

Even if it did let your browser cache HTML, imagine  you load the homepage, that's cached, but then you load the product page, the HTML is diferent from the homepage, so it wouldn't be cached and you would load it from scratch.

Stylesheets are assumed to be consitent regardless of what page you load them on, so these are cached, but once you move your stylesheet inline, the CSS no longer being cached and each time you load a page, you have to deal with the extra weight the stylesheet adds to the HTML document.

Of course, it all depends on your circumstance and goals, I've had a client who wanted to have all their CSS inline becuase they wanted a great PSI score, and having it inlined gave a slightly better score then in a CSS file.