Fount je uporabna zadeva, saj nam omogoča enostavno identifikacijo fonta na spletni strani, če slednji seveda ni slika ali skrit flash oziroma video animaciji.

Fount nam sporoči font, ki ga trenutno vidimo na zaslonu, velikost, tip zapisa (weight) in njegov stil.

Preprosta inštalacija oziroma samo zaznamek v naši vrstici s povezavami in že ga lahko uporabljamo. Trenutno deluje v brskalnikih: Safari, Chrome, Firefox, and IE8+.

http://fount.artequalswork.com/

Samo spreminjanje velikosti lahko sicer preprečimo z uporabo CSS značke »html { -webkit-text-size-adjust:none; } ». Problem te rešitve pa je, da ugasne prilagajanje na vseh brskalnikih, ki podpirajo webkit značke. Tako tudi v Safariju ali Chromu funkcija »spremeni velikost besedila« ne bo delovala.

Rešitev tega problema je dokaj enostavna, saj moramo že omenjeni znački dodati pogoj o resoluciji zaslona. Rešitev bi tako bila

Maksimalna širina je nastavljena na 960px zaradi ležečega formata iPhona 4.

FontFonter uporabi posebno CSS kodo s katero zamenja obstoječi font z izbranim Web FontFontom. Praktično orodje za WEB razvijalce in oblikovalce.

http://fontfonter.com/

Internet se hitro razvija in uporaba različnih fontov oziroma nestandardnih fontov prihaja vse bolj v ospredje. Zaradi optimizacij spletnih strani, kopiranja besedila, CMS sistemov, dinamične vsebine pa staromodne metode, kot so slike ali uporaba Flasha ne pridejo več v poštev.

Na trgu imamo, kar nekaj rešitev, vsaka pa ima svoje prednosti in slabosti. Zaradi tega idealne izbere trenutno še ni, tako se mora pač vsak znajti po svoje.

Pregled možnosti

CSS font - Najbolj klasična uporaba fontov preko CSSja, kjer jih lahko tudi prilagodimo svojim potrebam.
+ hiter in učinkovit
- omejeni na standrdne fonte

Zamenjava s sliko - klasična besedila zamenjamo s sliko(s pomočjo CSSja).
+ uporabimo lahko poljuben font, ki ga tudi poljubno oblikujemo
- problemi pri povečevanju in ob izključitvi slik

sIFR - S pomočjo Flasha, Javascripta in CSS zamenjamo klasično besedilo s poljubnim fontom, ki ga lahko tudi prilagodimo svojim potrebam.
+ Podpira različne velikosti in izgleda dobro
- Uporablja Flash tehnologijo, lahko je požrešen, včasih potrebno dobro poznavanje za odpravljanje napakic

Cufón - Tehnika uporablja Javascript, ki pretvori besedilo v vektorje, katere razumejo praktično vsi brskalniki.
+ enostavna uporaba
- problemi pri označevanju besedila, odvisen od -javascripta

@font-face - tu določimo font ali vir fonta na svojem ali zunanjem strežniku.
+ velika izbira fontov
- potrebujemo licenco, težave pri izvedbi, lahko potrebuje dodatne storitve

Google font directory - vir fonta je na zunanjem strežniku
+ enostavna uporaba
- trenutno še majhen nabor fontov

Danes si bomo ogledali Googlvo novo storitev Google Font in njegovo implementacijo. Google font je še ena izmed mnogih rešitev, ki omogočajo WEB designerjem širši izbor fontov pri izdelovanju spletnih rešitev.

Na WEBu smo namreč omejeni z "web-safe" oz. varnimi fonti. Varni fonti so fonti, ki se bodo prikazovali približno enako na vseh računalnikih, ne glede na programsko opremo. Zaradi velike pokritosti pa smo prikrajšani pri številu fontov.

Z vstopom Googla na področje fontov pa se zna igra spremeniti. Google namreč ne zaračunava svojih storitev, kot nekateri drugi ponudniki. Z vstopom Googla na določeno področje pa se ponavadi smernice spremenijo in postavijo novi trendi ali celo standardi (Analytics, Gmail, ...).

Implementacija Google fonta

Uporaba Google font storitve je precej preprosta. Z manjšimi popravki jo lahko implementiramo praktično v vsako spletno stran preko CSS značk. Pa si oglejmo primer uporabe "IM Fell DW Pica".

Koraki implementacije Google fonta

1. Odpremo spletno mesto http://code.google.com/webfonts
2. Izberemo željen font
3. Nato izberemo družino fonta
4. Sledi pregled fonta, kjer v navigaciji kliknemo "Get the code"
5. Na strani "Get the code" potrebujemo dve vrstici kode

   Prvi del nam pripelje izbrani font. Pripnemo ga v "glavo" naše spletne strani.

   <link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>

   Drugi del pa preko CSS značk dodeli nov font izbrani znački. Kodo dodamo CSS stilom, ki so lahko v isti datoteki ali zunanji CSS datoteki.

   h1 { font-family: 'IM Fell DW Pica', arial, serif; }

Poleg enostavne implementacije Google fonta imamo na voljo tudi naprednejše oblike, in sicer uporaba različnih oblik fontov, "preloader" in implementacijo Google fonta preko CSS datoteke.

Pri testiranju sem opazil odstopanja med posameznimi brskalniki in napak pri nalaganju. Poleg začetniških napakic pa je tudi nabor fontov precej slab. Upajmo, da se Google font storitev "prime" in, da dobimo zanesljivo platformo z veliko bazo dodatnih fontov.

Spletna storitev je v Beta različici in brez pretiranega oblikovanja. Na voljo vam je na naslovu http://onlinefontconverter.com/.

Obstaja pa tudi "on-line" storitev, ki nam omogoča izdelavo, deljenje, editiranje in prenos fontov. Storitev se imenuje Font Struct. Proces izdelave je enostaven, potrebujemo registracijo na samo storitev in že lahko ustvarjamo svoje fonte.

fontstruct.fontshop.com

Testni font Pomagalnik_1, ki je bil izdelan v 10 minutah. Prenesi font pomagalnik_1.

Rešitev je uporaba brezplačne storitve »WhatTheFont?!«, ki je del spletne strani www.myfonts.com.

Aplikacija nam omogoča iskanje želenega fonta s pomočjo slike. Sliko lahko prenesemo ali pa posredujemo v obliki URL naslova. Sledi vpisovanje posameznih črk, da potrdimo prikaze na slikah. Zadnji korak je prikaz rezultatov, kjer primerjamo fonte.

Vsi fonti v rezultatih so na žalost plačljivi. Aplikacija ni popolna, kdaj potrebujemo več iskanj ali modifikacije slike, tako da aplikacija lažje bere fonte na sliki(presledki, barve,…), ampak nekje je treba začeti.

Povezava
http://www.myfonts.com/WhatTheFont/