[React Native] custom font 설정

React 목록

 

구글 Noto KR 폰트 다운로드 

https://fonts.google.com/noto/specimen/Noto+Sans+KR 

Download family 로 폰트 다운로드합니다.

 

 

 

StyleSheet에 적용

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

const HomeScreen = () => {
  ...
  return (
    <View>
      <Text style={styles.keypadNumber}>C</Text>
    </View>
  );
};
export default HomeScreen;

const styles = StyleSheet.create({
  ...
  keypadNumber: {
    ...
    fontFamily: 'Noto Sans KR',
  },
  ...
});

font를 인지하지 못합니다.

 

 

 

iOS 폰트 설정

$ mkdir src/ios/fonts

fonts 폴더에 폰트를 복사합니다.

 

XCode 실행

project_name.xcworkspace 파일을 실행해서 XCode를 실행합니다.

 

Add Files to "Project_Name"을 선택합니다.

 

 

fonts 폴더를 선택하고,

create folder reference를 선택하고 Add 합니다.

 

 

Targets > Info > Custom iOS Target Properties에서

Fonts provided by application을 추가하고

Item 0에 font 경로를 추가합니다.

fonts/NotoSansKR-Light.otf

Item 1, Item 2,... 해서 여러개 추가할 수 있습니다.

 

 

 

 

Android 폰트 설정

android/app/src/main/assets/fonts 폴더를 만들고

폰트를 붙여넣기 합니다.

 

 

react-native를 다시 실행합니다.

 

 

 

React 목록