CODEWITHSUNDEEP
cssfonts
axdrv
axdrv

Reputation: 113

Variable font does not respond with font-weight declared

Please advise what's wrong with connecting Roboto-mono variable. I use ubuntu Focal Fossa and download and connect this font to my sample of site with standart index.html, styles.css.

I've download two fonts and even install static and connect them. But, still I have only two styles, there are "regular" and "bold".

Even I try font-weight: 100 or 300, neither "lighter", thickness of the font changing only when I put "600". No other declarations of fonts down below, so file is simple as it is, only one declaration body { font-family: Roboto, monospace; }. That's it.

Is that possible I do not use localhost but open index.html such as simple file in browser? Or, that is another reason?

<div class="carousel__cell">test1</div>
<style>
    /*@font-face {
        font-family: "Roboto";
        src: url("fonts/RobotoMono-VariableFont_wght.ttf") format("ttf");
        font-weight: 100;
    }*/
    @font-face {
        font-family: "Roboto";
        src: url("fonts/RobotoMono-Thin.ttf") format("ttf");
        font-weight: 100;
    }
        
    html,
    body {
        height: 100%;
        font-family: Roboto, monospace;
        /*font-variation-settings: 'wght'100;*/
        font-weight: 100;
    }
</style>

Upvotes: 0

Views: 1023

Answers (1)

Quentin
Quentin

Reputation: 943144

You have to specify the format name in the format() function, not the file extension.

The format name for TrueType fonts is truetype not ttf.

See the specification:

String Font Format Common extensions
"woff" WOFF 1.0 (Web Open Font Format) .woff
"woff2" WOFF 2.0 (Web Open Font Format) .woff2
"truetype" TrueType .ttf
"opentype" OpenType .ttf, .otf
"embedded-opentype" Embedded OpenType .eot
"svg" SVG Font .svg, .svgz

Is that possible I do not use localhost but open index.html such as simple file in browser?

Browsers do impose cross-origin restrictions on fonts. They might apply if you don't load your page through HTTP(S). That would be an additional problem though.

Upvotes: 1

Related Questions