Lettertypes toevoegen vanuit Google Fonts

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Lettertypes toevoegen vanuit Google Fonts

Bericht van 10spetter10 op vr 8 jan 2016 - 11:17

Lettertypes toevoegen vanuit Google Fonts


Standaard kun je op je forum 11 lettertypes gebruiken waarbij je zeker bent dat die voor iedereen goed weergegeven worden. Maar soms wil je wel een lettertype meer, of eentje die wat meer speciaal is. Dan kun je zelf een lettertype toevoegen. In deze tutorial leg ik je uit hoe je lettertypes vanuit Google Fonts importeert op je forum en hoe je ze dan gebruikt.

Google Fonts



Eerst moet je natuurlijk een lettertype kiezen dat aan je eisen voldoet, ga hiervoor naar Google Fonts. Als je er een gevonden hebt klik je rechtsonder op de knop 'Quick use'.


Nu kom je op een nieuwe pagina waar je nog wat instellingen kan wijzigen, maar deze staan standaard goed.

Lettertype instellen



Bij puntje 3 op de 'Quick Use' pagina zie je 3 methodes om lettertypes toe te voegen. De methode via css kunnen we al schrappen omdat deze niet meer werkt voor Actieforum. Dan blijven er nog twee opties over: html en javascript. De html methode is de meest functionele, maar dan moet je toegang hebben tot de templates dus ik ga ze beide beschrijven.


  • Instellen dmv html (templates)


    Beheerderspaneel Display Templates Algemeen  

    Open de template 'overall_header' door op het   icoontje te drukken. Nu scroll je naar beneden tot je de

    Code:
    </head>
    tag ziet, dit staat rond lijn 208. Boven deze tag plak je de html-code die je uit Google Fonts krijgt. Als je bang bent omdat de head tag plots rood kleurt mag je achteraan in de code van Google Fonts een

    Code:
    /
    toevoegen.


    Klik nu onderaan op 'Verzenden' en bevestig de aanpassing door in het overzicht op het   icoontje te klikken naast 'overall_header'.

  • Instellen dmv javascript


    Beheerderspaneel Modules html & javascript Javascript Code Beheer  

    Maak hier een nieuw javascript door onderaan op '     Create a new javascript' te klikken en gebruik deze instellingen:

    Titel: (vb: Google Fonts)
    Plaatsing: Op alle pagina's
    Code: (zie hieronder)

    Als code gebruik je het geselecteerd deel van de voorbeeld code in de afbeelding in het begin van dit stukje. Dit is dus de code van Google Fonts zonder de

    Code:
    <script type="text/javascript"></script>
    tags.

    Stuur deze code in door op 'Valideren' te drukken.


Lettertype gebruiken



Eens het lettertype ingesteld is, via de templates of het javascript, kun je de code overal op je forum gebruiken, voorbeeld:


  • In de css

    Code:
    .element {
      font-family: 'naam lettertype';
    }

  • Als html attribuut

    Code:
    <span style="font-family: 'naam lettertype';"> </span>

  • Als bbcode in een post

    Code:
    [font=naam lettertype] [/font]



Overig



Naast Google fonts zijn er natuurlijk nog andere lettertype bibliotheken die je kunt gebruiken, je kunt eens googelen op 'font library'. Hieronder heb ik al een klein lijstje met de eerste resultaten waarbij ik uitkwam:



avatar

10spetter10
Medaille Forumlid

Man Aantal berichten : 1267
Geboortedatum : 21-04-97
Leeftijd : 21
Taal : Nederlands
Locatie : België
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum