Шрифты @font-face работают только в собственном домене

Я пытаюсь создать тип репозитория шрифтов для использования на своих сайтах, чтобы я мог вызывать любой шрифт в репозитории в моем css без какой-либо другой настройки. Для этого я создал субдомен, на котором я разместил папки для каждого шрифта в репозитории, который содержал различные типы файлов для каждого шрифта. Я также разместил css файл с именем font-face.css в корне субдомена и заполнил его объявлениями @font-face для каждого из шрифтов, шрифты связаны с абсолютной ссылкой, чтобы их можно было использовать из любой точки.

Моя проблема в том, что кажется, что я могу использовать только шрифты в этом поддомене, где они расположены, а на других моих сайтах этот шрифт не отображается. Используя firebug, я решил, что файл font-face.css успешно связан и загружен. Так почему шрифт неправильно загружается? Есть ли защита файлов шрифтов или что-то еще? Я использую все шрифты, с которыми мне разрешено делать это, поэтому я не понимаю, почему это происходит. Возможно, это проблема с apache, но я могу загрузить шрифт очень хорошо, когда я ссылаюсь на него.

О, и просто для того, чтобы уточнить, я не нарушаю никаких авторских прав, установив это, все шрифты, которые я использую, имеют лицензию на разрешение такого рода вещей. Тем не менее я хотел бы настроить способ, которым только я могу получить доступ к этому репозиторию шрифтов, но этот другой проект.

Ответ 1

Это связано с тем, что Firefox (из вашего упоминания Firebug) считает, что кросс-доменный, даже субдомен, встраивание веб-шрифтов - плохая идея.

Вы можете убедить его загрузить шрифты из вашего поддомена, добавив его в файл верхнего уровня .htaccess для поддомена, в котором используются ваши шрифты (обновлено для адаптации кода из того же файла в HTML5 Boilerplate):

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

В ответ на это:

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

Спецификация W3C для Access-Control-Allow-Origin не говорит ничего больше, как подстановочный знак "*" или определенный домен. До сих пор я нашел этот SO ответ, который предлагает проверить заголовок Origin, но я думаю, что заголовок только для Firefox. Я не уверен в других браузерах (им не нужен трюк .htaccess выше для работы междоменных веб-шрифтов).

Ответ 2

Еще один способ исправить это в Firefox - это встроить шрифт непосредственно в файл css с использованием кодировки base64. Особенно замечательно, если у вас нет доступа к некоторым из упомянутых выше конфигураций.

Вы можете создать необходимый код на fontsquirrel.com: в генераторе Kit шрифта выберите экспертный режим, прокрутите вниз и выберите Base64 Encode в разделе "Параметры CSS" - загруженный Font-Kit будет готов к подключению и воспроизведению.

Это также имеет преимущество для уменьшения времени загрузки страницы, потому что для этого требуется еще один HTTP-запрос.

Ответ 3

Если вы не хотите разрешать ресурсы из всех доменов, но только из поддомена вашего сайта, вы должны сделать это так:

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
    </FilesMatch>
</IfModule>

Источник: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

Ответ 4

Используя http://www.fontsquirrel.com/fontface/generator в режиме "эксперта" и выбрав base64 в качестве опции, вернули stylesheet.css с необходимыми закодированными данными base64 для использования в нашей таблице стилей. Кажется, он работает во всех браузерах, которые мы тестировали, кроме IE8.

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

Спасибо за помощь всем!