16. august 2010

Tutoriál 5 kúskov kódu: #1 Google Font API

Kto dnes nie je na Facebooku či Twitteri ako by ani nebol. Ja tiež som, a preto som. A vždy, keď nájdem niečo zaujímavé, hneď to niekam zdieľam. V tomto jednoduchom návode sa chcem podeliť o pár kúskov kódu, ktoré vám pomôžu rýchlo zdvihnúť hodnotu webu či blogu.

Dnes vylepšíme typografiu webu za pomoc Google Font API.

Vybral som 5 populárnych služieb, ktoré som sa rozhodol použiť aj na svojom webe. Tutoriál teda v praxi vidíte práve tu.

  1. Pekná typografia s Google Font API
  2. Facebook like gombík
  3. Zdieľanie na Facebook
  4. Skracovanie pomocou bit.ly API
  5. Zdieľanie na Twitter aka “Tweet this”

Implementácia Google Font API

Je viac než jednoduchá.

Do hlavičky vášho webu vložte odkaz na CSS štýl. Jediný parameter family označuje rodinu fontov, ktoré chcete na svojom webe použiť.

<link  href="//fonts.googleapis.com/css?family=Cantarell" 
       rel="stylesheet" type="text/css" />

A teraz už len použiť samotný font v CSS štýle vášho webu. Odporúčam použiť aj text-shadow. Nejako takto:

<style>
h1 {
  font-family: 'Cantarell', serif;
  text-shadow: 2px 2px 2px #aaa;
}
</style>

Paráda, že? Príklad použitia vidíte aj na nadpisoch tohto blogu.

Viac o Google Font API si môžete prečítať tu. Font Previewer, teda aplikáciu, kde si môžete prezerať a skúšať jednotlivé fonty dostupné v Google Fonts Directory nájdete tu.

Zdielať:     Poslať na vybrali.sme.sk

Komentáre k článku [2] rozbaliť ↓ zbaliť ↑

  1. este nech doriesia diakritiku a bude to fajn :)


    — asi    aug 16, 10:49    #
  2. Myslis to, ze niektore fonty nepodporuju slovenske znaky? Ja som si vybral taky, ktory s tym problem nemal.


    faster    aug 16, 15:52    #

Komentáre sú uzatvorené

Volám sa Matúš Marcin a mám tento blog.