Как правильно загрузить пользовательские шрифты на сайте

Question

Я объявляю собственный шрифт внутри CSS-файла, использую @import и назначаю их элементам:

У меня нет доступа к тегу head сайта, я делаю это в теле...

это не работает.., Мой вопрос, должен ли пользовательский шрифт должен быть объявлен в заголовке страницы для загрузки?

Answer 1

Не используйте @import для файлов css, если это возможно (за исключением определенных обстоятельств, таких как использование @media для разных устройств), так как это может помешать правильной загрузке файлов CSS.

Вы можете объявить тег ссылки для импорта CSS вне тега head, но это может вызвать несколько проблем - в основном, в соответствии со спецификациями W3C, вы должны объявить только link теги в head тэг (т. е. он провалит валидатор W3C). Загрузка его в тело документа также увеличивает время загрузки, так как браузеру приходится перестраивать страницу после загрузки.

Но в теории да, это можно сделать.

Answer 2

Используя jvascript

(function loadCss(url) {
    var link = document.createElement("link"),
        url = "App/components/core-jasmine/jasmine.css";
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
})();