react-native-webview에서 로컬(커스텀) 폰트 지정하기

웹폰트

이북 리더 관련 읽기 앱을 개발중이다. https://npmjs.org/react-native-webview-readability를 이용해서 제작중인데, KoPub 폰트를 적용하려면 웹폰트로 적용해야 했다.

const cssInjection = `function hideHead(){
    const style = document.createElement('style')
  style.appendChild(document.createTextNode(\`
    @import url('https://cdn.jsdelivr.net/font-kopub/1.0/kopubbatang.css')
    body {
      font-family: 'KoPub Batang' !important;
    }
  \`))
  document.body.appendChild(style)
}
hideHead()`
<WebView ...props
injectedJavaScript={cssInjection}
/>

이런식으로 style 요소를 만들어서 JS로 주입하는 방식이면 가능하다. 기존에 적용된 스타일은 무시하도록 !important를 잊지 말자.
그렇지만 리디바탕을 적용하려면 아직 웹폰트로 공개된게 없어서 로컬폰트를 적용해야 했다. 사실, 앱의 안정성이나 네트워크 리퀘스트 면에서도 로컬폰트로 하는 편이 깔끔하고 더 좋을 수도 있다.

안드로이드

폰트 파일(ttf, otf)을 android/app/src/main/assets/의 적당한 곳에 넣어두자. assets 폴더가 없어서 필자는 폴더를 생성한 후에 진행했다. 아마도, 폰트파일을 넣고 나서 react-native run-android 명령을 한번 더 해야할것이다.
그런 후에, CSS 부분을

@font-face {
  font-family: 'FONT_NAME';
  src: url('file:///android_asset/FILE_NAME');
}
body {
  font-family: 'FONT_NAME' !important;
}

위와 같이 바꾸자. 리디바탕을 예로 들자면

@font-face {
  font-family: 'RIDIBatang';
  src: url('file:///android_asset/RIDIBatang.otf');
}
body {
  font-family: 'RIDIBatang' !important;
}

이런 모양이 된다.

리디바탕을 적용한 리디북스 페이퍼 프로의 모습이다. 물리키도 작동된다.하하.