How can you change the size of a secondary font without changing the size of the fallback (primary) font with css?

I'm trying to change a specific set of h1 headers to a different font than the normal one I defined for h1, so I made a class where I defined the h1 font-family as Font2 for that class - but if the viewer doesn't have that font, it will default back to Font1, which is MUCH bigger.

I wanted to use size-adjust to make the first font (Font2) the same size as the fallback font (Font1), but I don't know how to get the aspect ratio right, and none of the commands I've tried have worked.

Things I've tried have included defining the size of Font2 in its own @font-face, but then I still run into the problem of it defaulting to Font1 if that font isn't on the local machine (as it should) and being gigantic because of the size difference (I've defined the default h1 to be 60px). How can I separate their sizes in css? Is it a matter of making an @font-face for both custom fonts and defining their size there? Wouldn't H1 then overrule it? And I still run into the problem of not knowing what the aspect ratio difference is.

For reference, the h1 size of Font1 is 60px (as defined in h1), and to be a similar size, Font2's h1 size has to be 100px.

(What I've done so far is make a class for the area where I want the h1 tag to be Font2 and match the size of Font1, without making Font1 too big if Font2 isn't on the system, but I haven't done anything successful so far.)

@font-face {
        font-family: 'Font2', Times, serif;
        src: local('font2.ttf'), format('truetype');
        font-size-adjust: 200%;
}

.Arch-ch1 {
        h1 {
            font-family: 100px 'Font2', 'Font1', serif;
            text-align: center;
        }
    }

Also tried this with no luck:

.Arch-ch1 {
    h1 {
        font-family: 'Font2', 'Font1', serif;
        text-align: center;
        @font-face {
            font-family: 'Font2', Times, serif;
            src: local('font2.ttf'), format('truetype');
            font-size-adjust: 2.0;
        }
    }
}

My latest attempt:

.Arch-ch1 {
    h1 {
        font-family: 'Font2', 'Font1', Times, serif;
        text-align: center;
    }
    font-family:'Font2' {
        font-size: 100px;
    }
}

Solution

There are multiple errors in you @font-face rule:

local() expects a font family name not a path/URL to a font file
you need size-adjust to normalize the fallback font size with desired font (rather than font-size-adjust)

Here's an example:

//@import 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap';


@font-face {
  font-family: 'Font2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
}


@font-face {
    font-family: "Fallback";
    font-style: normal;
    src: local(Arial);
    ascent-override: 90.199%;
    descent-override: 22.4836%;
    size-adjust: 107.4014%;
    font-weight: 100 900;
    font-display: swap;
}


body {
    font-family: "Font2", "Fallback", sans-serif;
    font-size:5em;
}


p{
  display:inline-block;
  outline: 1px solid #ccc;
  margin:0.3em;
}

h3{
  font-size: 1rem;
}

.fallback{
    font-family: "Fallback";
}

<h3>Ideal: Font2 is available</h3>
<p class="font2">Hamburgefonstiv</p>

<h3>Fallback: actually Arial</h3>
<p class="fallback">Hamburgefonstiv</p>

The above example values are taken from Petro Prots' question:"Why @font-face with local() src is not working?" who meticulously adjusted the "Arial" metrics to match those of "Inter" . Depending on the actual "Font2" you would need to find your own values.

Frankly, I recommend to load the custom font anyway to ensure a consistent font display.

Some browsers may block local fonts completely.
The local candidate may not be the best match (e.g if only a bold/italic version is installed

Besides, keep in mind there is not such thing as a "websafe-font" available on all devices OS. This has become more important with the rise of Android (usually not shipped with Arial, Times, Verdana etc included as in windows or Apple OS)

All in all if you really don't want to load any fonts better use the generic keywords like "serif", "sans-serif" or "monospace". Assuming a font is popular will inevitable lead to quite a few inconsistencies.