Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in één van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Lettertypes toevoegen vanuit Google Fonts

Vorige onderwerp Volgende onderwerp Go down

  • 0

Lettertypes toevoegen vanuit Google Fonts

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

Lettertypes toevoegen vanuit Google Fonts


Standaard kan 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 dat wat meer speciaal is. Dan kan jezelf 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 blijver 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 Bewerken 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 :add: icoontje te klikken naast 'overall_header'.

  • Instellen dmv javascript


    Beheerderspaneel Modules html & javascript Javascript Code Beheer

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

    Code:
    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, kan 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 kan gebruiken, je kan eens googelen op 'font library'. Hieronder heb ik al een klein lijstje met de eerste resultaten waarbij ik kwam:

  • Font Library
  • adobe edge webfonts
  • css fontstack




Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates  en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1294
Leeftijd : 19
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