Как я могу удалить шрифт по умолчанию перед загрузкой Google Fonts или получением готового события?

Question

Есть скрипт, который обрабатывает svg. Его цель - изменить слово и растянуть его на всю высоту экрана. Но возникла такая проблема, что если перезагрузить страницу ctrl + F5, то сначала растягивается слово стандартным шрифтом (скриншот 1), а затем загружаются стили и слово сжимается (скриншот 2). Мне нужно, чтобы стандартный шрифт не устанавливался на странице до загрузки шрифтов Google или готовности шрифтов.

HTML:

JS (мин.):

$(document).ready(function(){
    //.....................
    let text = document.getElementById("text0");
    text.innerHTML= "<tspan fill='#282828'>OCTOPU</tspan><tspan fill='#191919'>S</tspan>";
    document.querySelector("#string0").querySelector("svg").setAttributeNS(null, "viewBox", `-2.5 0.2 16 ${text.getComputedTextLength()}`);
    //.....................
});

JS (расширенный):

document.addEventListener("DOMContentLoaded", function(event) {
    let sneakers;
    $.getJSON( "items.json", (data) => {
        sneakers = data.sneakers;
    }).done(()=>{ 
        for(let i = 0; i<sneakers.length; i++) {
            $('.imgGallery').slick('slickAdd', '<div class="item"><img src="/images/header/sneakers/big/'+i+'.png" alt="'+sneakers[i]+'"></div>');
            $('.slider-nav').slick('slickAdd', '<div class="item"><img src="/images/header/sneakers/min/'+i+'.png" alt="'+sneakers[i]+'"><div class="sub">'+sneakers[i]+'</div></div>');
            $('.strings').slick('slickAdd', '<div id="string'+i+'" class="item"><svg viewBox="-2.5 0.5 16 75"><g transform="rotate(90 0 0)"><text id="text'+i+'"></text></g></svg></div>');
            
            let string   = $('.item[data-slick-index="'+i+'"] .sub').text();
            let firstStr = string.toUpperCase().substr(0,string.length-1);
            let lastStr  = string.toUpperCase().substr(string.length-1, string.length);
            
            let text = document.querySelector("#text"+i);
            text.innerHTML= "<tspan fill='#282828'>"+firstStr+"</tspan><tspan fill='#191919'>"+lastStr+"</tspan>";
            document.querySelector("#string"+i).querySelector("svg").setAttributeNS(null, "viewBox", `-2.5 0.2 16 ${text.getComputedTextLength()}`);  

            countSlides=i;
        }
    });
});

Answer 1

Я переместил основную часть кода в глобальное пространство и выполнил выравнивание всех svgs внутри $ (window) .on ('load', ...)

let sneakers;
$.getJSON( "items.json", (data) => {
    sneakers = data.sneakers;
}).done(()=>{ 
    for(let i = 0; i<sneakers.length; i++) {
        $('.imgGallery').slick('slickAdd', '<div class="item"><img src="/images/header/sneakers/big/'+i+'.png" alt="'+sneakers[i]+'"></div>');
        $('.slider-nav').slick('slickAdd', '<div class="item"><img src="/images/header/sneakers/min/'+i+'.png" alt="'+sneakers[i]+'"><div class="sub">'+sneakers[i]+'</div></div>');
        $('.strings').slick('slickAdd', '<div id="string'+i+'" class="item" ><svg viewBox="-2.5 0.5 16 75"><g transform="rotate(90 0 0)"><text id="text'+i+'"></text></g></svg></div>');
        
        let string   = $('.item[data-slick-index="'+i+'"] .sub').text();
        let firstStr = string.toUpperCase().substr(0,string.length-1);
        let lastStr  = string.toUpperCase().substr(string.length-1, string.length);
        
        let text = document.querySelector("#text"+i);
        text.innerHTML= "<tspan fill='#282828'>"+firstStr+"</tspan><tspan fill='#191919'>"+lastStr+"</tspan>";

        countSlides=i;
    }
});

$(window).on('load',() => {
    for(let i = 0; i<sneakers.length; i++) {
            
        let text = document.querySelector("#text"+i);
        document.querySelector("#string"+i).querySelector("svg").setAttributeNS(null, "viewBox", `-2.5 0.2 16 ${text.getComputedTextLength()}`);  

    }
});

Answer 2

классная и умная функция, которую вы создаете :) Я также пробовал использовать этот кусок кода:

document.onreadystatechange = function() {
    if (document.readyState === 'complete') nameofYourFunction();
};

, но имейте в виду, что это может срабатывать несколько раз (если у вас есть несколько значений ширины настраиваемого шрифта, я думаю), посмотрите также, помогает ли это