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.. ?
👉1 Sira ya Mtume Muhammad (s.a.w) 👉2 ai web app 👉3 kitabu cha Simulizi 👉4 Dua za Mitume na Manabii 👉5 Kitabu cha Afya 👉6 Simulizi za Hadithi Audio
Post zinazofanana:
CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css
Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css
Soma Zaidi...CSS - SOMO LA 13: Display Property
Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...CSS - SOMO LA 21: CSS Units
Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
Soma Zaidi...CSS - somo la 1: Maana ya CSS, kazi zake na historia yake
Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...CSS - SOMO LA 17: Flexbox Advanced
Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...CSS - SOMO LA 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...CSS - SOMO LA 20: Media Queries na Responsive Design
Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.
Soma Zaidi...CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS
Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
Soma Zaidi...CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)
Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...