Tehát valószínűleg hallotta, hogy a Google több száz ingyenes webes betűtípussal rendelkezik, amelyek felhasználhatók a következő projektjéhez. De hogyan használja őket a weboldalán? Ez a cikk végigvezeti Önt a szükséges lépéseken annak érdekében, hogy azok futhassanak a webhelyén. Ennek kevesebb, mint 10 percnek kell eltelnie!
Mik azok a Google Betűtípusok?
„A Google Fonts először 2010-ben indult mérnöki kezdeményezésként az internet előremozdítása és gyorsabbá tétele érdekében.” - Google DesignA Google Fonts 2010-ben indult, és gyorsan az Internet legnagyobb, ingyenes, nyílt forráskódú betűkészletévé vált. Minden Google Betűtípus ingyenes kereskedelmi és személyes használatra. A Google Fonts webhely megkönnyíti a különböző betűtípusok gyors kiválasztását és felhasználását saját tervezési igényeikhez.
Ki használja a Google Betűtípusokat?
Mindenki csinálja! Grafikusok, UX-tervezők, kutatók, fejlesztők, webdesignerek, bloggerek, közösségi média-menedzserek, vállalkozók, művészek, hallgatók, tanárok, fotósok és még sok más. Láttam a Google Betűtípusokat, amelyeket hirdetőtáblákon, plakátokon, bemutató paklikon, esküvői meghívókon, webhelyeken és könyvekben használtak.
Ki készíti a betűtípusokat?
A Google Fonts együttműködik típustervezőkkel, típusú öntödékkel és a formatervező közösséggel az egész világon. Ezek az emberek és szervezetek tervezik meg azokat a betűtípusokat, amelyeket a Google Betűtípusokban lát. Például Łukasz Dziedzic független betűkészlet-tervező, aki a népszerű Lato betűtípust tervezte. A ParaType nevű betűtípus öntöde tervezte a PT Serif betűtípust.
Miért érdekli a Google a betűtípusokat?
A webhely minden Google Fonts API-linkje lehetőséget ad a Google-nak arra, hogy több adatbányászatot végezzen. Ez durván hangzik? Igen, de nem hiszem, hogy ez megakadályozhatja a Google Betűtípusok használatát.
Egy másik megnyugtatóbb ok, amiért a Google törődik a betűtípusokkal, az az, hogy a nyílt forráskódú webes betűtípusokat tömegek számára akarják elérhetővé tenni. Gyorsabb, szebb webet akarnak készíteni, amely könnyebben navigálható és használható. Ők is elindították a Google Fonts-ot még 2010-ben, amikor egy ilyen szolgáltatásra nagy szükség volt, így megoldottak egy újabb problémát, amely az interneten volt. #dontbeevil
Miért kellene fontolóra venni ezek használatát?
Nem verhetsz szabadon. Igazam van? Azon felül, hogy ingyenes, fontolja meg a Google Fonts használatát a következő webdesign-projektjén, mert…
- A betűtípusok könnyen implementálhatók a webhelyén
- Több mint 850 betűtípus közül lehet választani (és számolni lehet)
- A betűtípusok általános minősége tovább növekszik
- A Google betűtípusok nyomtatásra is letölthetők
Oké, oké, oké! Most pedig arról, hogyan használja őket.
A Google Betűtípusok használata - lépésről lépésre
1) Lépjen a Google Fonts webhelyre
Látogasson el a Google Fonts weboldalára, ahol 853 betűcsalád és számolás közül választhat! A weboldal lehetővé teszi az eredmények szűrését betűtípus, nyelv, népszerűség és súly szerint. A Google Fonts új betűtípusokat is tartalmaz, ha ellátogat a „kiemelt” oldalra.
2) Keresse meg a tetsző betűtípusokat
Ha fontolóra veszi a betűtípus-családnevet, kereshet rá.
3) Ha készen áll a használatára, kattintson a „+” gombra
Minden betűtípuscsaládnak van egy plusz gombja a jobb felső sarokban. Kattintson a plusz gombra a betűtípuscsalád hozzáadásához a képernyő alján megjelenő „kiválasztó fiókba”.
4) Ismételje meg az 1–3. Lépéseket, ha egynél több betűtípust szeretne használni
5) Kattintson az összes kiválasztott betűtípus megjelenítéséhez a „kiválasztó fiókra”
A kiválasztási fiókban láthatja az összes hozzáadott betűtípust. Itt találja meg a webhelyéhez hozzáadandó kódot. Arra is lehetősége van, hogy letöltse a betűtípusokat az asztalra.
6) A „kiválasztó fiókban” fogja megkapni a kódot, amelyet átmásol / beilleszt a webhelyeire. HTML és CSS kód
A „kiválasztó fiókból” átmásolja a kódot, amelyet beilleszt a HTML-be és a CSS-be. Ahhoz, hogy a Google Betűtípusok működhessenek az Ön webhelyén, mind a Google Fontok API-hoz (a HTML-ben), mind pedig a CSS-ben meg kell adnia a betűtípus-családot.
7) Ha szeretné, adjon hozzá különböző betűkészlet-súlyokat és stílusokat a „testreszabás” fülre kattintva
Ez az utolsó alkalom arra, hogy különböző betűméreteket és stílusokat adjon hozzá a betűcsaládokhoz, mielőtt felvenné azokat a webhelyére. Csak azokat a betűméreteket és stílusokat adja hozzá, amelyekre szüksége van, mert minél több betűtípust ad hozzá, annál lassabban töltődnek be az Ön webhelyére.
8) Másolja a HTML kódot, és illessze be a webhelyére
Rendben, majdnem készen vagyunk! Most csak annyit kell tennünk, hogy másoljuk és beillesztjük a HTML és CSS kódot a webhelyére. Először másolja a HTML-linket a HTML-dokumentum fejébe.
9) Másolja a CSS-szabályt, és illessze be a webhely CSS-fájljába
Végül át kell másolnunk és be kell illesztenünk a CSS-szabályokat a CSS-fájlba. Ha egy Google Betűtípust ad hozzá a webhelyéhez, hozzáadhatja a CSS betűtípuscsalád szabályait a törzscímkéjéhez. Ellenkező esetben biztosnak kell lennie abban, hogy a CSS-fájlok megfelelő elemeihez adja hozzá.
10) Mentse mindkét fájlt (HTML és CSS), majd frissítse a webhelyet, és tekintse meg az új betűtípust
Ne felejtsen el menteni és frissíteni!
Tessék! Sikeresen implementálta az első Google Betűtípust a webhelyén. Gratulálok, kódolsz. Igaz, hogy azt mondjuk, hogy a Google betűtípusok alapvetően…
További olvasmányok
- Yuin Chien „Google-betűtípusok újragondolása” (Google Design)
- Hayden Mills „Betűkészlet-párosítás“ 6 tipp
- A Google Fonts „Webfonts választása: Útmutató kezdőknek” c
Köszönöm, hogy elolvasta
Nyugodtan hagyjon megjegyzést alább, vagy forduljon hozzám a Twitteren minden kérdésével ✌️
Emellett a Font Pair készítője vagyok, amely segít a Google Betűtípusok párosításában. Nézze meg új Medium kiadványunkat, hogy további tipográfiai bejegyzéseket olvasson!
