Абсолютный URL-адрес CSS @font-face из внешнего домена: шрифты не загружаются в firefox

Ответ 1

Вы не можете использовать @font-face в Firefox с шрифтом, размещенным в другом домене Если вы хотите указать шрифт для @font-face, используя абсолютный URL-адрес или шрифт, размещенный в другом домене, его необходимо обслуживать с заголовками контроля доступа, в частности заголовком Access-Control-Allow-Origin, установленным на '* 'или домены, разрешенные для запроса шрифта. Это также относится к шрифтам, размещенным в другом поддомене. Если вы используете Apache, вы можете попробовать поместить его в свой .htaccess и перезапустить сервер.

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Ответ 2

Это известное ограничение и фактически является мерой безопасности для предотвращения злоупотреблений на других серверах.

Если у вас есть серверный уровень управления сервером, на котором размещены шрифты, вы можете настроить Apache, чтобы разрешить эти виды соединений. Подробнее об этом: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

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

Ответ 3

Если у вас есть доступ к удаленному серверу, вы можете добавить локальный script, чтобы установить правильные заголовки, например header('Access-Control-Allow-Origin: *');, а затем сбросить файл шрифта. Например, в PHP, например:

(файл fnt.php в той же папке шрифтов)

<?php

    define('FONT_FOLDER','');

    $MIMES=array(
        '.eot'=>'application/vnd.ms-fontobject',
        '.ttf'=>'font/ttf',
        '.otf'=>'font/otf',
        '.woff'=>'font/x-woff',
        '.svg'=>'image/svg+xml',
    );


    $IKnowMime=MimeByExtension(GetExt($s));
    $f=preg_replace('/[^a-zA-Z.0-9-_]/','',$_REQUEST['f']);

/* 
    header("Cache-Control: private, max-age=10800, pre-check=10800");
    header("Pragma: private");
    header("Expires: " . date(DATE_RFC822,strtotime(" 2 day")));
*/    
    header('Content-type: '.$IKnowMime );
    header("Content-Transfer-Encoding: binary");
    header('Content-Length: '.filesize(FONT_FOLDER.$f));
    header('Content-Disposition: attachment; filename="'.$f.'";');

    header('Access-Control-Allow-Origin: *');

    readfile(FONT_FOLDER.$f);

    function GetExt($File) {
        $File=explode('.',$File);
        if(count($File)==1) return '';
        return '.'.$File[count($File)-1];
    }

    function MimeByExtension($ex) {
        global $MIMES;
        $ex=strtolower($ex);
        if(isset($MIMES[$ex])) return $MIMES[$ex];
        else return FALSE;
    }

?>

Затем вы можете использовать следующие шрифты:

<style type="text/css">
@font-face {
    font-family: 'default-font';
    src: url('http://www.website.com/fonts/ultra/fnt.php?f=arial.eot');
    src: url('http://www.website.com/fonts/ultra/fnt.php?f=arial.eot#iefix') format('embedded-opentype'),
         url('http://www.website.com/fonts/ultra/fnt.php?f=arial.woff') format('woff'),
         url('http://www.website.com/fonts/ultra/fnt.php?f=arial.ttf') format('truetype'),
         url('http://www.website.com/fonts/ultra/fnt.php?f=arial.svg#arial') format('svg');
}
</style>

указание файла php вместо файла шрифта и передачу файла шрифта в качестве аргумента ?f=fontfile.woff. Если вы хотите, чтобы параметр FONT_FOLDER указывал на нужную папку. Preg_replace if for security, предотвращая доступ за пределами папки шрифта.

Вы также можете поддерживать определенную форму аутентификации, чтобы убедиться, что вы используете только эти шрифты.

Вы также можете рассмотреть возможность использования некоторого Access-Control-Allow-Origin, кроме "*", чтобы точно указать, кто может получить доступ к вашим файлам шрифтов.

Access-Control-Allow-Origin: http://www.fromthisserverican.com

разрешит доступ с сервера www.fromthisserverican.com, что означает, что все страницы на www.fromthisserverican.com могут использовать шрифты, а страницы на других серверах - нет.

Ответ 4

Вы можете разрешить загрузку ресурсов из поддомена, добавив следующую строку в ваш .htaccess файл

Загрузка ресурсов из поддомена:

# 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>

Загрузка ресурсов из всех других доменов:

# Allow font, js, and css to be loaded from subdomain
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

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

Ответ 5

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Это помогло мне решить проблему.