Font Awesome inline within single, portable HTML file

I have an HTML file that is supposed to be portable as in just an HTML file and nothing else. This means I usually inline all styles/scripts in their content and it works quite well. I usually link to CDN content if I want to keep HTML clean, but often for offline use, I embed everything. All CSS/All JS there is to include goes directly to header/footer/body.

I've done exactly the same thing for Font Awesome which is a bit problematic because except CSS file I needed to convert woff/woff2 font files that normally stay next to them into a binary representation.

This is how it normally looks:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

This is its binary representation (just a few lines as it's quite large)

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.eot?");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAATmsAA0AAAADHuwAATlSAUuFYAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACZThEICor0YIjOQAE2AiQDnzALnzQABCAFiisH4i5bMnuSATLvp1Eyvq0KTDRu5CummzsFug2g5kWqjHSuhDve3Urk1BBxZf////+/72iIOaWzdbZjx

I've skipped including EOT/TTF/SVG (removed src for them) and simply replaced WOFF2/WOFF as that's supposed to be enough for modern support.

And it is! It works. However only in one way.

<style>
    .login::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f007";
    }

    .tps::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        content: "\f1ea";
    }

    .twitter::before {
        font-family: "Font Awesome 5 Brands";
        content: "\f099";
    }
</style>
<span class="twitter"></span>

Above code works

<span class="fas fa-camera"></span>

Above code doesn't work. This is how it looks (first 3 are using <style> approach):

If I switch to online using

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" as="style" type="text/css" rel="stylesheet preload prefetch" />

It works both ways which leads me to think there is a difference between those 2 ways of using Font Awesome. I tried to build it in a 3rd way thinking I may just need to change how I define things but using something like this didn't go well.

<span style='font-family: "Font Awesome 5 Brands"; content: "\f099"; font-weight: 400;'></span>

When I checked the source of all.css the style just defines this:

.fa-twitter:before {
  content: "\f099"; }

My 3 questions:

1. What is the difference between methods using <style></style>, which basically wraps the same thing that all.css does already, and using class "fab fa-twitter"
2. Any clue why it's behaving differently for those 2?
3. Any workaround?

Edit:

• here's JSFiddle showing an example https://jsfiddle.net/mfzvxw38/1/ I know it's long