CSS - SOMO LA 32: Custom Fonts na @font-face
Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.
? Utangulizi
Kwa chaguo-msingi, vivinjari (browsers) hutumia fonts chache kama Arial, Times New Roman, Verdana, n.k. Lakini kama mchoraji wa tovuti, unaweza kutaka kutumia font isiyo ya kawaida ili kuifanya tovuti yako ivutie zaidi.
CSS inaruhusu kutumia fonts hizi kwa njia mbili:
-
Kutoka nje (Google Fonts)
-
Kupakia font mwenyewe kwa kutumia
@font-face
✅ 1. Kutumia Google Fonts
Google Fonts ni maktaba ya fonts bure inayotolewa na Google. Unaweza kuchagua font yoyote na kuitumia kwenye tovuti yako kwa haraka.
? Hatua:
-
Tembelea https://fonts.google.com
-
Chagua font unayotaka (mfano:
Poppins) -
Nakili link na uweke ndani ya
<head>ya HTML yako:
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
-
Kisha kwenye CSS:
body {
font-family: 'Poppins', sans-serif;
}
Unaruhusiwa kuchanganya fonts: font kuu na font mbadala (fallback).
✅ 2. Kutumia @font-face
Hii ni njia ya kupakia font kutoka faili ulilohifadhi wewe mwenyewe (local font), hata kama haipo kwenye Google Fonts.
? Mfano:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyFont.woff2') format('woff2'),
url('fonts/MyFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'MyCustomFont', sans-serif;
}
? Maelezo:
-
font-family: Jina la font utakayotumia kwenye CSS -
src: Njia ya kufikia faili ya font -
format(): Aina ya font (woff,woff2,ttf, nk.) -
font-weight,font-style: Hiari, huonyesha aina ya font (bold, italic, n.k.)
✅ 3. Faida za Kutumia Custom Fonts
-
Kuongeza ubunifu na utambulisho wa chapa
-
Kuimarisha muonekano wa kitaalamu
-
Kusaidia accessibility (kupunguza fonts ngumu kusoma)
✅ 4. Tahadhari
-
Fonts kutoka nje huongeza load time (wakati wa kufungua ukurasa)
-
Unapaswa kuweka fallback fonts (mfano:
sans-serif) -
Font zisizo sahihi zinaweza kuvuruga layout
✅ Hitimisho
Custom fonts hukuwezesha kuvunja mipaka ya fonts za kawaida na kuleta ubunifu mpya kwenye tovuti. Kutumia Google Fonts ni rahisi, lakini kwa udhibiti zaidi tumia @font-face kupakia fonts zako mwenyewe.
? Maswali ya Kujitathmini
-
Kazi ya
@font-faceni ipi?
a) Kupakua script ya JavaScript
b) Kuweka background
c) Kupakia font ya tovuti mwenyewe
d) Kuongeza animation -
Google Fonts ni nini?
a) Mfumo wa picha
b) Maktaba ya fonts za bure
c) Server ya Java
d) Code editor -
Kwenye
@font-face,src:inafanya nini?
a) Inaweka jina la font
b) Inaelekeza faili la font
c) Inaweka rangi
d) Inazima font -
Kama font haipatikani, nini hufanyika?
a) Hakuna maandishi yataonyeshwa
b) Browser hutumia fallback font
c) Font nyingine huingia kwa default
d) Kivinjari hufunga ukurasa -
Jina la font katika
font-familylinatumiwa wapi?
a) Kwenye HTML
b) Kwenye script ya JavaScript
c) Kwenye CSS
d) Kwenye URL tu
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Share On:
👉1 Kitabu cha Afya 👉2 web hosting 👉3 ai web app 👉4 Madrasa kiganjani 👉5 Sira ya Mtume Muhammad (s.a.w) 👉6 Tafasiri ya Riyadh Swalihina
Post zinazofanana:
CSS - somo la 4: Aina za css selecto
Katika somo hili uatkwenda kujifunza aina za css selectors
Soma Zaidi...Jinsi ya kumsaidia Mtoto mdogo aliyekabwa na kitu kooni
Mfano wa kitu kinachoweza kumaba mtoto kooni ni kama chagula kigumu, pesa ya sarafu, kijiwe na mengineyo. Endapo hili litataokea msaada wa haraka unahitajika kwa ulazima.
Soma Zaidi...CSS - somo la 3: syntax za css yaani sheria za uandishi wa css
Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css
Soma Zaidi...CSS - SOMO LA 14: Position Property
Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
Soma Zaidi...CSS - SOMO LA 12: Width, Height, Max/Min Width na Overflow
Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.
Soma Zaidi...CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...