Шрифт не загружается заранее при загрузке содержимого Ajax в div (Wordpress)

Question

Я использую функцию JS в Wordpress с Ajax, которая загружает содержимое сообщения в модальный div при нажатии на определенные элементы. Функция JS выглядит следующим образом:

function openProjectModal($that) {

    var post_id = $that.attr("rel");
    window.location.hash = $that.data("slug");
    $("#content-projects").load(localization.ajax_url+"?action=load_more_post&pid="+post_id,{},function(data,status){
        initImageLoad();
    });
    }

Функция, которая создает разметку в functions.php, выглядит следующим образом:

function load_more_post_callback() {
    if( isset($_GET["pid"]) ){
        $post = get_post( $_GET["pid"] );
        if( $post instanceof WP_Post ) {
            echo '<div id="close"></div>';
            echo '<section id="title-projects"><h1>' . get_the_title($post->ID) . '</h1><p class="project-meta">' . get_field("location", $post->ID) . ' (' . get_field("year", $post->ID) . ')</p></section>';
        } else {
            // nothing found with the post id
        }
    } else {
        // no post id
    }
    wp_die();
}

В h1 в новом контенте к нему применен шрифт с помощью CSS, который не используется на начальной странице. Поэтому, когда в div загружается содержимое из вызова Ajax, происходит задержка загрузки шрифта, что выглядит странно. Это идет от пустого, до Times New Roman, к правильному шрифту. Когда я закрываю модальный и открываю новый, шрифт мгновенно загружается, как и должно быть. Я думаю, что он кэшируется с первой загрузки.

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

Я заметил это только в Safari, но было бы неплохо, если бы был обходной путь для этого, даже если это просто особая проблема в Safari. Любые идеи о том, как предварительно загрузить шрифт, прежде чем он будет показан?

Answer 1

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

$(".modal").on.("show", function(){
   addGoogleFont();
});

function addGoogleFont() {
    $("head").append("<link href='https://fonts.googleapis.com/css?family=" + FontName + "' rel='stylesheet' type='text/css'>");
    $(".modal h2").css("opacity", "1");
}

И установите ваш модальный h2 на непрозрачность 0, чтобы вы не видели его до

.modal h2 {
   opacity: 0;
}

Answer 2

В вашем модале просто выполните

<h2 class="myTitleFont">Title</h2>

Затем в css вы можете сделать:

.myTitleFont {
   font-family. "yourFont";
}

или, если действительно, вам нужно:

.myTitleFont {
   font-family: "yourFont" !important;
}

Очевидно, что yourFont - это имя вашего font.