Is it possible to set a different size for each font in the list using CSS?

Question

css

Suppose I use the @font-face directive to include a non-standard SuperPuperFont font. But the font is so non-standard that it needs a large font-size to look good. And he may also have to "correct" the line height. We get this CSS:

h4 {
    font-size: 48px;
    line-height: 50px;
    font-family: 'SuperPuperFont';
}

but I want to play it safe and add standard fonts to replace

h4 {
    font-size: 48px;
    line-height: 50px;
    font-family: 'SuperPuperFont', Georgia, serif;
}

And this is where the problem arises, because if Georgia or a standard serif font is loaded, it will be huge and "cramped". Is it possible for each font from the list to set its own size and other parameters?

Answer 1

It will not be possible to set the size for the fonts separately.
The best thing to do is to make the custom font load most likely for as many browsers as possible with a smart font-face. For example:

@font-face {
    font-family: "ProximaNovaRegular"; 
    src: url("../fonts/ProximaNova/ProximaNovaRegular.eot"); 
    src: local('☺'),
    	 url("../fonts/ProximaNova/ProximaNovaRegular.woff2") format("woff2"),
    	 url("../fonts/ProximaNova/ProximaNovaRegular.woff") format("woff"),
         url("../fonts/ProximaNova/ProximaNovaRegular.ttf")  format("truetype"),
         url("../fonts/ProximaNova/ProximaNovaRegular.svg") format("svg"); 
    font-weight: normal;
    font-style: normal;
}

UPD: In principle, you can do it through the JSS with the help of crutches, for example, measure the height of a block with text.