[CSS] safari 폰트 관련 크로스 브라우징 이슈

WebView를 사용한 RN 프로젝트에서 ios는 폰트가 제대로 적용되지 않는 이슈가 있었다.

 

먼저 font-family의 적용 원리를 찾아보았다.

font-family 의 원리

font-family: [1순위], [2순위], [3순위], [...] 와 같은 원리로 현재 OS 에 있는 폰트가 적용된다고 알고 있습니다. 하지만 이렇게만 알면 안되고 정확한 알고리즘을 알아야 합니다. 알고리즘은 다음과 같습니다.

1. [1순위]의 폰트가 OS 에 있는지 확인한다. 있으면 그것을 바로 적용한다.
2. 없으면 웹서버에 정의된 웹폰트가 있는지 확인한다.
3. 웹서버에 웹폰트가 있으면 다운을 받고, 없으면 [1순위]의 폰트는 없다 간주하고 [2순위]의 폰트를 검사하기 시작한다.
4. 1~3의 작업을 반복한다.
   
   
   
   
   

문제는 OS에 적용하려고 했던 폰트가 없어서 ios에서는 디폴트 폰트가 적용되고 있던 것이였다.

public에 _font.scss 파일을 만들어주고 @font-face로 직접 폰트 파일을 로드해주었다.
global.scss에 import하여 간단하게 문제를 해결할 수 있었다.