Custom Styles Applying to page.html.twig but not html--front.html.twig
The code in html--front.html.twig is identical to the code in page.html.twig


That's your problem - those are two different templates, it doesn't make sense for them to have the same content.

html.html.twig contains (or more accurately, renders) page.html.twig, plus the &lt;head&gt; tags and all that lives within, the footer of the document, and so on. If you copied page.html into html.html, that explains why you don't see styles any more - your &lt;head&gt; is gone.

It's perfectly valid to have html--front.html.twig and page--front.html.twig, or some other combination, but the html template needs to contain the outer part of the document, and the page template needs to contain the inner part.