Sut i Ddefnyddio CSS i Ychwanegu Ffont Custom i’ch Gwefan

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
  1. Mynd i Google Fonts: Ewch i Google Fonts.
  2. Dewiswch y Ffont: Chwiliwch am y ffont yr hoffech ei ddefnyddio, yna cliciwch arno i ddechrau.
  3. 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.
  4. 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:

  1. Lawrlwythwch y Ffont: Lawrlwythwch y ffont fel ffeil .ttf neu .otf.
  2. Creu Ffolder Ffont: Creu ffolder o’r enw “fonts” yn eich gwefan a chopïwch y ffeiliau ffont yno.
  3. 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.

Post Your Comment

Network Service Status

All Services working

Website Hosting that doesn't cost the earth

Superfast, UK website hosting, with advanced features.

Sign up to our newletter






Marketing permission: I give my consent to Ffon Host to be in touch with me via email using the information I have provided in this form for the purpose of news, updates and marketing.

What to expect: If you wish to withdraw your consent and stop hearing from us, simply click the unsubscribe link at the bottom of every email we send or contact us at notifications@ffon.uk. We value and respect your personal data and privacy. To view our privacy policy, please visit our website. By submitting this form, you agree that we may process your information in accordance with these terms.


A Ffon Solutions Limited Brand Registered in England and Wales 14646146

Contact us