github 아이콘 깨짐 해결하기

오늘 github에서 아이콘 모양이 깨지는 현상을 발견했다.

기본적으로 나와야 할 저장소 모양 아이콘이나 폴더 아이콘, 파일 아이콘 등이 나오지 않고 이상한 문자 (또는 한글)이 나온다.

처음에 왠 한글이 나와서 놀랬는데, 알고 보니 아이콘이 계속 깨지고 있던 것이었다.

예를 들면 아래와 같이 아이콘이 깨져 보인다.


(이 스크린샷은 Nabi 프로젝트의 github 화면이다.)

여기서 문제는 이 아이콘들은 이미지가 아니라 글자였다. 유니코드에서 개인적으로 사용이 가능한 범위 내에 있는 코드를 이용하여 글자 형식의 아이콘들을 만들어 둔 것이다.

그래서 이 문제를 해결하려고 파이어폭스 버전을 낮추어보기도 했고, 바이너리 버전을 받아서 써보기도 했지만 전혀 해결되지 않았다.

마지막으로 폰트 변경을 해보았는데, 일부 한글 폰트는 위와 같이 나오고, 영문 폰트는 또 다르게 나오는 것이였다. 그래서 "웹에서 사용하는 폰트 허용"을 체크하니 문제가 해결되었다.
(기존에는 은 돋움을 기본 폰트로 계속 쓰려고 이를 해제하고 있었다.)

즉, 폰트 내에 위 글꼴이 당연히 없으니 깨져서 나오고 있던 것이다. 그리고 실제로도, github에서 커스텀 폰트로 octicons 라는 글꼴을 사용하고 있으며, 이들 폰트에서 Private 유니코드 범위 내에 글꼴을 추가하여 사용하고 있다는 것을 알았다.

ps. 예전에 웹 폰트라는 것을 들은 적이 있었는데, 찾아보니 CSS를 이용한 기술이라는 것을 알았다.