Skip to content
ExamplesOpen editor ↗

tlisaMofutatlhaka

→ loadFont()

Fetches a lettering style from the Bopa library so `mofutatlhaka` can use it.

letela tlisaMofutatlhaka(name)

Like tlisaSetshwantsho, it takes time, so it goes together with letela:

diri fonto = letela tlisaMofutatlhaka('...');

What comes back is given to mofutatlhaka, and after that thalaMokwalo writes in that style.

The difference between mofutatlhaka and tlisaMofutatlhaka: mofutatlhaka('serif') picks a style that is already on the reader’s machine. tlisaMofutatlhaka fetches a font file, so the lettering looks the same on every machine.

⚠ A font that cannot be found fails differently from a picture. Measured: a missing picture throws an error carrying 'Not Found' and the number 404; a missing font throws a DOMException reading “A network error occurred.”. Bopa translates both.

Bundled fonts: nunito.ttf and jetbrains-mono-bold.ttf. It is SIL Open Font Licence and reads well at small sizes — see THIRD_PARTY.md.

You will see a message in the console: “No glyph data for nunito, retrying as FontFace”. It is not an error. Nunito is a variable font, so its outlines cannot be read by the first route and a second one is used instead — which works for 2D drawing, the only kind Bopa does. Measured in the running editor.

External font URLs follow browser CORS and HTTPS rules. Reference examples load the same bundled files as the editor.

NameTypeDescription
leinamokwaloA font URL or bundled filename. External hosts must permit browser CORS.
Fetch a lettering style, then write with it
tiro setaLoeto() {
  thalaKanefase(400, 160);
  bokamorago(245);

  diri fonto = letela tlisaMofutatlhaka('nunito.ttf');
  mofutatlhaka(fonto);

  tlatsaMmala(40);
  bogoloJwaMokwalo(34);
  rulaganyaMokwalo(BOGARE);
  thalaMokwalo('Dumela lefatshe', 200, 95);

  tlhalosa('Mafoko a a reng "Dumela lefatshe" a a kwadilweng ka mofutatlhaka wa Nunito mo bogareng jwa kanefase.');
}

letela, mofutatlhaka, thalaMokwalo, tlisaSetshwantsho