Как применить Google Web Font Loader в iframe

Question

Я работаю над фрагментом кода, который загружает Google Fonts динамически.

Часть содержимого этой страницы загружается в iframe (в том же домене). Я изо всех сил пытаюсь загрузить и применить веб-шрифты в iframe. У меня есть доступ как к родительскому документу, так и к фрейму. Вот мой код:

<h1>FONT to test</h1>
<p>Another FONT to test</p>

<iframe src="iframe-content.html"></iframe>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

<script>
    WebFont.load({
        google: {
            families: [ 'Abel' ]
        },

        fontactive: function() {
            $('h1').css('font-family', 'Abel');
        }
    });
</script>

А вот код содержимого iframe:

<h1>IFRAME FONT to test</h1>
<p>IFRAME Another FONT to test</p>

Я попытался использовать переменную context, описанную здесь: https://github.com/typekit/webfontloader

Но мне не удалось заставить это работать.

Заранее спасибо!

Answer 1

Мне удалось выяснить это самому.

WebFont.load({
    google: {
        families: [ 'Abel' ]
    },
    context: window.frames[0].frameElement.contentWindow,
}

Это загрузит шрифт в документе внутри iframe.

Answer 2

По сути, iframe - это его собственная страница, поэтому он не может ничего унаследовать от страницы, на которой находится тег iframe.

Если вы добавите код стиля в iframe-content.html, он должен работать. Вот пример:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<h1>IFRAME FONT to test</h1>
<p>IFRAME Another FONT to test</p>
<script>
    WebFont.load({
        google: {
            families: [ 'Abel' ]
        },

        fontactive: function() {
            $('h1').css('font-family', 'Abel');
        }
    });
</script>