Fonts — keluarga Montserrat

NexaJS menyediakan konstanta FontFamily untuk memetakan berat dan gaya miring ke nama font terdaftar, serta hook useMontserratFonts() agar file font dimuat sebelum teks dirender. Layar demo menampilkan seluruh variasi berat normal dan italic dalam satu ScrollView.

Alur penggunaan di aplikasi

Pendaftaran route — Modul layar Fonts diekspor sebagai default dan terdaftar di MenuComponents dengan nama route "Fonts" (judul: "Fonts").
Navigasi — navigation.navigate("Fonts"). Rujukan route: Konfigurasi dan flow route, menu.js & MenuComponents.
Render — Panggil hook di level root layar. Selama font belum siap, tampilkan fallback sederhana (mis. teks “Loading fonts…”); setelah siap, render daftar section berisi baris Text dengan fontFamily: FontFamily.*.

Hook pemuatan font

useMontserratFonts() mengembalikan boolean (pola pada referensi: true jika siap). Tanpa penundaan ini, platform bisa memuat teks dengan fallback sistem lalu “melompat” ke Montserrat saat font selesai — hook memastikan transisi terkontrol.

Hook + fallback loading

import {
  FontFamily,
  useMontserratFonts,
  Text,
  ScrollView,
} from "NexaJS";

export default function Screen() {
  const fontsLoaded = useMontserratFonts();
  if (!fontsLoaded) {
    return <Text>Loading fonts...</Text>;
  }
  return (
    <ScrollView>
      <Text style={{ fontFamily: FontFamily.bold }}>Judul</Text>
    </ScrollView>
  );
}

Token `FontFamily`

Gunakan nilai string siap pakai pada properti style.fontFamily, biasanya digabung dengan StyleSheet lewat array style.

Teks + FontFamily

import { FontFamily, Text, StyleSheet } from "NexaJS";

const styles = StyleSheet.create({
  body: { fontSize: 14, color: "#333" },
});

<Text style={[styles.body, { fontFamily: FontFamily.semiBold }]}>
  SemiBold (600)
</Text>
<Text style={[styles.body, { fontFamily: FontFamily.mediumItalic }]}>
  Medium Italic (500)
</Text>

Kelompok	Kunci (intisari)
Berat tegak	`thin` (100), `extraLight` (200), `light` (300), `regular` (400), `medium` (500), `semiBold` (600), `bold` (700), `extraBold` (800), `black` (900).
Berat miring	`thinItalic` … `blackItalic` — setiap pasangan italic mengikuti skala berat di atas.

Tata letak demo

Judul halaman memakai FontFamily.bold. Dua section besar: “Regular Weights” dan “Italic Weights”, masing-masing dengan subjudul semi-bold (italic memakai semiBoldItalic pada judul section italic). Setiap baris contoh memakai ukuran font seragam dari styles.text (14) dan hanya mengubah fontFamily.

Praktik yang disarankan

Selaraskan pemakaian FontFamily dengan skala tipografi global (lihat juga halaman Typography untuk utilitas fs).
Jangan mengabaikan state loading: di perangkat lambat, layar kosong tanpa fallback membingungkan pengguna.
Untuk teks panjang, pastikan lisensi font Montserrat sesuai distribusi aplikasi Anda.

Nxdom Framework