What’s the best approach to loading the fonts?

I got a web page used by 3 diffrent sites and each one requiring a different font. What’s the best approach to loading the fonts? I was thinking of pulling all the fonts at once then let CSS do it’s thing. So something like:

<link href="font-a" rel="stylesheet" />
<link href="font-b" rel="stylesheet" />
<link href="font-c" rel="stylesheet" />

Job done. Versus loading the font as needed. Something like:

<script>
const head = document.head;
let preloadLink;

if website-a {
    preloadLink = document.createElement("link");
    preloadLink.href = "font-a";
    preloadLink.rel = "preload";
    preloadLink.as = "style";
    preloadLink.onload = function() {
        this.rel = "stylesheet";
    };
    head.appendChild(preloadLink);
} else if website-b {
    preloadLink = document.createElement("link");
    preloadLink.href = "font-b";
    preloadLink.rel = "preload";
    preloadLink.as = "style";
    preloadLink.onload = function() {
        this.rel = "stylesheet";
    };
    head.appendChild(preloadLink);
} else if website-c {
    preloadLink = document.createElement("link");
    preloadLink.href = "font-c";
    preloadLink.rel = "preload";
    preloadLink.as = "style";
    preloadLink.onload = function() {
        this.rel = "stylesheet";
    };
    head.appendChild(preloadLink);
}
</script>

Would the 2nd option make the page load faster?