How to reduce font size?

Question

Fonts

The main part of the website is the constructor, in which the user himself creates the design of the bathrobe. He writes an inscription, then chooses a font for it. There are 6 different fonts to choose from, which are not available in Windows and macOS by default. Google Fonts does not have them either, so they just lie in the fonts folder and are loaded along with the site loading. Because of this, the site loads in about 30 seconds, and the font folder itself weighs several times more than the rest of the site, including images. How can this be fixed? The choice of the font of the inscription in any way should remain, since this is the main function of the site.

Answer 1

Make dynamic data loading. The user selected a font -> loaded it via ajax.
Something like this ->

const url = 'https://fonts.googleapis.com/css?family=Oswald'

const button = document.querySelector('button')
button.addEventListener('click', event => {
    fetch(url)
        .then(response => response.text())
        .then(font => {
    	    const style = document.createElement('style')
    	    style.innerHTML = font

            document.head.appendChild(style)
    })
})

Because the user may not need a constructor at all, he came to read only about the product, and you load him 6 fonts. And if then it will be necessary to support not 6 but 50?
Look at google fonts. They download 20 fonts before opening the page, and it loads in 2 seconds.
Because not the whole font is downloaded, but part of it. You can look on the network. If you start writing in the preview, the entire font will be loaded
First like this ->
Then like this ->

Answer 2

There is no way to fix it - make a preloader while loading all this.

Answer 3

in the head, plug in only what you need