Google Fonts
Last updated
Last updated
A Google Fonts a Google 2010 óta üzemelő ingyenes webfont szolgáltatása. Hozzávetőleg 900 fontot bocsátanak rendelkezésre, ebből 4-500 font támogatja a magyar ékezeteket.
A Google Fonts-on elérhető fontok a SIL Open Font License hatálya alá esnek, üzleti felhasználásuk is szabad, és ingyenes.
A szolgáltatás az alábbi linken érhető el: https://fonts.google.com/
A Google Fonts-ban számos font található meg (~900), hogy a felhasználó könnyen megtalálja a neki megfelelő fontokat, a Google Fonts rendelkezik keresővel:
Szöveges kereső - itt a fontok nevére, szerzőjére kereshetünk.
Font kategóriák - Kiválaszthatjuk, hogy a találatok között mely kategóriába tartozó fontok jelenjenek meg (lásd általános betűcsaládok).
Rendezés - Rendezhetjük a fontokat név, dátum, népszerűség szerint.
Nyelvek - Támogatott nyelvekre szűrhetünk, a magyar ékezetes fontok szűréséhez a Latin Extended (Latin bővített) karakterkészletet kell kiválasztani.
Szűrés font tulajdonságai alapján - Betűvastagság, variációk száma, vastagság, dőltség, és a karakterek szélessége alapján szűrhetünk.
A font listában próbálhatjuk ki, és hasonlíthatjuk össze a szűrőfeltételeknek megfelelő fontokat.
Font neve, szerzője
Font hozzáadása a kiválasztott fontok közé
Nézet beállításai
Előre definiált szövegek (például számok, karakterek, bekezdés, ...)
Font vastagság választó
Font méret választó
Próba szöveg, itt nézhetjük meg, hogy néz ki szöveg megjelenése az adott fonttal.
Ezzel az opcióval a kiválasztott próbaszöveg beállítást a listában lévő többi fontra is be tudjuk állítani.
Az adott font részletes adatlapjának a megtekintése.
Kiválasztott fontok száma.
Kiválasztott fontok listája, mínuszra kattintva lehet őket eltávolítani.
Kiválasztott fontok letöltése, ez nem webfontot szolgál ki, grafikai programokban lehet használni (Photoshop, Illustrator), vagy rendszerfontként lehet telepíteni az operációs rendszerünkben.
Betöltődési sebesség, minél több fontot választunk ki a projektünkben, annál jobban terheli a felhasználó sávszélességét.
HTML link elem a fontok bekötéséhez, alternatívaként használhatunk @import CSS direktívát (erről bővebben: linkek és CSS import).
A CSS szabályok, amivel HTML elemekre alkalmazhatjuk a betöltött fontokat.
Részletes beállítások
A részletes beállítások alatt választhatjuk ki a fonthoz tartozó vastagság értékeket, és a karakterkészletet (nyelv).
Fontonként kiválaszthatjuk a használni kívánt betűvastagság értékeket:
Magyar ékezethez a Latin Extended karakterkészletre van szükség:
A következő példában a Lobster, és a Roboto fontokat kötjük be egy HTML állományba. A fontokból a magyar ékezetes Latin Extended karakterkészletet használjuk:
Kiválasztott fontok a Google Fonts-on:
HTML állomány:
Az állomány böngészőben megnyitva:
Fontokat a jellel választhatunk ki letöltésre, vagy beépítésre. Ha van kiválasztott fontunk a képernyő alján megjelenik egy ablak (fekete sáv), ezt felnyitva kapjuk meg a lehetséges beállításokat.
