U3 LA 4.1 Werken met fonts

Via Google Fonts

Het makkelijkst is om de Web Fonts van Google te gebruiken, natuurlijk om onze tekst wat op te leuken. Bij Google Fonts kun je de fonts gebruiken zonder ze te downloaden. Je laadt ze via het CSS dat Google Fonts aanbiedt.

NB: er zijn wel privacy bezwaren tegen Google Fonts, want ze weten precies waar jij gaat…

Voorbeeld Sofia Font

Dit Google font kun je laden met de onderstaande codes. Gebruik de index.html en de sketch.js allebei.

Gebruik de volgende code als index.html van je sketch. Hier wordt de CSS geladen voor het Sofia font.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Sofia"
    />
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <script src="sketch.js"></script>
  </body>
</html>

Hieronder de code voor sketch.js


function preload(){
  
}
function setup() {
  createCanvas(400, 200);
  textFont("sofia")
}

function draw() {
  background(220);
  textSize(26)
  text("Sofia!",100,100)
}

Met een gedownload font

Eerst moet je een font-file (een ttf of een otf bestand) downloaden van een gespecialiseerde site als dafont.com of Fontsly. Het gedownloade font moet je uploaden naar de editor. Bij nood: gebruik deze batmforever_alt.ttf

Klap de sidebar uit. Met het kleine pijltje omlaag krijg je een menu om mee te uploaden. Er is een bug met filenames: hou deze lowercase en kort. Anders pakt ie ‘m niet.

Het font wordt eerst gepreload. De variabele die je daarmee maakt, gebruik je met de textFont() functie.

var batman;

function preload(){
  batman = loadFont("batmanforever.ttf");
  
}
function setup() {
  createCanvas(400, 200);
  textFont(batman)
}

function draw() {
  background(220);
  textSize(26)
  text("Batman!",100,100)
}

Opdracht

Maak een sketch met tenminste 1 Google Web Font naar keuze (maar wel een andere als in het voorbeeld) en minstens 1 eigen geüpload font.