CSS @font-face nie działa z Firefoksem, ale działa z Chrome i IE

Oprócz dodania do twojego .htaccess: (dzięki @ Manuel)

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

Możesz spróbować jawnie dodać typy MIME webfont do .plik htaccess... tak:

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

# 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

Ja też miałem ten problem. Znalazłem odpowiedź tutaj: http://www.dynamicdrive.com/forums/showthread.php?t=63628

To jest przykład rozwiązania, które działa na Firefoksie, musisz dodać tę linię do css font face:

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

Miałem dokładnie ten sam problem. Musiałem utworzyć nowy folder o nazwie "fonts" i umieścić go w wp_content. Mogę uzyskać do niego dostęp z przeglądarki w następujący sposób http://www.example.com/wp-content/fonts/CANDY.otf

Poprzednio folder fonts znajdował się w tym samym katalogu co mój plik CSS, a @ font-face wyglądał tak:

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

Jak wspomniałem powyżej, to nie działa w Firefoksie, ale tylko z Chrome. Teraz działa, ponieważ użyłem absolutnego ścieżka:

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

Zostawię to tutaj, ponieważ mój współpracownik znalazł rozwiązanie związanego z "font-face nie działa na Firefoksie, ale wszędzie indziej" problemu.

Problem polegał tylko na tym, że Firefox namieszał w deklaracji font-family, skończyło się to naprawieniem:

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

PS: używałem również html5boilerplate.

Chciałbym wspomnieć, że niektóre czcionki mają problemy w Firefoksie, jeśli ich nazwa pliku zawiera określone znaki. Ostatnio napotkałem problem z czcionką "Modulus", która miała nazwę pliku "237D7B_0_0". Usunięcie podkreślników w nazwie pliku i aktualizacja css, aby dopasować nową nazwę pliku rozwiązało ten problem. Inne czcionki z podobnymi znakami nie mają tego problemu, co jest bardzo ciekawe...prawdopodobnie błąd w Firefoksie. Polecam zachować nazwy plików tylko do znaków alfanumerycznych.

Miałem ten sam problem. Sprawdź dwukrotnie kod H1, H2 lub jakikolwiek styl, który kierujesz za pomocą reguły @ font-face. Okazało się, że brakuje mi śpiączki po font-family: 'custom-font-family' Arial, Helvetica etc, że wyświetla się dobrze w każdej przeglądarce oprócz Firefoksa. Dodałem śpiączkę i zadziałało.

Dla tej czcionki w szczególności powinieneś używać Google Font API:

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

Jeśli nadal chcesz korzystać z generatora zestawów FontSquirrel, użyj opcji Smiley hack, aby wyeliminować lokalne problemy z czcionką. Po wygenerowaniu zestawu sprawdź, czy wygenerowane demo.html działa w Firefoksie. Założę się, że tak. Teraz prześlij go na serwer -- założę się, że tam też działa, ponieważ FontSquirrel jest zajebisty.

Jednakże, jeśli złamał wygenerowany kod kit podczas integrowania go z projektem, użyj standardowych metod debugowania -- sprawdź dla 404 i idź linia po linii, aż znajdziesz problem. WOFF zdecydowanie powinien działać w FF, więc to dobre miejsce na początek.

Wreszcie, jeśli nic z tego nie działa, zaktualizuj Firefoksa. Napisałem to wszystko zakładając, że używasz najnowszej; ale nie podałeś, w jakiej wersji sprawdzasz, więc to może być twój problem.

Spróbuj osłabić lokalną deklarację źródłową w swoich dyrektywach @font-face.

Jest znany błąd w Firefoksie lub Google Font API, który uniemożliwia użycie wariantów czcionek, jeśli czcionka jest zainstalowana lokalnie i pasuje do zdefiniowanej nazwy lokalnej:

Http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Aby skutecznie osłabić lokalną deklarację, po prostu zrób swój lokalny łańcuch źródłowy jakimś nonsensem. Ogólnie przyjętą konwencją jest aby użyć znaku Unicode smiley ("☺"). Dlaczego? Paul Irish ma świetne Wyjaśnienie na swoim blogu:

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

Miałem dokładnie ten problem z uruchomieniem ff4 na Macu. Miałem uruchomiony lokalny serwer programistyczny i moja deklaracja @ font-face działała dobrze. Migrowałem do live i FF 'flash' poprawny typ przy pierwszym załadowaniu strony, ale podczas nawigacji głębiej czcionkę domyślnie do arkusza stylów przeglądarki.

Znalazłem rozwiązanie polegające na dodaniu poniższej deklaracji do .htaccess

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

Znaleziono przez

Jednym łatwym rozwiązaniem, o którym nikt jeszcze nie wspomniał, jest osadzenie czcionki bezpośrednio w pliku css za pomocą kodowania base64.

Jeśli używasz fontsquirrel.com, w generatorze font-face Kit wybierz tryb ekspercki, przewiń w dół i wybierz Base64 Encode pod opcje CSS - pobrany Font-Kit będzie gotowy do podłączenia i odtwarzania.

Ma to również dodatkową zaletę w postaci skrócenia czasu ładowania strony, ponieważ wymaga jednego żądania http mniej.

Testujesz to w plikach lokalnych czy na serwerze WWW? Pliki w różnych katalogach są uważane za różne domeny dla reguł między domenami, więc jeśli testujesz lokalnie, możesz uderzać w Ograniczenia między domenami.

W Przeciwnym Razie prawdopodobnie pomocne byłoby wskazanie adresu URL, w którym występuje problem.

Sugerowałbym również zajrzenie do konsoli błędów Firefoksa, aby sprawdzić, czy nie zgłoszono żadnych błędów składni CSS lub innych błędów.

Również, chciałbym zauważyć, że prawdopodobnie chcesz font-weight: pogrubienie w drugiej zasadzie @ font-face.

Using an .Kontrola dostępu htaccess Zezwalaj na regułę pochodzenia nie działała dla mnie, gdy miałem do czynienia z tym problemem.

Zamiast tego w IIS w sieci.config Wstaw system.blok serwera www pokazany poniżej.

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

Miałem ten sam problem z poprawnym wyświetlaniem czcionki w Firefoksie. Oto, co znalazłem dla siebie. Dodaj ukośnik przed katalogiem zawierającym czcionkę w atrybucie url. Oto moja wersja przed i po:

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);
}

Zauważyłeś ukośnik przed 'fonts' w adresie url? Oznacza to, że przeglądarka zaczyna od katalogu głównego, a następnie uzyskuje dostęp do zasobu. Przynajmniej dla mnie - Problem rozwiązany.

Możesz sprawdzić w firebug czy masz jakieś 404? Miałem problemy z przejściem i stwierdziłem, że rozszerzenie jest takie samo, ale plik linux.ttf różni się od Pliku.TTF... i to działało ze wszystkimi przeglądarkami z wyjątkiem Firefoksa.

Szkoda, że to pomaga!

Jest to problem z konfiguracją ścieżek font-face. Ponieważ nie rozpoczynasz ścieżki od "/", Firefox spróbuje znaleźć czcionkę na podstawie ścieżki, w której znajduje się arkusz stylów. Zasadniczo Firefox szuka twojej czcionki w katalogu" root/css/font" zamiast katalogu "root / font". Można to łatwo naprawić, przenosząc folder czcionek do folderu css lub dodając / na początku ścieżek czcionek.

Wypróbuj to:

@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";
}

Spróbuj tego....

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

Miałem podobny problem. Strona demo fontsquirel działała w FF, ale nie na mojej stronie, mimo że wszystkie pliki pochodziły z tej samej domeny!

Okazało się, że linkowałem mój arkusz stylów z absolutnym adresem URL (http://example.com/style.css) więc FF uważało, że pochodzi z innej domeny. Zmiana linku do arkusza stylów href na / style.css zamiast tego naprawił rzeczy dla mnie.

Być może Twoim problemem jest kwestia nazewnictwa, szczególnie w odniesieniu do używania (lub nie) spacji i myślników.

Miałem problem z similair, który myślałem, że naprawiłem, umieszczając opcjonalne cudzysłowy (') wokół nazw font- / family-names, ale to w domyśle naprawiło problem z nazewnictwem.

Nie jestem całkowicie na bieżąco w specyfikacji CSS i jest (przynajmniej dla mnie) pewna dwuznaczność w tym, jak różni klienci interpretują specyfikacje. Dodatkowo, wydaje się również, że związane z Konwencje nazewnictwa postscriptowego, ale proszę mnie poprawić, jeśli się mylę!

W każdym razie, jak to teraz rozumiem, twoja deklaracja używa mieszanki dwóch możliwych różnych smaków.

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

Jeśli rozważysz Droid nazwa rodziny, której Sans i Serif są członkami, tak jak na przykład ich dzieci Sans Regular lub Serif Bold, wtedy albo używasz spacji everyhere do konkatinacji identyfikatorów, albo usuwasz spacje i użyj Camelcasingu dla nazwy rodzinnej, a myślniki Dla pod-identyfikatorów.

Zastosowany do Twojej deklaracji, wyglądałby mniej więcej tak:

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

Lub

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

Myślę, że oba powinny być całkowicie legalne, z cytatami lub bez, ale miałem mieszany sukces z tym między różnymi klientami. Może, pewnego dnia, będę miał trochę czasu, aby dowiedzieć się szczegółów na temat tego / tych isseu / s.

Uważam ten artykuł za pomocny w zrozumieniu niektórych aspektów zaangażowani: http://mathiasbynens.be/notes/unquoted-font-family

Ten artykuł zawiera więcej szczegółów na temat PostScriptu, a także kilka linków do specyfikacji Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Nie trzeba mieszać z ustawieniami, po prostu usuń cudzysłowy i spacje z rodziny czcionek:

To

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

Staje się tym

body {font-family: DroidSerifRegular, serif; }

W moim przypadku miałem problem z wstawieniem kodu stylu font-face

<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 w nagłówku twojego indeksu.strona html lub php, w znaczniku style. Mi pasuje!

Z tego powodu jest to jeden z najlepszych wyników Google dla tego problemu chciałbym dodać, co rozwiązało ten problem dla mnie:

Musiałem usunąć format(opentype) z src font-face, potem działał również w Firefoksie. Wcześniej działał dobrze w Chrome i Safari.

Może to być nie z powodu twojego kodu, ale z powodu twojej konfiguracji Firefoksa.

Spróbuj tego z Tool bar Western to Unicode

View > Text Encoding > Unicode

Jeśli próbujesz zaimportować czcionki zewnętrzne, napotykasz jeden z najczęstszych problemów z Firefoksem i innymi przeglądarkami. Jakiś czas Twoja czcionka działa dobrze w google Chrome lub jednej z innych przeglądarek, ale nie w każdej przeglądarce.

Istnieje wiele przyczyn tego typu błędów jednym z największych powodów tego problemu jest wcześniejsza czcionka zdefiniowana. Musisz dodać !ważne słowo kluczowe po zakończeniu każdej linii kodu CSS jako poniżej:

Przykład:

@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;
}

Opis: Wpisz powyższy kod w pliku CSS lub kodzie tutaj. W powyższym przykładzie zamień "hacen Saudi Arabia" na rodzinę czcionek i zamień adres URL zgodnie z katalogiem czcionek.

Miałem ten sam problem i rozwiązałem go dodając meta dla treści:

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

Dzieje się tak w Firefoksie i Edge, jeśli masz teksty Unicode w html.

Nie wiem jak stworzyłeś składnię, ponieważ nie użyłem svg w font declaration, ale Font Squirel ma naprawdę dobre narzędzie do tworzenia wypunktowanej składni font-face z jednej czcionki.

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

Może być również użycie adresu URL w ścieżce znacznika font-face. Jeśli używasz "http://domain.com" nie działa w Firefoksie, dla mnie zmiana na "http://www.domain.com" zadziałało.

Mój problem polegał na tym, że Windows nazwał czcionkę " font.Czcionka TTF 'i firefox'.ttf ' widziałem, że po otwarciu mojego projektu w Linuksie zmieniłem nazwę czcionki na propper name i wszystko działa