Egyéni betűtípusok használata – expo-google-fonts

Az expo-google-fonts csomaggal tudunk React Native-ban egyéni betűtípusokat használni. Van egy GitHub repo is.

A teljesség kedvvért leírom azt is, hogy mind az Android, mind pedig az iOS rendszer hozza a saját betűtípusát, amik a mobilon való böngészéshez optimalizáltak.

Nincs tehát azzal semmi baj, ha nem akarunk ennél extrább fontokat. A lehetőség tehát adott, hogy a rendszerfontoktól eltérő betűtípustokat használjunk. És, ha már Expo által menedzselt projekten dolgozunk, akkor itt van nekünk az expo-google-fonts.

Az expo-google-fonts telepítése

Két csomagot kell telepíteni az expo install eszközzel parancssorban. Az egyik az expo-font, a másik az @expo-google-fonts/inter. Ha a /inter formában telepítjük, akkor az összes, majdnem 1000 darab betűtípust telepítjük.

expo install expo-font 
expo install @expo-google-fonts/inter

Ha csak bizonyos betűtípusokat (pl: oswald, lato) akarunk telepíteni, akkor az inter helyett a betűtípus nevét kell a / jel után írni:

expo install @expo-google-fonts/oswald
expo install @expo-google-fonts/lato

Egy bizonyos betűtípusnak több variánsa létezik attól függően, hogy mennyire vastag a betűtípus írása. Ha kinéztük a Google Fonts weboldalán, hogy melyik tetszik, akkor azokat kell csak importálni majd a projektben.

Minden benne van az Expo doksiban, hogy hogyan kell importálni és használni a betűtípusokat. Először is importálni kell (mondjuk az App.js-ben):

import { useFonts as useOswald, Oswald_400Regular } from "@expo-google-fonts/oswald";
import { useFonts as useLato, Lato_400Regular } from "@expo-google-fonts/lato";

Aztán a useFonts hook-al be kell tölteni:

  const [oswaldLoaded] = useOswald({
    Oswald_400Regular,
  });

  const [latoLoaded] = useLato({
    Lato_400Regular,
  });

  if (!oswaldLoaded || !latoLoaded) {
    return null;
  }

Azt is megtehetjük, hogy egy font családból többet importálunk:

import { useFonts as useLato, Lato_400Regular, Lato_700Bold } from "@expo-google-fonts/lato";

// ...

const [latoLoaded] = useLato({
    Lato_400Regular,
    Lato_700Bold,
});

Kapcsolódó érdekes témák

Betűtípus hiba Expo frissítés után.