มาเริ่มกันเลยครับ

เจมส์จะคิดว่าคุณผู้อ่านมีโปรเจคที่เป็น React Native อยู่แล้วนะครับ ขั้นแรกคือให้สร้าง directory assets/fonts ขึ้นมาครับ ที่ root project ได้เลยครับ

ในบทความนี้เจมส์จะยกตัวอย่างคือใช้จาก Google Font เน้อครับ คุณผู้อ่านสามารถเข้าไปดาวน์โหลด Font ฟรีจาก Google ได้ที่ลิงค์นี้ได้เลยครับ

เช่น เจมส์จะใช้ Font Bruno Ace SC ก็กดที่ปุ่ม Download ในนั้นได้เลยครับ ซึ่งเมื่อ Download เรียบร้อยแล้วให้ unzip ให้เรียบร้อยเราจะพบ font อยู่ในนั้นครับ

จากนั้นให้เอา Fonts ที่คุณผู้อ่านอยากเอามาใช้ เอามาใส่ใน directory assets/fonts ได้เลยครับ

เมื่อใส่ copy fonts ใส่เรียบร้อยแล้วให้สร้างไฟล์ขึ้นมาชื่อไฟล์ react-native.config.js สร้างไว้ที่ root project เลยครับ โดยใส่โค้ดดังนี้ครับ

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};

จากนั้นให้เปิด Terminal ขึ้นมาครับแล้วเข้ามาที่ root project ของเราครับ แล้วใช้คำสั่ง

npx react-native-asset

เพียงเท่านี้ก็สามารถใช้ font ที่เราเพิ่มเข้ามาได้แล้วครับ วิธีการเรียกใช้งาน font ที่เราเอาเข้ามา เช่น จากในตัวอย่างในบทความนี้ ตอนเรียกใช้ font เจมส์ก็กำหนด font-family เป็น BrunoAceSC-Regular ได้เลยครับ

ตัวอย่างการใช้งานครับ

import React from 'react';
import {StyleSheet, Text, View, SafeAreaView} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text style={styles.h1}>Hello world</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  h1: {
    fontFamily: 'BrunoAceSC-Regular',
    fontSize: 50,
  },
});

export default App;

ซึ่งเมื่อลอง Run ตามโค้ดตัวอย่าง จะแสดงผลลัพธ์ดังรูปด้านล่างครับ

Reference

• How to add custom fonts in React Native