[React Native] 알아두면 좋을 Font 적용 이슈
최근 커스텀 폰트를 RN에 적용하면서 한 가지 문제를 발견했다.
Campton이란 폰트를 앱에 적용한 뒤 사용을 하려고 하는데, Android와 iOS에서 같은 폰트 파일을 asset으로 추가해 놓아도 적용되는 방식이 다른 것이었다.
Campton-Bold.otf
Campton-Light.otf
라는 두 개의 파일을 적용하는데, iOS에서는 fontFamily를 적용할 때 'Campton'을 적용해도 정상적으로 나왔고, 'Campton-Bold' 라고 파일 명을 입력해서 정상적으로 폰트 적용이 되었다.
/* ios */
// ok
.text {
fontFamily: 'Campton',
fontWeight: 'bold', // 'light'
}
// ok
.text {
fontFamily: 'Campton-Bold', //'Campton-Light'
}
'Campton'을 적용할 때는 fontWeight을 bold나 light로 선택 적용이 가능했다. 아마 당연한 얘기를 하고 있을거라 생각을 할 수도 있겠다.
그런데 Android에 같은 파일을 추가하고 적용해보니 'Campton'으로는 폰트 적용이 되지 않았고, 무조건 파일이름으로만 적용 가능했는데 그 말은 fontWeight를 적용할 수 없다는 얘기다.
/* Android */
// ok
.text {
fontFamily: 'Campton-Bold', // 'Campton-Light'
}
// not ok
.text {
fontFamily: 'Campton',
fontWeight: 'bold',
}
// not ok
.text {
fontFamily: 'Campton-Bold',
fontWeight: 'bold',
}문제는 fontWeight를 normal로 두지 않으면 폰트 적용이 되지 않는다.
사실 가장 단순한 해결법은 파일명을 쓰면 되는 것이다. 그런데 이게 왜 문제가 될까? 폰트가 지원하지 않는 언어가 있기 때문이다. Campton의 무료버전은 한글지원이 안되는 명확한 제약이 있다. 예를 들어 Campton Bold를 기본으로 적용하되 한글이 나왔을 때 일단 폰트의 bold 로 적용을 해야 한다는 디자인 요구사항이 있을 때는 해결할 수 있는 방법이 없다.
fontWeight을 bold로 적용하는 순간 Campton Bold 폰트를 인지하지 못하기 때문이다.