Ez a cikk mindenkinek szól, a kezdőktől a legtapasztaltabb webfejlesztőkig. Láttam évtizedes tapasztalattal rendelkező Senior Web Developereket, akik figyelmen kívül hagyják a betűtípusokat és nem kezelik őket megfelelően, ezért kérem, olvasson tovább.

Néhány sor elolvasása után a helyes @font-face-t és CSS-t fogja használni, amelyek minden böngészőben megfelelően működnek.

Weboldala úgy fog kinézni és működni, ahogy kell, minden eszközön.

Mik azok a font face-ek?

Feltételezem, hogy ezt már tudja, különben nem olvasná ezt a cikket.

Az információ kedvéért azonban a @font-face lehetővé teszi, hogy specifikus betűtípusokat ágyazzunk be egy weboldalra anélkül, hogy a távoli felhasználónak telepítve kellene lenniük a rendszerén.

Az elérhető betűtípusok: “.woff”, “.woff2”, “.ttf”, “.otf”, “.eot” és “.svg”.

  • .woff a Web Open Font Format rövidítése
  • .woff2 a WOFF 2.0 - Web Open Font Format rövidítése
  • .ttf, .otf a TTF/OTF - TrueType és OpenType rövidítése
  • .eot az EOT - Embedded OpenType rövidítése
  • .svg az SVG betűtípusok rövidítése

Minden böngészőnek megvan a “saját” támogatása ezekhez a típusokhoz (sajnos), ezért ezt figyelembe kell venni.

Ha azt szeretné, hogy oldalai minden eszközön és böngészőben ugyanúgy nézzenek ki, szüksége van az összes fenti formátumra.

Hogyan használjuk helyesen a Font Face-t?

Itt jön a trükkös rész, mert ha erről guglizik, még a top weboldalak sem mutatják meg a kemény valóságot.

Ahogy fent említettem, minden böngészőnek megvan a saját betűtípus-támogatása, és ha azt szeretné, hogy betűtípusa minden böngészőben működjön, be kell töltenie a szükséges betűtípusokat és ennek megfelelően kell beállítania a CSS-t.

Ha például megnézzük a Mozilla -t, a következőt fogjuk látni:

1@font-face {
2font-family: "Open Sans";
3src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

Ez elég? Nem, ez nem fog működni minden böngészőben. Például ez egyáltalán nem fog működni Internet Explorerben.

Ellenőrizheti a https://caniuse.com/?search=woff2 oldalon és maga is meggyőződhet.

Egy másik példa, ha megnézzük a W3 Schools -t:

1@font-face {
2font-family: myFirstFont;
3src: url(myFirstFont.woff);
4}

Ez helyes? Még mindig nem, nem támogatja az összes böngészőt.

Az összes böngésző támogatásához a betöltött betűtípusoknak és CSS-nek így kell kinéznie:

 1@font-face {
 2font-family: 'FONT';
 3src: url('FONT.eot'); /_ IE9 Compat Modes _/
 4src: local(''),
 5url('FONT.eot?#iefix') format('embedded-opentype'), /_ IE6-IE8 _/
 6url('FONT.woff2') format('woff2'), /_ Super Modern Browsers _/
 7url('FONT.woff') format('woff'), /_ Modern Browsers _/
 8url('FONT.ttf') format('truetype'), /_ Safari, Android, iOS _/
 9url('FONT.svg#FONT') format('svg'); /_ Legacy iOS _/
10}

Figyelje meg a megjegyzéseket minden betűtípusnál, magukért beszélnek. Ez támogatja az összes böngészőt, és a betűtípus megfelelően jelenik meg.

Hogyan konvertáljunk és generáljunk Font Face típusokat?

Ha egy ügyfélnek fejleszt weboldalt, általában egy betűtípust fog kapni. Ez általában csak .otf vagy .ttf formátum, ami nem elég.

Szüksége van az összes szükséges formátumra az összes böngészőhöz, ezért ezeket a megfelelő @font-face típusokká kell konvertálnia.

Szerencsénkre vannak online eszközök, amelyek ezt automatikusan elvégzik és még a helyes CSS-t is generálják (fejlődtünk vagy sem).

Fizetős/egyedi betűtípusok konvertálása

A Transfonter használatát ajánlom, de természetesen bármelyik eszközt használhatja.

Ez az ingyenes online eszköz konvertálja a betűtípust és használatra kész betűtípusokat és CSS-t biztosít:

 1@font-face {
 2font-family: 'Sample';
 3src: url('Sample.eot');
 4src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5url('Sample.woff2') format('woff2'),
 6url('Sample.woff') format('woff'),
 7url('Sample.ttf') format('truetype'),
 8url('Sample.svg#Sample') format('svg');
 9font-weight: normal;
10font-style: normal;
11}

Ingyenes/nyílt forráskódú betűtípusok konvertálása

Egy másik esetben, amikor az ügyfél nem ad fizetős betűtípust, hanem egy ingyenes Google Font-ot, erre is van eszköz: https://google-webfonts-helper.herokuapp.com/fonts .

Ez az eszköz szintén generálja a típusokat és CSS-t, amelyek szükségesek a betűtípusok helyes megjelenítéséhez minden böngészőben.

Erősen ajánlom, hogy ellenőrizze a kapott betűtípusokat különböző böngészőkben.

Hogyan használjuk helyesen a Font Family-ket?

Biztosan fogadok, hogy soha nem használta optimálisan a font family specifikációt. A helyes font face betöltése nem elég, fallback betűtípusokat is meg kell adni.

A fallback betűtípusok akkor használatosak, amikor az aktuális betűtípus nem elérhető. Ez több okból is megtörténhet, CDN problémától a hálózati időtúllépésig.

Észre fogja venni, hogy a legtöbb CMS így definiálta a fallback betűtípusokat:

1html {
2font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

Ez elég? Hát nem. Sajnos a rendszer betűtípusai nem azonosak minden eszközön. A Windowsnak megvan a sajátja, az Androidnak megvan a sajátja, az iOS-nek szintén és így tovább.

Tehát mit tegyünk? Deklaráljuk őket megfelelően, nézzük meg hogyan csinálja a Bootstrap :

 1// Safari for OS X and iOS (San Francisco)
 2-apple-system,
 3// Chrome < 56 for OS X (San Francisco)
 4BlinkMacSystemFont,
 5// Windows
 6"Segoe UI",
 7// Android
 8"Roboto",
 9// Basic web fallback
10"Helvetica Neue", Arial, sans-serif,
11// Emoji fonts
12"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

A fentieket egyedi betűtípusokkal használva az eredmény a következő lenne:

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Ez egy elegáns módja a fallback betűtípusok kezelésének, biztosítva, hogy weboldala minden eszközön jól nézzen ki, amíg a betűtípusok töltődnek (vagy egyáltalán nem töltődnek be).

Font Face és Font Family tesztelése

Ne ijedjen meg a tesztelés szótól, ez nagyon egyszerű folyamat, ha okosan dolgozik. Nem is kell manuálisan megvizsgálnia az oldalt, hogy megtudja, melyik betűtípus töltődött be (ha lusta).

Ahogy a technológia fejlődik, úgy fejlődnek a fejlesztők számára elérhető eszközök is; egyre könnyebbé téve a dolgokat.

Annak ellenőrzése, hogy a @font-face és font-family helyesen töltődik-e be, nagyon egyszerű folyamat, lásd alább.

Font Face és Font Family ellenőrzése

  1. Használjon böngészőbővítményt, hogy könnyen lássa, milyen betűtípust használ az oldala:
  1. Szerkessze az oldalát és “törje el” a @font-face-t, szimulálva azt az esetet, amikor az egyedi betűtípus nem töltődik be. A betöltést “eltörheti” a betűtípus nevének vagy URL-jének megváltoztatásával, amely nem létező betűtípusra mutat.
  2. Az eredménynek az első olyan betűtípusnak kell lennie, amely megfelel az eszközének, mint fallback. Például Apple eszközön ez “-apple-system” legyen.

Tippek és trükkök

  • Használja a “preconnect” HTML link header taget, ha CDN-ről tölt be betűtípusokat.
  • Minden betűtípus deklarációnál adja hozzá a font-display: swap;-ot a betöltés felgyorsításához. Ez utasítja a böngészőt, hogy használja a fallback betűtípust, amíg az egyedi betűtípus teljesen letöltődik.
  • Csak a valóban szükséges betűtípusokat töltse be, láttam, hogy emberek 7 betűtípust töltenek be ugyanabból a betűtípusból, de csak egyet használnak.
  • Az oldal sebességének javításához töltse be előre az (első vagy szükséges) betűtípust HTTP/2 használatával. Ez jelentősen felgyorsítja az oldalát és kijavítja a Google PageSpeed “Ensure text remains visible during webfont load” problémát.

Ennyi, remélem ez a cikk segített Önnek.