Terug naar Jouwweb.Tips

Lettertype

Met behulp van Google fonts kan je lettertypen toevoegen.

Hiervoor is kennis van CSS Stylesheets en HTML nodig.
Denk er echter aan dat hoe meer lettertype je gebuikt hoelanger het duurt voordat je website geladen is.

  • Open de Google websites met de lettertypen,  http://www.google.com/fonts
  • Aan de bovenkant kan je voor diverse weergave kiezen. Neem de weergave die het meest overeenkomt met de vorm waarin u de tekst en lettertype mee wilt maken. (Word / Sentence / Paragraph / Poster
  • Kies aan de linkerkant het filter voor het soort wat U wilt gaan toevoegen
  • Bij de keuze van 'Handwriting'  en het tabje 'Word'  krijg je onderstaand overzicht in beeld.
  • De voorbeeldtekst 'Grumpy..' kunnen we vervangen door onze eigen tekts. Links boven de lettertype kan je de eigen tekst ingen.. bijvoorbeeld 'Jouwweb lettertype'

 

  • Vervolgens kunnen we de grootte van het lettertype voorbeeld nog aanpassen. Boven de lettertype op size. Maak hier bijv. 48 van

 

  • Vervolgens kunnen we nog instellen op welke manier we de lijst willen zien. Klik hier voor boven de lettertypen op Sorting:
  • Links boven in het scherm staat het aantal beschikbare lettertypen.

 

  • Klik her eerste lettertypen aan die je wilt gaan gebruiken in de Jouwweb website. klik op "add to collection'
  • De lettertypen die zijn geselcteerd zijn onder aan de pagina te zien.
  • Als je een lettertype wilt verwijderen klik je op het kruisje achter dat letterty

 

  • Klik op het kleine blokje voor een overzicht van het lettrtype.
  • In dit overzicht kan je boven de leters kiezen voor :\'Try in TypeCast'. Als je dat doet krijg je een veel overzichtelijker voorbeeld van het lettertpe.
  • Als U alle lettertype heeft gekozen (Hoe minder hoe beter!) klikt u rechtsonder op 'Use'
  • Geef in het volgende scherm aan de linkerkant nog aan welke stijlen je wilt gebruiken
  • Aan de rechterzijde staat een metertje die aangeeft wat de invloed zal zijn op het laden van uw pagina.
  • Kopieer de regel  'onder Punt 3 '  naar het klembord, of tijdelijk naar het kladblok/Notepad.(Je kan ook kiezen voor Punt 4 Inegrate in CSS)
  • Deze regel is te downloaden met het googlefont01.txt bestand hier onder.
Tekstbestand
Googlefont01
Tekstbestand [183.0 B]
Download (1 download)
  • Kies in de je website menu voor 'Meer' -  Webinstellingen - Geavanceerd'
  • Kopieer de link regel hier inhet <head>  blok.
  • Het lettertype is nu in HTML code te gebruiken.
  • Hier onder wat voorbeelden van de lettertypen: Short Stack, Black Ops ,  Delius, Mr De Haviland, Gloria Halleluja,en Tangerine.
  • De code van onderstaande voorbeelden staan in het downloaden txt bestand

Lettertype Short Stack 24px zonder schaduw
.
Lettertype Short Stack 24px met schaduw
.
Lettertype Tangerine 48px zonder schaduw
.
Lettertype Tangerine 48px met schaduw
.
Lettertype Delius Sans 24px zonder schaduw
.
Lettertype Delius Sans 24px met schaduw
.
Lettertype Mr De Haviland 48px zonder schaduw
.
Lettertype Mr De Haviland 48px met schaduw
.
Lettertype Pacifico 24px zonder schaduw
.
Lettertype Pacifico 24px met schaduw
.
Lettertype Gloria Hallelujah 24px zonder schaduw
.
Lettertype Gloria Hallelujah 24px met schaduw
.
Lettertype Crafty Girls 24px zonder schaduw
.
Lettertype Crafty Girls 24px met schaduw
.
Lettertype Black Ops One 24px zonder schaduw
.
Lettertype Black Ops One 24px met schaduw
.
.
Tekstbestand
Googlefont02html
Tekstbestand [2.1 KB]
Download (4 downloads)

Download hier de pagina in PDF fromaat

PDF
Gevorderden jouwweb nl lettertype
PDF [600.9 KB]
Download (8 downloads)