Vyvýjíme aplikaci, která využívá velkou spoustu různých druhů fontů a pro jejich zobrazení jsme se rozhodli využít “novinky” v CSS @font-face. Vše probíhalo bez problému, na localhostu se písma zobrazovali bez jakéhokoliv problému a i po umístění na web vše vypadalo v pořádku. Nicméně jsme zjistili, že v prohlížeči Firefox se fonty nezobrazí. Začal jsem tedy googlit a problém byl osvětlen.
Jedná se o “firefox font-face cross-domain problem”. Zjednodušeně řečeno firefox defaultně zakazuje loading fontu z externího url, respektive i jeho použití na doméně 3. řádu vlastní domény.
Máte-li umístěné fonty v adresáři jonny.cz/FONTS, pak subdoméně xyz.jonny.cz není povolen firefoxem přístup k práci s těmito fonty.
Našel jsem dvě řešení a jen jedno se pro nás ukázalo jako použitelné.
#1 Použití Base64 přímo do CSS – Font je zakódován a uložen přímo do CSS. Řešení je sice plně funkční a při použití jednoho fontu dostačující, bohužel nám dramaticky narůstá velikost našeho style souboru (100kB+ / 1 font). Pro naše použití desítek fontů nemyslitelné řešení.
#2 Apache / Htaccess – Naštěstí se ukázalo, že můžeme mírně upravit nastavení našeho Apache serveru, pomocí htaccess nebo přímo upravit nastavení conf souboru. Díky této úpravě nás již firefox potěší a začne zobrazovat naše @font-face tak jak má.
