picha

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:

  1. Kutoka nje (Google Fonts)

  2. 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:

  1. Tembelea https://fonts.google.com

  2. Chagua font unayotaka (mfano: Poppins)

  3. Nakili link na uweke ndani ya <head> ya HTML yako:

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  1. 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:


✅ 3. Faida za Kutumia Custom Fonts


✅ 4. Tahadhari


✅ 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

  1. Kazi ya @font-face ni ipi?
    a) Kupakua script ya JavaScript
    b) Kuweka background
    c) Kupakia font ya tovuti mwenyewe
    d) Kuongeza animation

  2. Google Fonts ni nini?
    a) Mfumo wa picha
    b) Maktaba ya fonts za bure
    c) Server ya Java
    d) Code editor

  3. Kwenye @font-face, src: inafanya nini?
    a) Inaweka jina la font
    b) Inaelekeza faili la font
    c) Inaweka rangi
    d) Inazima font

  4. Kama font haipatikani, nini hufanyika?
    a) Hakuna maandishi yataonyeshwa
    b) Browser hutumia fallback font
    c) Font nyingine huingia kwa default
    d) Kivinjari hufunga ukurasa

  5. Jina la font katika font-family linatumiwa wapi?
    a) Kwenye HTML
    b) Kwenye script ya JavaScript
    c) Kwenye CSS
    d) Kwenye URL tu


 

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 2025-07-03 Topic: CSS Main: ICT File: Download PDF Views 614

Share On:

Facebook WhatsApp
Sponsored links
👉1 Tafasiri ya Riyadh Swalihina    👉2 web hosting    👉3 Sira ya Mtume Muhammad (s.a.w)    👉4 Kitabu cha Afya    👉5 Kitau cha Fiqh    👉6 Simulizi za Hadithi Audio   

Post zinazofanana:

CSS - SOMO LA 10: Box Model katika CSS

Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.

Soma Zaidi...
Drone: Nyuki Dume na Majukumu Yake

Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.

Soma Zaidi...
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 33: CSS Frameworks

Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.

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...
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 23: Uelewa Zaidi wa CSS Animation na Transition

Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.

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 34: if() Condition katika CSS

Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.

Soma Zaidi...