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: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 65

Share On:

Facebook WhatsApp
Sponsored links
👉1 Kitau cha Fiqh    👉2 Bongolite - Game zone - Play free game    👉3 Madrasa kiganjani    👉4 Sira ya Mtume Muhammad (s.a.w)    👉5 Kitabu cha Afya    👉6 kitabu cha Simulizi   

Post zinazofanana:

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...
CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)

Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.

Soma Zaidi...
CSS - SOMO LA 24: CSS Variables (Custom Properties)

Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.

Soma Zaidi...
CSS - SOMO LA 18: Grid Layout

Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.

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 28: CSS Timing Functions

Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.

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 29: CSS z-index na Stacking Context

Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga

Soma Zaidi...
CSS - SOMO LA 27: Kutumia @import Katika CSS

Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.

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