What's wrong with my CSS font-face linkage and usage - html

Question

EDIT: So, for some reason, when setting font in "body" or "html" it didn't applied font to elements in "form", because I had only form element to test form elements, fonts didn't worked. When I just added some random text before "form" element by rolling my head on my keyboard, I found out that fonts are actually working... But I was expecting that if I set font-family rule in "body" or "html" every element will inherit that font... No CSS with "#font-face" rule needed editing...
So I have a problem with self-hosted font. I want to load Unscii font on my page, I've generated CSS file with #font-face rule and fonts (WOFF, WOFF2, TTF), linked that CSS file to my page, but when I'm trying to use this font in other CSS file, it doesn't work. Also when I trying to use other font, sizing of elements on page changes slightly, like "margins or paddings or content box", but the font face itself is still remains the same, even for "built-in" fonts. I've did everything same as in my other project where everything loaded and linked same, searched in Google, but every result refers to how link and use, so it didn't helped me.
This is how I link font-face CSS
<link href="fonts/unscii-16.woff2" rel="preload" as="font" type="font/woff2" crossorigin/>
<link href="css/unscii.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet"/>
And this is my "unscii.css" file
#font-face {
font-family: 'unscii';
src: url('../fonts/unscii-16.woff2') format('woff2'),
url('../fonts/unscii-16.woff') format('woff'),
url('../fonts/unscii-16.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
I'm using Razor Pages and ASP.NET Core 6, HTML code is located in _Layout.cshtml and works perfectly for all pages, only issue with fonts.
Thanks.

Answer 1

I think this might help. you can remove the '' from URL and format as an OpenType because in my styling it is working that way!
you also can check this article.
https://github.com/whatwg/html/issues/7627
Check this out!
<link href="fonts/unscii-16.woff2?v=4.5.0" rel="preload" as="font" type="font/woff2" crossorigin="anonymous"/>
CSS file
#font-face {
font-family: unscii;
font-style: normal;
font-weight: 100;
url(../fonts/unscii-16.woff2) format('opentype'),
}
#font-face {
font-family: unscii;
font-style: normal;
font-weight: 100;
src: url(../fonts/unscii-16.ttf) format("opentype");
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 10px;
font-family: Unscii;
}