안드로이드 웹뷰 FontAwesome 이슈 처리

며칠 전 앱개발자의 피드백

모바일 마크업을 안드로이드 웹뷰에 적용하면서 FontAwesome 폰트가 제대로 표현되지 않는 문제가 있더군요.

관련 이슈를 찾아 해결책은 찾았지만 원인은.. 추측만 할 뿐입니다.

트러블슈팅

안드로이드 개발단 or 마크업에서 각각의 해결 방법을 제공하는데 여기서는 마크업 부분만 기록합니다.

관련자료 : https://blogs.msdn.microsoft.com/wsdevsol/2012/10/23/about-webview-and-fonts/

간단히 요약하면 웹폰트 파일을 base64로 인코딩한 외계문자들을 CSS 내부에 직접 작성합니다.

1. ttf, woff 등의 폰트 파일을 base64 로 인코딩 

   (온라인 웹폰트 변환 서비스 : https://www.fontsquirrel.com/tools/webfont-generator )

   폰트 파일을 선택하고 Expert  >  옵션에서 base64 encode 를 선택  >  Agree 에 체크하면 다운로드가 가능합니다. 

2. 다운로드한 파일을 적용합니다. (끝)

참고

파일 중 stylesheet.css 파일을 열어보면 font-face url 부분에 base64 인코딩된 문자들이 보이는데

일반 이미지들 또한 base64 인코딩으로 전환 후 사용하면 모바일 퍼포먼스 향상에 도움이 됩니다.

@font-face {
    font-family: 'fontelloregular';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAA~~~~생략~~~~I0V3+R/Sm4myBmv2i9Sms5H1b9whqQjVy8ncBAAAA) format('woff2'),
         url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAA~~~~생략~~~~xRgYrWCGwEFlLsBRSWChZsBQrAAAAAVfh7C0AAA==) format('woff');
    font-weight: normal;
    font-style: normal;

}

fin.