nefunkční @font-face ve FF Vyřešeno

[mistr moskva]

Dobrý večer,
chci zobrazit netradiční font na webu prostřednicvím definice css @font-face, viz. http://www.mamtovoku.cz/wp-content/them ... /style.css

Řešení mě funguje v IE, Chrome, ale ne ve FF :/

- font obsahuje v základní verzi (.ttf .otf) háčky a čárky
- font byl převeden na .woff .svg . eot převeden prostřednictvím http://www.fontsquirrel.com

Předem děkuji za jakékoliv rady a podněty :)

[Reklama]

[LuCaCZ]

zkus použít .ttf

[mistr moskva]

Opět dobrý den,
vyzkoušel jsem odkazovat i na ten .ttf ale výsledek bohužel pořád ve FF nefunguje :/

Můj kód je následující:

@font-face {
font-family: 'nadpisy';
src: url('http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/nadpisy.eot');
src: url('http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/nadpisy.eot?#iefix') format('embedded-opentype'),
url('http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/nadpisy.woff') format('woff'),
url('http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/nadpisy.ttf') format('truetype'),
url('http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/nadpisy.svg#nadpisy') format('svg');
font-weight: normal;
font-style: normal;
}

netušíte někdo, kde mám chybu?

Jako konvektor jsem použil http://www.fontsquirrel.com jehož výstupem jsou výše zmíněné formáty a ještě html stránka, která testuje jejich vykreslení. Když tuto stránku otevřu ve FF, potřebný font se zde skutečně vykreslí. Na webu mě to ovšem nefunguje a přítom mám styly napsané úplně stejně.

Předem děkuji za jakoukoliv radu nebo podnět.

--- Doplnění předchozího příspěvku (07 Lis 2012 11:06) ---

Tak jsem zjistil, že mě v tomto případě ve Firefoxu obecně nefunguje změna písma. V body mám nastavený font Verdana, zcela klasickou cestou - funguje to v IE v Chrome, ale ve FF ne. Vůbec nevím kde je chyba.

Na stránkách je implementován Wordpress, mohl by být zde zakopaný pes?

Opět děkuji za Vaše rady a podněty.

[LuCaCZ]

webová konzola ve FF 16.0.2 vypisuje

Kód: Vybrat vše

downloadable font: download failed (font-family: "akafrivolityregular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
source: http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/akafrivolity-webfont.ttf @ http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/style.css

downloadable font: download failed (font-family: "akafrivolityregular" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/akafrivolity-webfont.woff @ http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/style.css

downloadable font: no supported format found (font-family: "akafrivolityregular" style:normal weight:normal stretch:normal src index:4)
source: (end of source list) @ http://www.mamtovoku.cz/wp-content/themes/mamtovoku.cz/style.css

zkus v config.php nastavit

Kód: Vybrat vše

$config['csrf_protection'] = FALSE;

--- Doplnění předchozího příspěvku (07 Lis 2012 20:07) ---

a pardon, to není pro WP

[mistr moskva]

LuCaCZ: Ok. Nic se neděje. Neumím pracovat s výše zmíněnou konzolí a nerozumím tom výstupu.

Myslíte si tedy, že jádrem pudla je wordpress?

[LuCaCZ]

píše se tam, že soubor/font nejde stáhnout - neplatná URI, ale soubor je normálně přístupný - tak v tom asi problém nebude...
nebo pak není povolen cross-site access a to asi přes WP nenastavíš ..

našel jsem jakýsi návod ... takže vytvoř soubor s názvem .htaccess a vlož do něj kód

Kód: Vybrat vše

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

a ulož do složky kde jsou ony fonty

pokud již tam nějaký soubor .htaccess je tak ho o ten kód doplň

[mistr moskva]

Skvělé :)

Funguje to velmi dobře. :) Zkoušel jsem googlit co to dá, ale asi jsem vybíral špatná hesla. Každopádně moc děkuji za Váš čas.