React-Native 폰트 적용(android/ios) + Android fontWeight 적용 안되는 문제

dev.horang🐯·2023년 3월 9일
0

React-Native

목록 보기
7/15

Android

android/app/src/main/assets/fonts 이중 하위 폴더 없으면 모두 생성! 해당 폴더 내부에 다운 폰트 추가하면 바로 사용 가능!

**주의할 점!** 안드로이드의 경우 ios와는 다르게 FontWeight를 바꾼다고 해서 자동으로 Light, Bold를 읽어와 주지 않는다. 그냥 해당 부분에 해당 서체를 사용하는것이 최고!
  center: {
    fontWeight: '300',
    fontSize: 12,
    marginVertical: 10,
    fontFamily: 'GmarketSansTTFMedium',
    color: 'black',
  },
    
    위 코드는 android 에서는 기본서체로 바뀌어 나오게 됨 그래서 아래 코드 사용해야 원하는 대로 얇은 서체로 바뀌어 출력
    
  center: {
    fontSize: 12,
    marginVertical: 10,
    fontFamily: 'GmarketSansTTFLight',
    color: 'black',
  },
    

IOS

cd ios 

→ ios폴더로 들어가서 바로 하위 폴더로 Fonts 폴더를 만든다.

→ Fonts 폴더 안에 다운 받은 폰트를 넣는다.

→ Finder를 켜서 프로젝트 ios 폴더 내에 있는 project_name.xcodeproj이나 project_name.xcodeworkspace 를 클릭하여 Xcode 를 연다.

→ Xcode에서 본인 프로젝트 명을 우클릭하여 Add Files to “내프로젝트명”을 선택한다

→ 아까 추가한 ios/Fonts 폴더를 클릭한후 “Create folder references”선택 후 Add로 폴더를 추가한다

→ 좌측 파일 하위항목으로 Fonts 폴더가 생긴것을 확인한다.

→ 좌측에서 프로젝트명 클릭, 우측의 왼쪽메뉴바 Target에서 첫번째 항목 클릭, 우측 상단 메뉴에서 info 클릭하고 +클릭해서 Fonts provided by application 추가한 후에 하위 항목으로 폰트 명 넣어주기(이때 Fonts 폴더의 이름과 똑같이 넣어줘야한다! 확장자명까지!

→ 코드에서 적용하면 적용 완료!

const styles = StyleSheet.create({
  done: {
    fontSize: 20,
    marginVertical: 25,
    fontFamily: 'GmarketSansTTFMedium',
    color: 'black',
  },
});
  • ios의 경우 fontWeight올리거나 내리면 자동으로 Light, Bold체로 전환되더라
profile
좋아하는걸 배우는건 신나🎵

0개의 댓글