[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 폰트를 인지하지 못하기 때문이다.

 

 

참고 자료

https://stackoverflow.com/questions/38815234/how-to-add-fonts-for-different-font-weights-for-react-native-android-project