React-Native 커스텀 폰트 설치하기

2024. 11. 14. 22:28·Mobile/React Native

React-Native 커스텀 폰트 설치하기

1) 폰트 파일 준비

먼저, 사용할 폰트 파일(예: .ttf 또는 .otf)을 프로젝트에 추가한다. assets/fonts 폴더를 만들고 그 안에 폰트 파일을 넣는게 일반적이다.

2) expo-font 패키지 설치

expo install expo-font

3) 사용하는 폰트 선언

export default function App() {

    const [fontsLoaded] = useFonts({
        JUA: require('./assets/fonts/BMJUA_otf.otf'),
      });

}

const styles = StyleSheet.create({
  fonts: {
    fontFamily: 'JUA',
  }
});

이런식으로 사용하면 된다.

반응형

'Mobile > React Native' 카테고리의 다른 글

React-Native 에서 TextInput 사용해보기  (1) 2024.11.17
React-Native expo 시작하기 (새버전)  (2) 2024.11.15
React Native에서 환경 변수 안전하게 관리방법  (1) 2024.11.13
React-Native 사용팁들 (ios simulator 닫기, Expo 앱에서 Debugger 열기, custom location 설정)  (0) 2024.11.11
React-Native Expo로 위치정보 받아오기  (0) 2024.11.10
'Mobile/React Native' 카테고리의 다른 글
  • React-Native 에서 TextInput 사용해보기
  • React-Native expo 시작하기 (새버전)
  • React Native에서 환경 변수 안전하게 관리방법
  • React-Native 사용팁들 (ios simulator 닫기, Expo 앱에서 Debugger 열기, custom location 설정)
WHITE_FROST
WHITE_FROST
개발공부리뷰블로그
  • WHITE_FROST
    하얀하얀IT
    WHITE_FROST
  • 전체
    오늘
    어제
    • 분류 전체보기 (138)
      • Infra (5)
      • Project & Troubleshooting (14)
        • Troubleshooting (7)
        • Dev Tools (4)
      • Frontend (30)
        • Next.js (9)
        • React (13)
        • TypeScript (2)
        • JavaScript (6)
      • Mobile (17)
        • React Native (16)
        • Android (1)
      • Backend & Data (7)
        • Database (3)
        • Java (1)
        • Python (2)
        • Design Pattern (1)
      • AI (7)
        • Models & API (1)
        • AI Notes (6)
        • AI Tools (0)
        • Local AI (0)
        • Concepts (0)
      • Problem Solving (52)
        • Algorithm Notes (6)
        • Algorithm Practice (46)
      • Growth Log (9)
        • Study Log (6)
        • Tips (0)
        • Etc (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    리액트네이티브
    react-native-maps
    코테
    react-native
    boj
    hooks
    mongodb cloud
    java
    Claude
    React-Native cli
    error
    React Hooks
    d1
    ios
    Ai
    코딩테스트
    Next.js
    reactnative
    javascript
    백준
    D2
    오블완
    ReactHook
    티스토리챌린지
    react
    프로그래머스
    Python
    알고리즘
    Expo
    SWEA
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
WHITE_FROST
React-Native 커스텀 폰트 설치하기
상단으로

티스토리툴바