CSS @ font-face не працює з Firefox, але працює з Chrome та IE

Наступний код працює в бета-версії Google Chrome, а також IE 7. Однак, схоже, у Firefox це проблеми. Я підозрюю, що це проблема в тому, як включаються мої файли CSS, оскільки я знаю, що Firefox не надто дружній щодо імпорту міждоменних доменів.

Але це все лише статичний HTML, і про перехресний домен немає.

На моїй target-page.html я імпортую CSS так:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

У main.css у мене є ще один імпорт:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

і в межах type.css у мене є такі декларації:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

У мене каталог з назвою "шрифт" у тому самому місці, що і type.css. Цей каталог шрифтів містить усі файли woff / ttf / svg тощо.

Я натупився на цьому. Він працює в Chrome і IE, але не у Firefox . Як це можливо? Що я пропускаю?

МІСЦЕВО РАБОТИ САЙТ ( file:///)

Firefox file:///за замовчуванням постачається з дуже суворою політикою "file uri origin" ( ): щоб він поводився так само, як інші веб-переглядачі, перейдіть about:config, фільтруйте fileuriта перемикайте такі налаштування:

security.fileuri.strict_origin_policy

Встановіть значення false, і ви зможете завантажувати локальні ресурси шрифту на різних рівнях шляху.

Опублікований сайт

Відповідно до мого коментаря нижче, і у вас виникає ця проблема після розгортання вашого веб-сайту, ви можете спробувати додати додатковий заголовок, щоб побачити, чи ваша проблема конфігурується як проблема міждоменного сайту: цього не слід, оскільки ви вказуєте відносні шляхи, але я б спробував це все одно: у вашому .htaccess файлі вкажіть, що ви хочете надіслати додатковий заголовок для кожного .ttf / .otf / .eot файла, який запитується:

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

Чесно кажучи, я б не очікував, що це змінить щось, але це так просто, варто спробувати: інакше спробуйте використовувати кодування base64 для вашого шрифту, некрасиво, але це також може працювати.

Приємний резюме доступний тут

На додаток до цього .htaccess: (спасибі @Manuel)

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

Ви можете спробувати явно додати типи mime веб-шрифту до файлу .htaccess ..., як це:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Врешті-решт, мій .htaccess файл виглядає приблизно так (для розділу, який дозволяє веб-шрифтам працювати у всіх браузерах)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

У мене теж була ця проблема. Тут я знайшов відповідь: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Це приклад рішення, яке працює на firefox, вам потрібно додати цю лінію до css face:

src: local(font name), url("font_name.ttf");

Я просто залишу це тут, тому що мій колега знайшов рішення для пов’язаної проблеми "шрифт не працює над Firefox, а скрізь".

Проблема полягала лише в тому, що Firefox зіпсував декларацію сімейства шрифтів, і це врешті виправилося:

body{ font-family:"MyFont" !important; }

PS: Я також використовував html5boilerplate.

У мене була така ж проблема. Двічі перевірте код на H1, H2 або будь-який стиль, на який ви орієнтуєтесь за допомогою правила @ font-face. Я виявив, що мені не вистачає коми після того, як font-family: 'custom-font-family' Arial, Helvetica etcвона виявлялася чудово у кожному браузері, окрім Firefox. Я додав кому і воно спрацювало.

У мене була точно така ж проблема. Мені довелося створити нову папку під назвою "шрифти" і помістити її в wp_content. Я можу отримати доступ до нього зі свого браузера, як-от цього http://www.example.com/wp-content/fonts/CANDY.otf

Раніше папка шрифтів знаходилась у тому самому каталозі, що і мій CSS-файл, а @ font-face виглядав так:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Як я вже згадував вище, це працює не в Firefox, а лише в Chrome. Зараз це працює, тому що я використовував абсолютний шлях:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

У мене була саме ця проблема під керуванням ff4 на mac. У мене працював локальний сервер розвитку, і моя декларація @ font-face працювала чудово. Я перейшов до режиму "живий", і FF буде "спалахувати" правильний тип під час завантаження першої сторінки, але під час навігації глибше шрифт за замовчуванням до таблиці стилів браузера.

Я знайшов рішення в тому, щоб додати наступну декларацію до .htaccess

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

знайдений через

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

Якщо ви використовуєте fontsquirrel.com, у шрифтовому генераторі Kit Generator виберіть експертний режим , прокрутіть униз і виберіть Base64 Encode у розділі Параметри CSS - завантажений Font-Kit буде готовий підключити та відтворити.

Це також має перевагу у зменшенні часу завантаження сторінки, оскільки для цього потрібен один менше http-запит.

Я зазначу, що деякі шрифти мають проблеми у firefox, якщо їх ім'я файлу містить конкретні символи. Нещодавно у мене виникли проблеми із шрифтом "Modulus", який мав ім'я файлу "237D7B_0_0". Видалення підкреслень у імені файлу та оновлення css до нової назви файлу вирішили цю проблему. Інші шрифти з подібними символами не мають цієї проблеми, що дуже цікаво ... ймовірно, помилка у Firefox. Я рекомендую зберігати назви файлів лише для буквено-цифрових символів.

Зокрема, для цього шрифту ви повинні використовувати API шрифту Google:

http://code.google.com/webfonts/family?family=Droid+Sans

Якщо ви все ще хочете використовувати генератор комплектів FontSquirrel, використовуйте параметр Smiley hack для усунення локальних проблем з шрифтом. Після створення набору перевірте, чи створений demo.html працює у FireFox. Б'юсь об заклад, що так і є. Тепер завантажте його на свій сервер - я думаю, що він працює і там, оскільки FontSquirrel є приголомшливим.

Однак якщо ви зламали згенерований код набору під час інтеграції його у свій проект, використовуйте стандартні методи налагодження - перевірте 404 та йдіть по рядку, поки не знайдете проблему. WOFF обов'язково повинен працювати у ФФ, так що це хороше місце для початку.

Нарешті, якщо нічого з цього не працює, оновіть FireFox. Я написав усе це, припускаючи, що ви використовуєте останнє; але ви не вказали, у якій версії ви реєструєтесь, так що це може бути і вашою проблемою.

Спробуйте заглушити декларацію локального джерела у своїх @font-faceдирективах.

У Firefox або API Google Font є відома помилка, яка не дозволяє використовувати варіанти шрифтів, якщо шрифт встановлено локально, і відповідає визначеній локальній назві:

http://code.google.com/p/googlefontdirectory/isissue/detail?id=13

Для ефективного глухування місцевої декларації просто зробіть місцевий рядок джерелом якусь нісенітницю. Загальноприйнятою умовою для цього є використання усміхненого символу unicode ( "☺"). Чому? Пол Ірландський має чудове пояснення у своєму блозі:

http://paulirish.com/2010/font-face-gotchas/#smiley

Ви тестуєте це в локальних файлах чи поза веб-сервером? Файли в різних каталогах вважаються різними доменами для правил міждоменних, тому, якщо ви тестуєте локально, ви можете вплинути на обмеження міждоменних доменів.

В іншому випадку, ймовірно, допоможе вказати на URL-адресу, де виникає проблема.

Крім того, я б запропонував переглянути консоль помилок Firefox, щоб побачити, чи повідомляються про якісь синтаксичні помилки CSS чи інші помилки.

Також зауважу, що ви, мабуть, хочете шрифтової ваги: ​​жирний у другому правилі @ font-face.

Використання правила контролю доступу дозволу .htaccess для мене не працювало, коли я стикався з цією проблемою.

Замість цього в IIS в web.config вставляйте блок system.webServer, показаний нижче.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Це спрацювало як шарм для мене. Якщо вам потрібно обмежити доступ до певного домену, замініть * на домен.

У мене виникли ті ж проблеми з отриманням шрифту для належного відображення у Firefox. Ось, що я виявив, що працює для мене. Додайте косу рису перед каталогом, що містить шрифт в атрибуті url. Ось моя до і після версій:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

помітите провідну косу рису перед "шрифтами" в URL-адресі? Це повідомляє браузеру починати з кореневого каталогу і потім отримувати доступ до ресурсу. Принаймні для мене - проблема вирішена.

Якщо ви намагаєтеся імпортувати зовнішні шрифти, ви стикаєтесь із однією з найпоширеніших проблем у вашому Firefox та іншому браузері. Деякий час ваш шрифт добре працює в Google Chrome або в іншому веб-переглядачі, але не в кожному браузері.

Причин такого типу помилок є багато, одна з найбільших причин цієї проблеми - попередній визначений шрифт. Вам потрібно додати важливе ключове слово після закінчення кожного рядка коду CSS, як показано нижче:

Приклад:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Опис: Введіть тут вище код у свій CSS файл або код. У наведеному вище прикладі замініть "Hacen Saudi Arabia" на сімейство шрифтів та замініть URL відповідно до каталогу шрифтів.

Якщо ви введете! Детальніше відвідайте: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Чи можете ви перевірити в Firebug, якщо ви отримаєте 404? У мене виникли проблеми в проході, і я виявив, що розширення було таким же, але Linux file.ttf відрізняється від file.TTF ... і він працював з усіма браузерами, крім firefox.

Бажаю, щоб це допомагало!

Це проблема з налаштуванням контурів шрифту-обличчя. Оскільки ви не розпочали шлях із "/", Firefox спробує знайти шрифт на основі шляху, до якого вказується таблиця стилів. Отже, Firefox шукає ваш шрифт у каталозі "root / css / font" замість каталог "root / font". Це можна легко виправити, перемістивши папку шрифтів у папку css, або додавши / до початку шляхів шрифту.

Спробуйте це:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

Спробуйте це....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

У мене була подібна проблема. Демонстраційна сторінка fontsquirel працювала у FF, але не моя власна сторінка, хоча всі файли надходили з одного домену!

Виявилося, що я пов'язую свій таблицю стилів з абсолютною URL-адресою (http://example.com/style.css), тому FF подумав, що він надходить з іншого домену. Змінюючи посилання href моєї таблиці стилів на /style.css, замість цього виправили речі.

Можливо, ваша проблема - це питання іменування, зокрема щодо використання (чи ні) пробілів та дефісів.

У мене виникли випуски similair, які, як я думав, я виправив, розміщуючи необов'язкові лапки (') навколо імен шрифту / прізвища, але це насправді неявно виправляло проблему з називанням.

Я не зовсім сучасний щодо специфікації CSS, і є (як мені зрозуміло) деяка неоднозначність у тому, як різні клієнти трактують характеристики. Крім того, схоже, це стосується і умов іменування PostScript, але, будь ласка, виправте мене, якщо я помиляюся!

Як би я не зрозумів зараз, у вашій декларації використовується суміш двох можливих різних ароматів.

@font-face {
  font-family: "DroidSerif Regular";

Якщо ви вважаєте Droid власне прізвище, членом якого є Sans і Serif , як, наприклад, їхні діти Sans Regular або Serif Bold , ви або використовуєте пробіли скрізь для конкретизації ідентифікаторів, або ви видаляєте пробіли та використовуєте CamelCasing для прізвище сім'ї та дефіси для субідентифікаторів.

Застосовано до вашої декларації, це виглядатиме приблизно так:

@font-face {
  font-family: "Droid Serif Regular";

АБО

@font-face {
  font-family: DroidSerif-Regular;

Я думаю, що обидва повинні бути абсолютно законними, з цитатами або без них, але я мав змішаний успіх з цим між різними клієнтами. Можливо, одного дня у мене є час, щоб розібратися в деталях цього / цих isseu / s.

Ця стаття виявилася корисною для розуміння деяких аспектів: http://mathiasbynens.be/notes/unquoted-font-family

У цій статті є додаткові відомості про PostScript, а також деякі посилання на специфікацію PDF із специфікацією Adobe: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Не потрібно возитися з налаштуваннями, просто видаліть цитати та пробіли з сімейства шрифтів:

це

body {font-family: "DroidSerif Regular", serif; }

стає цим

body {font-family: DroidSerifRegular, serif; }

У моєму випадку я вирішив проблему із вставкою коду стилю шрифту

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty у заголовку на сторінці index.html або php, у теговому стилі. Для мене працює!

Через це це один із найкращих результатів Google для цієї проблеми, я хотів би додати те, що вирішило цю проблему для мене:

Мені довелося видалити формат (opentype) з src шрифту, тоді він працював і у Firefox. До цього він добре працював у Chrome та Safari.

Може бути, це не ваш код, його через вашу конфігурацію Firefox.

Спробуйте це від Tool bar Western до Unicode

View > Text Encoding > Unicode

У мене була та сама проблема, і я вирішив її, додавши мета для вмісту:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

Це відбувається в Firefox та Edge, якщо у вашому HTML є тексти Unicode.

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

http://www.fontsquirrel.com/fontface/generator

Можливо також використання URL-адреси в шляху тегу шрифту-обличчя. Якщо ви використовуєте "http://domain.com", він не працює у Firefox, для мене це змінило на "http://www.domain.com".

Моя проблема полягала в тому, що Windows назвала шрифт 'font.TTF', а firefox очікував 'font.ttf'. Я побачив, що після відкриття свого проекту в Linux перейменував шрифт на ім'я проппера і все працює