Scaling one font face in CSS

user_2291378 0
Viewed 63

I'm writing a tiny website for a book that's currently being printed, and want to match the slightly eccentric font called Cronos Pro which it uses for its headings. I'm currently doing this with the following CSS:

header, h1, h2, h3 {
   font-family: cronos-pro, sans-serif;
}

Cronos Pro is supplied using our Adobe Creative Cloud subscription, and under the terms of their licence this must be loaded as follows:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css"/>

This just produces a set of @font-face rules defining the font, and it all works fine. Nevertheless, I feel I ought to keep the fall-back of sans-serif in case the font is temporarily unavailable, or for an old browser that doesn't support it.

However, Cronos Pro is a very compact font. If I know the browser is using it, I want it rendering bigger, as if I'd added font-size: 125% to the CSS. But if the browser falls back to its default sans serif font, I want it at 100% size.

I thought I could do this as follows, but Firefox tells me it's an invalid property value:

font: cronos-pro 125%, sans-serif;

Is there a good way of achieving this, bearing in mind the @font-face rule is outside of my control?

webfonts fonts css
1 Answers

You could use JavaScript to add a stylesheet with your font-size: 125% tag if and when Chronos Pro loads successfully:

<script>
    {
        let font = "cronos-pro";
        
        let styleSheet = document.createElement('style');
        document.head.appendChild(styleSheet);

        document.fonts.ready.then(function () {
            if( document.fonts.check(`1em ${font}`) ){
                styleSheet.sheet.insertRule('header, h1, h2, h3 { font-size: 125%; }')
            }
        });
    }
</script>

Not sure if this is a "good way" to do it, but it should work in a pinch.  I'm still a bit new at web development.

user_152049950
Related