전에 실패했었던 폰트 적용을 성공해버려서 이에 대한 글을 작성해보려한다! 전에 실패했던 이유는 파일의 경로들이 잘못되어있었기 때문이다 ...ㅜㅜ

폰트 설치

내가 적용하고자 하는 폰트는 네이버에서 무료로 사용할 수 있는 나눔스퀘어 폰트이다. 종류도 많고 사용할 수 있는 곳이 많을 것 같아 이 폰트를 선택했다!
https://hangeul.naver.com/fonts/search?f=nanum

가장 먼저 해야할 것은 프로젝트의 assets/fonts 폴더를 만들어 그 폴더에 otf, ttf 파일들을 추가하는 것이다. 그 후에는 루트 디렉토리에 react-native.config.js 파일을 생성하고 다음 코드를 작성한다.

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

만약 fonts의 경로를 잘 보고 저기에 작성해주면 된다!

그 후에는 터미널에 다음 명령어를 작성해준다.

npx react-native-asset

그러면 이렇게 연결되었다는 문구가 뜬다! 이제 설치는 다 끝난 것이다. 이제 적용을 해보자!

폰트 적용

와우 진짜 적용하는거 너무 힘들었다 ...... expo로 만들어서 그런가 방식이 달라서 구글링해서 찾아본 방법들 다 해봤는데 안돼서 결국 지선생과 함께 했다... ㅜㅜ 저같은 분 있으면 이 방법 해보셈요

패키지 다운로드

먼저, expo-font, expo-splash-screen 패키지를 다운받아야 한다.

npm install expo-font
npm install expo-splash-screen

App.js

그리고 App.js 파일에 다음 요소들을 임포트시켜준다.

import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import React, { useCallback } from "react";

그리고 App() 안에 다음 코드를 작성해준다.

// Load fonts
 const [fontsLoaded] = useFonts({
   NanumSquareR: require("./src/assets/fonts/NanumSquareR.ttf"),
 });

 // Keep splash screen visible until fonts are loaded
 React.useEffect(() => {
   SplashScreen.preventAutoHideAsync();
 }, []);

 // Hide splash screen when fonts are loaded
 const onLayoutRootView = useCallback(async () => {
   if (fontsLoaded) {
     await SplashScreen.hideAsync();
   }
 }, [fontsLoaded]);

 if (!fontsLoaded) {
   return null; // Render nothing until fonts are ready
 }

CustomText.js

필요한 곳에 글꼴을 적용하는 재사용 가능한 CustomText.js 파일을 원하는 곳에 추가해준다. 파일 안에는 다음과 같은 코드를 작성해준다.

import React from 'react';
import { Text } from 'react-native';

export default function CustomText(props) {
  // Apply the custom font to all Text components
  return (
    <Text {...props} style={[{ fontFamily: 'NanumSquareR' }, props.style]}>
      {props.children}
    </Text>
  );
}

폰트 패밀리에는 원하는 폰트명을 작성해주면 된다. 나같은 경우는 나눔스퀘어R을 써주었다.

글꼴을 적용하고 싶은 화면에 Text 대신에 CustomText를 사용해주면 된다.
코드는 아래와 같이 작성해주었다.

import React from 'react';
import { View } from 'react-native';
import CustomText from "./CustomText";

export default function Example() {
  return (
    <View style={{
        margin: 30,
    }}>
      <CustomText>안녕하세요, 드디어 폰트 적용이 되었어요!</CustomText>
    </View>
  );
}

화면에는 이런식으로 출력이 된다.

만약에 폰트를 추가하고 싶다면 다음과 같이 하면 된다.
먼저 App.js에 추가해준다.

const [fontsLoaded] = useFonts({    
    NanumSquare_acB: require("./src/assets/fonts/NanumSquare_acB.ttf"),
    NanumSquare_acEB: require("./src/assets/fonts/NanumSquare_acEB.ttf"),
    NanumSquare_acL: require("./src/assets/fonts/NanumSquare_acL.ttf"),
    NanumSquare_acR: require("./src/assets/fonts/NanumSquare_acR.ttf"),
    NanumSquareB: require("./src/assets/fonts/NanumSquareB.ttf"),
    NanumSquareEB: require("./src/assets/fonts/NanumSquareEB.ttf"),
    NanumSquareL: require("./src/assets/fonts/NanumSquareL.ttf"),
    NanumSquareR: require("./src/assets/fonts/NanumSquareR.ttf"),
  });

CustomText.js 파일은 아래와 같이 변경해주면 된다.

import React from "react";
import { Text } from "react-native";

export default function CustomText({ fontFamily = "NanumSquareR", style, ...props }) {
  return (
    <Text {...props} style={[{ fontFamily }, style]}>
      {props.children}
    </Text>
  );
}

NanumSquareR 폰트가 디폴트이다. 만약 다른 폰트를 적용하고 싶다면 아래처럼 코드를 작성하여 적용해주면 된다.

import React from 'react';
import { View } from 'react-native';
import CustomText from "./CustomText";

export default function Example() {
  return (
    <View style={{
        margin: 30,
    }}>
      
      <CustomText fontFamily='NanumSquare_acB'>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquare_acB</CustomText>
      <CustomText fontFamily='NanumSquare_acEB'>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquare_acEB</CustomText>
      <CustomText fontFamily='NanumSquare_acL'>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquare_acL</CustomText>
      <CustomText fontFamily='NanumSquare_acR'>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquare_acR</CustomText>
      <CustomText fontFamily='NanumSquareB'>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquareB</CustomText>
      <CustomText fontFamily='NanumSquareEB'>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquareEB</CustomText>
      <CustomText fontFamily='NanumSquareL'>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquareL</CustomText>
      <CustomText fontFamily='NanumSquareR'>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquareR</CustomText>
    </View>
  );
}

Util

근데 지금 보면 폰트 이름이 너무 길어서 치기가 상당히 귀찮고 무슨 폰트인지도 알아보기가 쉽지 않아보인다!! 그래서 유틸로 따로 빼는 방식을 적용해보겠다.

먼저 src/utils 폴더에 fontStyle.js 파일을 만들어준다. 파일 안에는 다음과 같이 작성해준다.

export const fonts = {
    nAcBold: "NanumSquare_acB",
    nAcExtraBold: "NanumSquare_acEB",
    nAcLight: "NanumSquare_acL",
    nAcRegular: "NanumSquare_acR",
    nBold: "NanumSquareB",
    nExtraBold: "NanumSquareEB",
    nLight: "NanumSquareL",
    nRegular: "NanumSquareR",
  };
  

폰트 이름은 원하는대로 작성해주면 된다!

App.js 파일에 위의 파일을 임포트해준다.
그리고 fontLoaded 부분을 다음과 같이 변경해준다.

const [fontsLoaded] = useFonts({
    [fonts.nAcBold]: require("./src/assets/fonts/NanumSquare_acB.ttf"),
    [fonts.nAcExtraBold]: require("./src/assets/fonts/NanumSquare_acEB.ttf"),
    [fonts.nAcLight]: require("./src/assets/fonts/NanumSquare_acL.ttf"),
    [fonts.nAcRegular]: require("./src/assets/fonts/NanumSquare_acR.ttf"),
    [fonts.nBold]: require("./src/assets/fonts/NanumSquareB.ttf"),
    [fonts.nExtraBold]: require("./src/assets/fonts/NanumSquareEB.ttf"),
    [fonts.nLight]: require("./src/assets/fonts/NanumSquareL.ttf"),
    [fonts.nRegular]: require("./src/assets/fonts/NanumSquareR.ttf"),
  });

CustomText.js 파일도 다음과 같이 수정해준다.

import React from "react";
import { Text } from "react-native";
import { fonts } from "../utils/fontStyles";

export default function CustomText({ fontFamily = fonts.nRegular, style, ...props }) {
  return (
    <Text {...props} style={[{ fontFamily }, style]}>
      {props.children}
    </Text>
  );
}

예시 화면 파일은 다음과 같이 바뀐다!

import React from 'react';
import { View } from 'react-native';
import CustomText from "./CustomText";
import { fonts } from "../utils/fontStyles";

export default function Example() {
  return (
    <View style={{
        margin: 30,
    }}>
      
      <CustomText fontFamily= {fonts.nAcBold}>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquare_acB</CustomText>
      <CustomText fontFamily= {fonts.nAcExtraBold}>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquare_acEB</CustomText>
      <CustomText fontFamily= {fonts.nAcLight}>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquare_acL</CustomText>
      <CustomText fontFamily= {fonts.nAcRegular}>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquare_acR</CustomText>
      <CustomText fontFamily= {fonts.nBold}>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquareB</CustomText>
      <CustomText fontFamily= {fonts.nExtraBold}>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquareEB</CustomText>
      <CustomText fontFamily= {fonts.nLight}>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquareL</CustomText>
      <CustomText fontFamily= {fonts.nRegular}>안녕하세요, 드디어 폰트 적용이 되었어요!: NanumSquareR</CustomText>
    </View>
  );
}

이제 끝~~

아!! 주의할 점!!!!!! 안드로이드는 fontWeight을 적용하면 폰트 적용이 안된다!!!! 반드시 명심하세욥

정리

포기하지 않고.. 열심히 시도해본 나 칭찬해. 폰트 적용 너 빡세다!!!!!!!!! 인정!!!!!!!!