Egoblog.cz - Petr Kobelka

Vlastní fonty na webu

Dnes Vám představím, jak umístit vlastní fonty na web, Výhodou tohoto řešení je, že bnez problémů funguje i v IE10!


Webdesign | Komentáře (1) | Shlédnuto 4988 × | Vloženo: 24. června 2013

Pozor na licence

Předem upozorňuji, že musíte mít k fontu licenci pro embedování na web, jinak se vystavujete možnému právnímu postihu.

Už jsem Vás postrašil, tak jdeme na to.

Font na web

V současnosti můžete umístit font na web dvěma způsoby. První je embedování dostupných fontů, např. z adresy http://www.google.com/fonts/. Druhou cestou je mít vlastní font přímo na webu. Nejste pak závislí na pomalosti linky ze serveru fontů, nebo dokonce jejich výpadku.

Chci mít font u sebe na www

Výborně. Pokud již máte font ve formátech pro web, skočte dolů na kapitolu "Umístění fontu na web". Vy ostatní čtěte dále. Nyní již máte font s potřebnou licencí. Na web ale potřebujete více různých formátů (dle různých prohlížečů). Pravděpodobně máte font s extenzí TTF (možná i nějaký jiný, který se běžně vyskytuje na PC). Tento font potřebujeme konvertzovat do formátů pro web.

Když nevíš coby, pomůže Ti veverka

Na internetu je možné dohledat skvělou službu fontsquirrel.com, která nabízí zdarma nástroj pro konverzi písma pro formát použitelný na webu. Přímo na adrese http://www.fontsquirrel.com/tools/webfont-generator je formulář, do kterého přidáte své písmo a on Vám na oplátku vrátí písmo pro web i s CSS styly pro umístění na Vaše stránky. Doporučuji používat variantu BASIC, nebo OPTIMAL.

  • BASIC - přímá konverze s minimem úprav - výsledek je skvělý, ale font je dost velký
  • OPTIMAL - konverze s určitýmí úpravami, výsledek vypadá dobře a písmo je optimalizované pro umístění na web (minimální nároky na přenosovou kapacitu apod.)

Jako výsledek dostanete balík ZIP s touto strukturou

  • Free Fonts.URL - referenční adresa, toto zahoďtě
  • fonts.css - soubor s CSS pro vložení písma do vašich webů
  • demo.html - ukázka písma, toto také zahoďtě
  • fonts - složka s vytvořenýmí fonty pro web - tohle umístětě na svoje stránky, někam, kde máte CSS soubory

Umístění fontu na web

Potřebujete z balíku soubor fonts.css a složku fonts. obojí umístět na webu tam, kde máte CSS soubory.

Informace v css souboru vypada asi takto:

@font-face {
font-family: 'My_Font';
src: url('fonts/My_Font.eot');
src: local('☺'), url('fonts/My_Font.woff') format('woff'), url('fonts/My_Font.ttf') format('truetype'), url('fonts/My_Font.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Použití písma ve Vašem CSS už je pak jednoduché. Např.

*{
font-family:"My_Font";
}
Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

Petr Kobelka
Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

Komentáře

E-mail je potřeba pouze pro vygenerování Gravataru!

1
LC | vloženo 25. března 2015
Ahoj,
prosím tě mám dotaz…
Pokud chci použít do aplikace nebo na web jakýkoli z "webových google free fontů", potřebuji k nim licenci když je budu provozovat veřejně nebo ne?
Moc díky,
L
Petr Kobelka
Ahoj Lucko,

pokud chceš použít font na webu, potřebuješ k němu licenci (pokud není výslovně uvedeno jinak). Velkou výhodou je, že je mnoho fontů, které jsou k dispozici zdarma a vypadají skvěle. Zkus se podívat např. sem http://www.google.com/fonts.

Blog píše Petr Kobelka

Petr Kobelka - egoblog.cz

Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.