Sut i Ddefnyddio CSS i Ychwanegu Ffont Custom i’ch Gwefan
Gall ychwanegu ffont custom i’ch gwefan wneud i’ch cynnwys edrych yn fwy deniadol ac yn unigrwyddol. Dyma sut gallwch ddefnyddio CSS i ychwanegu ffont custom i’ch gwefan.
1. Dewiswch y Ffont
Y cam cyntaf yw dewis y ffont yr hoffech ei ddefnyddio. Gallwch ddewis ffontau sydd ar gael ar-lein, fel Google Fonts, neu ffontau sydd gennych ar eich cyfrifiadur.
2. Ychwanegu’r Ffont i’ch Gwefan
Mae yna ddau ddull prif i ychwanegu ffont custom: trwy ddefnyddio Google Fonts neu drwy ddefnyddio ffontau ar eich cyfrifiadur.
Dewis 1: Defnyddio Google Fonts
- Mynd i Google Fonts: Ewch i Google Fonts.
- Dewiswch y Ffont: Chwiliwch am y ffont yr hoffech ei ddefnyddio, yna cliciwch arno i ddechrau.
- Cynhelwch y Cod: Ar y dudalen ffont, byddwch yn gweld opsiwn i gopïo’r cod
<link>
neu’r CSS. Dewiswch yr un sy’n eich hoffi. - Ychwanegu’r Cod: Ychwanegwch y cod hwn i’r
<head>
yn eich ffeil HTML:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
Dewis 2: Defnyddio Ffontau Ar Eich Cyfrifiadur
Os oes gennych ffont sydd ar eich cyfrifiadur, gallwch ei ddefnyddio trwy ei lawrlwytho a’i osod yn eich gwefan. Y camau yma yw:
- Lawrlwythwch y Ffont: Lawrlwythwch y ffont fel ffeil .ttf neu .otf.
- Creu Ffolder Ffont: Creu ffolder o’r enw “fonts” yn eich gwefan a chopïwch y ffeiliau ffont yno.
- Ychwanegu’r CSS: Defnyddiwch y cod canlynol yn eich ffeil CSS i ddweud wrth y porwr ble i ddod o hyd i’r ffont:
@font-face { font-family: 'CustomFont'; src: url('fonts/CustomFont.ttf') format('truetype'); }
3. Defnyddio’r Ffont yn eich CSS
Ar ôl i chi ychwanegu’r ffont, gallwch ei ddefnyddio yn eich CSS fel hyn:
body {
font-family: 'CustomFont', sans-serif;
}
Gallwch hefyd ddefnyddio’r ffont i elfennau penodol:
h1 {
font-family: ‘CustomFont’, sans-serif;
}
4. Gwirio Ar eich Gwefan
Wedi gwneud y newidiadau, gwirhewch eich gwefan i sicrhau bod y ffont custom yn ymddangos yn iawn. Gallwch ddefnyddio’r offerynnau datblygu yn y porwr i wirio unrhyw broblemau.
Casgliad
Mae ychwanegu ffont custom i’ch gwefan yn weithred syml sy’n gallu gwneud i’ch cynnwys edrych yn well ac yn fwy proffesiynol. Trwy ddefnyddio Google Fonts neu ffontau ar eich cyfrifiadur, gallwch greu arddull unigryw sy’n adlewyrchu eich brand.