Külső betűtípusok használata weboldalunkon

A weboldaladon megjelenő betűtípusok, ha nem definiálod őket külön, akkor a böngészőben beállított alap betűtípusok szerint fognak megjelenni.

Például Firefoxban így néz ki az alapértelmezett betűtípus beállítás ablak:

Beállítások->Tartalom->Betűk és színek

Természetesen bármely valamit magára adó weboldal rendelkezik külön stíluslappal (CSS) és előre definiált betűtípusokkal (Font).

De mi van akkor, ha az általam kinézett font nem az Arial, vagy a Times New Roman?

Egyedi fontokat legjobb fontszolgáltatótól beszerezni, és ezt felhasználni honlapunkhoz. Megannyi ingyenes font szolgáltató is létezik a weben, és nem kell hozzá fontot letöltenünk, vagy elhelyeznünk a tárhelyünkön. A betűtípus ugyanis két kód segítségével a weboldalunkba illeszthetőek, és a fontszolgáltató szerveréről fognak betöltődni.

Hogyan változtassam meg a betűtípusokat az oldalamon?

Lássunk egy egyszerű példát!

Van egy index.html és egy style.css fájlunk. A html a tartalomért, a css a kinézetért felelős. Ahhoz, hogy a html értelmezni tudja a css-t, egy kódot kell elhelyeznünk a html fájlban a <head> alá:

Az index fájl ezután így néz ki:

A CSS pedig így:

Rengeteg web font szolgáltató létezik, mint pl. a Google Fonts, vagy az Adobe Typekit.

Google Web Fonts

A Google Web Fonts kezelése és weboldalunkba illesztése rendkívül egyszerű.

A font listában válaszd ki a weboldaladhoz leginkább illő betűtípust, és kattints a Quick use linkre:

Itt a következő opciókat tudod megadni:

A font többféle változatát: normal, bold, italic, vagy bold-italic. Az oldal jelzi, hogy minél több altípust választasz, annál lassabban töltődhet be az oldalad. A példában kétféle vastagságot választottam az oldalhoz, ezt majd a CSS-ben lehet megadni, hogy font-weight: 400 legyen vagy 900.

Meg lehet adni – ha a font lehetővé teszi, hogy speciális karakter készleteket is használj az alapértelmezett Latin mellett.

A következő kódot kell beillesztened a weboldalad index.html -jébe, illetve azon html fájlokba ahol használni szeretnéd pl. a Simonetta nevű fontot:

A következő sort pedig a CSS fájlba kell beírni:

A fájlok a kódokkal tehát:

Mivel van egy fő címünk (<h1>), illetve egy bekezdés szövegünk (<p>), meg lehet adni már betűtípust. Így néznek ki most a fájlok:

HTML:

CSS:

Végül ilyen lett az oldal: http://teszt3.testdomain.hu/

Hozzászólás küldése

Kövess minket!