탭탭카드놀이) 폰트적용하기 - Font.loadAsync

초록어린이체가 앱에 잘 어울려서 적용했다

1. 폰트파일을 다운받는다

   - SDChildfundkorea.otf

   - SDChildfundkoreaTTF.ttf

2. app/asset/fonts의 경로에 폰트파일을 넣는다

 

3. root위치에 react-native-config.js파일을 만든 뒤 다음코드를 작성한다

// react-native.config.js
module.exports = {
    assets: ['./app/asset/fonts']
};

 

4. 터미널에서 react-native link를 실행한다 (npx react-native link)

위 명령어를 실행하면 ios/프로젝트/info.plist에 폰트파일이 추가되는걸 볼 수 있다

ios/프로젝트/info.plist

info.plist

5. 가장 최상단 파일인 App.js에 Font.loadAsync로 폰트를 불러온다

//App.js
import { NavigationContainer } from '@react-navigation/native';
import * as Font from "expo-font"
import React, { useEffect } from 'react';
import Stack from './app/navigators/Stack';
import { SafeAreaView } from 'react-native-safe-area-context';


export default function App() {
  useEffect(async() => {
    await Font.loadAsync({
        "SDChild": require("./app/asset/fonts/SDChildfundkorea.otf")
    })
  }, [])
  return (
    <NavigationContainer>
      <SafeAreaView style={{flex:1}}>
        <Stack />
      </SafeAreaView>
    </NavigationContainer>
  )
}

추가된 코드는 다음과 같다

import * as Font from "expo-font"

 

useEffect(async() => {
  await Font.loadAsync({

    "SDChild": require("./app/asset/fonts/SDChildfundkorea.otf")
  })
}, [])

 

6. 사용

font-family: 'SDChild';