A következő tanfolyam indul

2018. január 18.
00

Google webfontok – Te is használod őket?

Betűtípus témában keresgélsz? Fontot keresel weboldalra? Ismered a Google Fonts oldalt? Még nem? Akkor azért olvasd el a bejegyzésünket! Ha már ismered, akkor meg azért! :)

A Webdesign Tanfolyamon WordPress alapú weboldalakat készítünk WordPress sablonok egyedire szabásával. Ezek a WordPress sablonok alapértelmezett fontot, fontokat tartalmaznak, illetve vannak olyan sablonok (jellemzően a fizetős verziók), melyek lehetővé teszik, hogy a felkínált betűtípusok közül mi választhassuk ki az alkalmazni kívánt fontokat a különböző címsorokhoz, törzsszöveghez, menüsorhoz, stb.

Ha Te mégis egyedi betűtípust szeretnél viszontlátni a weboldaladon, akkor ez is megoldható, méghozzá Google webfontok segítségével.

A Google Fonts szolgáltatás mindenki számára elérhető, mely ingyenesen beszerezhető, személyes és kereskedelmi célra egyaránt felhasználható fontokat kínál. Webfontokról, webre szánt betűtípusokról van szó, melyek legfőbb előnye, hogy böngészőfüggetlenek, tehát nem kell aggódnunk, hogy egyik-másik böngészőben más, behelyettesített betűtípusokkal jelennek meg a szöveges tartalmak a weboldalon, további előnyük, hogy a honlapon alkalmazott fontokat nem kell például sem a számítógépünkön, sem a tárhelyünkön tárolnunk.

A Google fontok oldalán számos szűrő alapján keresgélhetünk (pl. betűcsalád szerint; melyik nyelv karaktereit tartalmazza; stílus alapján, stb).

googlefonts1

 

Az adott betűtípusnál láthatjuk a karaktereket, a szedési stílusokat, az „árvíztűrő tükörfúrógép” szó beírásával leellenőrizhetjük, hogy tudja-e kezelni magyar ékezetes karaktereket, továbbá érdekességeket is olvashatunk róla, és más fontokkal való párosítására is láthatunk példákat.

googlefonts2

 

Ha tehát biztosra szeretnél menni, akkor Google webfontot ágyazol be a honlapra! Hogy ezt hogyan is kell?

Tarts velünk a webdesign tanfolyamon, és megmutatjuk! :)

 

BÓNUSZ

Mivel a Google Fonts oldalon több mint 800 féle betűtípus között válogathatnunk, így nem is olyan egyszerű megtalálni a számunkra/a weboldalunk számára ideálisakat, ezért összeszedtünk néhány olyan eszközt, felületet, melyek segítségünkre lehetnek a válogatásban. :)

 

Find great Google Fonts

A felület specialitása az, hogy nem betűcsaládok, betűtípusok alapján keresgélhetünk a Google webfontok között, hanem vizualitás, vizuális hasonlóság alapján. A bal oldalon található szűrési lehetőségek alapján szűkíthetjük a betűtípusokat: például kiindulhatunk talpatlan fajtákból, majd kiválasztjuk, hogy inkább kerekded karakterek legyenek a betűkészletben. A szűrést követően kiválaszthatjuk a számunkra megfelelő betűtípust, egy kattintással pedig el is navigálhatunk a Google Fonts oldalára, hogy weboldalunkba is be tudjuk ágyazni.

Find-great-Google Fonts-1

Find-great-Google Fonts-2

Find-great-Google Fonts-3

Find-great-Google Fonts-4

 

IDEO Font map

Ez egy több, mint 750 betűtípust tartalmazó interaktív térkép. Ezen a térképen A betűket láthatunk, különböző betűtípusokkal szedve. Ha az egeret az adott A betű fölé visszük, akkor láthatjuk az adott betűtípus nevét, ha rá is kattintunk az A betűre, akkor a bal oldali sávban láthatjuk a hasonló betűtípusokat is. Ezek a betűtípusok szintén Google fontok, tehát ezeket is be tudjuk illeszteni a Google Fonts oldaláról a saját honlapunkra.

ideofontmap

 

Fontjoy

Ez a felület már a betűk keverésében, párosításában is a segítségünkre van. A betűtípusok közötti kontraszt alapján tudjuk összekombinálni egymással a különböző betűtípusokat. Google fontok, tehát a Google Fonts oldalról be tudjuk őket tölteni a weboldalra.

fontjoy

 

Láttál az egyik weboldalon egy jó fontot, de nem tudod, hogy mi a neve?

Ennek kiderítéséhez használd ezt:

FontFaceNinja

Ez valójában egy bővítmény, melyet a böngészőnkhöz tudunk illeszteni. Segítségével egy adott weboldal szöveges tartalmait „járhatjuk át”, a bővítmény egy kis ablakban megmutatja nekünk, hogy melyik betűtípussal van szedve az adott szöveges tartalom a honlapon, a betűtípus mellett a betű méretét és színét (továbbá a sortávolságot és a betűközt) is megmutatja nekünk. Rákattintva az adott szövegre, egy új ablak is megnyílik, ahol saját szöveggel is kipróbálhatjuk az adott betűtípust.

FontFaceNinja1

FontFaceNinja2

 

Saját betűtípusra vágysz?

Calligraphr

Saját betűkészlettel is előállhatunk. :) Egy sablont kell kitöltenünk a saját írásunkkal, majd a saját betűinkből, írásunkból a szoftver leképezi a saját, egyedi betűinket, melyeket az alkalmazás segítségével tovább szerkeszthetünk, tökéletesíthetünk, és saját ligatúrákat is létre hozhatunk, majd ezeket bármilyen eszközön elérjük (pro fiók esetén).

call1

call2

call3

call4

 

 

A saját kézírásunk digitalizálásával, vektorizálásával egyik korábbi bejegyzésünkben foglalkoztunk:

Hogyan digitalizáljuk vektorrá a kézzel készített rajzainkat, kézírásunkat?

 

TIPP: a Google Fonts oldalról nem lehet letölteni magát a betűfájlt, tehát nem fontletöltő oldalként működik, hogy az adott betűtípust a számítógépünk betűkészletébe is telepítsük. Azonban ha megtetszik egy webfont, de grafikai munkádhoz szánnád, akkor keress rá a Google-ban, ugyanis nagy valószínűséggel megtalálod valamelyik fontletöltő oldalon (pl. dafont.com) is. :)

Hozzászólások