ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Firefox 에서 Stylish 를 이용해서 아이콘 웹 폰트 표시
    소프트웨어 2015.01.06 17:25

    평소에 줄로 사용하는 브라우저가 Firefox Chrome 입니다.

    이 두 브라우저를 사용 하는 것에 있어 폰트 설정을 각 사이트에 설정되어 있는 폰트를 사용하기보다는

    주로 사용하는 나눔고딕 같은 폰트로 강제 적용해서 사용해오고 있었습니다.

    하지만 이 같은 방법으로 폰트 설정을 강제 적용을 할 시에 문제점이

    Github 와 같이 아이콘 웹 폰트를 사용하는 곳에서는 아이콘들이 깨져 나온다는 것이지요


    아이콘이 다 깨져 보임



    이렇게 아이콘들이 깨져 나오는 이유는 강제로 설정한 폰트( 저는 나눔고딕을 사용)에 해당 아이콘들에 대한 정보가 없기때문입니다.


    그동안은 해결방법을 찾을수가 없었고 Github Twitter 같은 사이트를 국내 사이트보다는 적게 다니고 국내 사이트들의 굴림 폰트는 도저히 참을수가 없어서 그냥 저렇게 사용을 해왔습니다.


    하지만 아무래도 먹고 사는게 개발자일이다보니 Github 같은 사이트 방문수가 증가하기 시작했고 또 해외 웹 트랜드가 Github 처럼 아이콘 웹 폰트를 쓰는 사이트들이 많아져서

    이걸 해결해봐야겠다 싶어서 방법을 많이 찾아보았습니다.


    그러다가 우연히 Macbook Air 에서 사파리로 Github 를 들어갈 일이 있었는데 아이콘이 잘나오는걸 보게 되었습니다.

    주 브라우저가 Chrome Firefox 지만 맥에서는 가끔씩 싸파리도 쓰는지라 분명 애플산돌네오고딕으로 설정을 해놨음에도 왜 잘나올까 싶어 알아보았습니다.


    사파리에서 폰트 설정은 Back to the mac웹브라우저용 스타일 시트 포스팅을 보고 설정했었습니다.

    그동안 그냥 아무 생각없이 저 포스팅대로 CSS 파일을 적용해서 사용해왔었는데

    워낙 사파리 사용빈도가 낮다보니 저 CSS 파일을 들여다 볼 생각을 전혀 못한데다가

    사파리에서 아이콘 웹 폰트가 잘 나온다고 전혀 의식을 못하고 있엇거든요.......


    사파리에서 아이콘 웹 폰트가 잘 나오는 것을 보고나니 저 설정을 Firefox Chrome 에서 적용해보려고 시도해보았습니다.

    Chrome 은 제 블로그에서 이전에 다뤘던 크롬 글꼴 강제 설정 포스팅에서 사용한 확장기능을 사용해서 손쉽게 해결을 했습니다.


    하지만 Firefox 는 딱히 방법이 쉽게 찾기가 힘들었었는데 전부터 몇몇 사이트의 레이아웃을 변경할때 사용해오던 Stylish 가 생각이 났습니다.


    1. Firefox Stylish 확장 설치

    [ Firefox Stylish 확장 ]


    2. Stylish 관리자 창에서 다음 CSS 구문 입력



    3. Firefox 폰트 설정에서 다음과 같이 설정




    웹 페이지에서 지정한 글꼴 사용 허용의 체크 박스를 활성화 해줍니다.



    이런식으로 설정을 하게 되면 기본적으로 웹 페이지에서 설정되어 있는 폰트가 적용되다가

    CSS font-family 로 설정된 폰트를 사용하는 페이지에서는 local 로 셋팅된 폰트로 나오게 됩니다.


    전에는 모든 사이트에 강제로 원하는 폰트를 설정했지만 이 방법은 변환하고자 하는 폰트를 지정해서 설정하는 방식입니다.


    이제 아이콘이 잘 보입니다.



    댓글 4

    • 김감사 2015.07.06 18:25

      안녕하세요 우연히 와서보고 큰도움 얻고 갑니다. 어디에 물어봐도 없었는데, 이렇게 알고가네요. 그런데 크롬에도 stylish로 적용해서 쓰고있고, 파폭에서도 쓰고 있는데 신기하게 파폭에만 클리어타입이 적용되는 거 같네요

    • 김감사 2015.07.06 18:27

      그리고 로마자가 설정을 굳이 나눔고딕으로 해야 되는 연유가 궁금합니다. 그냥 한국어로 하면 안되는것인가요?

      아무튼 덕분에 각종 사이트에서 가끔 깨지는 답답함을 해결할수 있어서 다시한번 감사드려요. 아오 인터넷 다른데 물어도 아무도 잘 현상을 모르고 있어서. 딴사람들이 파폭 나눔고딕을 써보면 알텐데 하는 생각만 ㅋㅋ

      • BlogIcon 환상경 2015.07.06 23:31 신고

        덧글 보고 스샷보니 로마자로 되어있네요 으헠ㅋㅋㅋㅋ
        저거 제가 잘못 찍은거에요
        저기서 중요한건 하단에

        웹 페이지에서 지정한 글꼴 사용 허용의 체크 박스를 활성화 해줍니다.

        요거때문에 찍은거였는데 미처 로마자 부분을 못봤었네요 ^^;;

    • 야간비행 2015.08.25 10:37

      안녕하세요. 저도 같은 문제 때문에 고민하다가 많은 도움 얻고 갑니다.
      고맙습니다. :)

Designed by Tistory.