건의/이용문의

씨네스트 접속할 때 크롬에서 폰트 설정

S 신동휘 21 1,856

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

최근까지 userScriptCSS 라는 확장 프로그램을 사용해 크롬의 폰트를 '나눔바른고딕'으로 강제로 적용해서 사용해 왔습니다.

한데, 리뉴얼 하고 난 뒤부터 '아이콘 웹 폰트'를 사용하다 보니 문제점이 '아이콘들이 깨져 나온다'는 것입니다.

그동안은 아이콘들이 깨져 불편한 것보다 가독성이 우선이라 불편하지만 참고 사용해 왔습니다.

그러나 나눔 글꼴도 오랫동안 사용했고, '아이콘 웹 폰트'를 사용하는 사이트에 접속하는 빈도가 점점 늘어나서

최근 며칠 동안 다른 폰트로 바꾸면서 아이콘들이 깨져 나오는 문제를 해결하려고 방법을 찾아봤습니다.

 

a0e3fa93f1cdd32b6d770acc61050b92_1474629956_296.png 

1. 왼쪽 그림은  

    ① 제가 원하는 폰트(KoPub돋움체 Medium)와 굵기로 설정한 것인데, 메뉴 버튼의 아이콘이 깨져서 나옵니다.

        나머지 아이콘들도 깨지지 않고 모두 제대로 나왔으면 좋겠습니다.

    ② MacType 2013.1231.0을 설치한 상태에서, Font Changer with Google Web Fonts™ 3.0.2를 사용해서

        'Kopub돋움체 Medium.ttf' 파일을 woff로 변경한 뒤에 Font Weight를 Bold, 150% 확대한 그림입니다.

        평소에도 브라우저의 확대 배율을 150% 또는 175%로 조절해서 사용합니다. 해상도: 1920 x 1200

    ③ '아이콘 웹 폰트'를 사용하지 않는 사이트(Google, Naver, Daum 등)에 접속해 보면 폰트 설정이 아주 마음에 듭니다.

        아주 불편한 사이트는 두말하면 잔소리인 ① 씨네스트 ② http://www.blu-ray.com/ 등 '아이콘 웹 폰트'를 사용하는 사이트입니다.

2. 오른쪽 그림은

    ① 제가 원하는 폰트(KoPub돋움체 Medium)만 설정한 것이고, 메뉴 버튼의 아이콘이 정상적으로 나옵니다.

    ② Stylish 1.5.2를 사용해서 몇 개의 폰트[ 돋움(체), 굴림(체), 바탕(체), 궁서(체), Arial ]만 KoPub돋움체 Medium으로 설정했는데,

        왼쪽 그림과 똑같게, 굵기를 설정할 수 있으면 좋겠는데, 어떻게 해야 하는지 몰라 검색하면서 지금 공부하고 있습니다.

        font-weight: 값(bold, 500 등)을 변경해 봤지만, 같은 효과가 나오지 않습니다. 

 

3. 컴퓨터 환경은 Windows 7 SP1, Chrome 버전 53.0.2785.116 m입니다.

    또한 MacType를 설치한 상태에서, 다음의 확장 프로그램을 사용해서 설정해봤습니다.

    ① Stylish 1.5.2

    ② 强制网页使用自定义字体 2.3.1.0

    ③ Font Changer with Google Web Fonts™ 3.0.2

    ④ Change Font Family Style 2.6

    ⑤ userScriptCSS 1.4

 

(제가 하고 싶은 것은)

왼쪽 그림과 똑같게 폰트를 설정하고(아주 마음에 들고 좋습니다), 아이콘들도 깨지지 않고 제대로 나오게 하는 것입니다.

 

제 컴퓨터가 구석기 유물이라... 부담은 적고, 속도는 빠르고, 품질은 좋았으면 합니다.

두 가지(① 폰트 ② 아이콘)를 모두 만족하는 설정을 아직 찾지 못해서 도움을 청합니다.

검색해서 이것저것 설정해 봤지만, 제 능력 밖이라 능력 있는 분의 도움이 절실합니다. 도와주십시오. 

 

 

(2016. 09. 25. 06:30 추가했습니다.)

 

제가 원하는 폰트로 설정했을 때(위쪽)font-weight: bold로 설정했을 때(아래쪽) 모습입니다. 클릭하면 큰 그림으로 볼 수 있습니다.

  

96fbc9db2c53ffc447c2e942a71878aa_1523734150_6678.png

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오스토리로 보내기
  • 네이버밴드로 보내기
  • 네이버로 보내기
  • 텀블러로 보내기
  • 핀터레스트로 보내기

Comments

15 이스라필
저랑 같은 고민을 하셨네요.
폰트 강제 설정 시 아이콘까지 폰트가 변경되면서 깨짐 현상이 일어나는데
현재 분리 설정과 같은 100% 완벽한 방법은 아직 나오지 않은 걸로 알고 있어요.

아래와 같은 방법도 있으니 참고 하시라고 알려드립니다.
OS에 상관 없이 적용 가능하다고 하네요.
http://macnews.tistory.com/1871
S 신동휘
내용을 확인해보니 제가 설정해본 방법이네요. (오른쪽 그림)
2. ② Stylish 1.5.2를 사용해서 몇 개의 폰트[ 돋움(체), 굴림(체), 바탕(체), 궁서(체), Arial ]만 KoPub돋움체 Medium으로 설정했는데...
도움받은 사이트 ☞ http://arkaeins.tistory.com/174

원하는 폰트 설정을 위한 해결책은 CSS에 있다고 판단해서, 요즈음 며칠 동안 HTML5와 CSS 3.0에 대해 공부하고 있습니다.
정말 오랜만에 공부해보지만 아주 흥미롭게 재미있습니다. 아무튼, 정보 감사합니다.
15 이스라필
저게 굵기 자체가 단순 볼드가 아닌 더 두꺼운 더블볼드 일 거에요.
근데 글씨체 자체는 확장프로그램으로 쉽게 표현 가능하니까
CSS 쪽에서 아이콘 폰트 쪽에 변경을 줘야하는데 방식이 딱히 나와있질 않네요
S 신동휘
이스라필 님!
단 0.01% 아쉽지만, Fyou 님의 도움으로 드디어 해결했습니다.
여분의 HDD에 Windows 7 새로 설치해서 확인하느라 시간이 조금 걸렸습니다.
정리해서 추가로 댓글 남겼습니다. 고맙습니다.
17 Fyou
아이콘 까지 다 되는데...굵기가 안된다는 말이죠?

스타일리쉬에서 새 스타일을 만들고

*  {
    font-weight : bold;
}

저장...끗
S 신동휘
이것저것 설정을 바꿔가면서 원하는 폰트 설정이 가능한지 확인하느라, 답글이 늦었습니다.
Stylish에서 font-weight: bold로 설정한 후, 화면 캡처를 해 확대해서 비교해보니, 차이가 크게 납니다.
어떻게 설정해야 하는 지 '자세히' 알려주시면 많은 도움이 되겠습니다.
제가 원하는 폰트로 설정했을 때(위쪽)와 font-weight: bold로 설정했을 때(아래쪽) 모습을 게시글에 추가했습니다. 고맙습니다.
17 Fyou
위에서 원하는 폰트 적용했다고 해서 굵기만 적은 건데.....
후에 올린 이미지에서 아래그림은 폰트가 적용 안된 상태 같네요. 무슨 폰트 적용 중인가요? 윗쪽 거
크롬 설정에서 폰트를 님이 원하는 걸로 바꿔주세요...모두....
S 신동휘
크롬의 설정 - '글꼴 맞춤설정...'에서 글꼴은 당연히 & 모두 'Kopub돋움체 Medium'으로 설정했습니다.

후에 올린 이미지에서 위쪽 그림은
1.
    ② MacType 2013.1231.0을 설치한 상태에서, Font Changer with Google Web Fonts™ 3.0.2를 사용해서
        'Kopub돋움체 Medium.ttf' 파일을 woff로 변경한 뒤에 Font weight를 Bold로 설정한 그림입니다.

아래쪽 그림은
2.
    ② Stylish 1.5.2를 사용해서 몇 개의 폰트[ 돋움(체), 굴림(체), 바탕(체), 궁서(체), Arial ]만 KoPub돋움체 Medium으로 설정한 상태에서,
말씀하신 대로... 스타일리쉬에서  font-weight : bold; 를 추가로 적용했습니다.
※ 추가로 스타일리쉬에서 새 스타일을 만들고  *  { font-weight : bold; } 저장...끗 해서 적용해도 외견상 모양은 아래쪽 그림과 똑같습니다.
--------------------------------------------------------------------

다시 처음 질문으로 돌아갑니다.

(제가 하고 싶은 것은)
왼쪽 그림(= 후에 올린 이미지에서 위쪽 그림)과 똑같게 폰트를 설정하고(아주 마음에 들고 좋습니다), 아이콘들도 깨지지 않고 제대로 나오게 하는 것입니다.
17 Fyou
안되네요...마지막으롤 한번만 ...

현재 이걸 하는 이유는 [MacType 2013.1231.0을 설치한 상태에서] 이후, 아이콘이 안나와서 하는 건가요?
S 신동휘
네, 그렇습니다.
17 Fyou
그럼 마지막으로...진짜로 마지막입니다.. 괜히 아는 척 나서서....
스타일리쉬에서 아래 코드로 테스트해보세요...안되면...이젠...ㅎㅎ

@-moz-document regexp('.*'){
  *{
    font-family: "KoPubDotumMedium" !important;
  }
}

/*@-moz-document domain('cineaste.co.kr'){
*  {
    font-family:  "KoPubDotumMedium",iconfont !important;
}
}
S 신동휘
Fyou 님! 고생 많이 하셨습니다. ㅎㅎㅎ
유쾌하고 멋지고 신나는 휴일 보내세요~~~ +
S 신동휘
제 아이디어는 이렇습니다.
Font Changer with Google Web Fonts™ 3.0.2에서
글꼴: 'Kopub돋움체 Medium.ttf', Font Weight: Bold로 설정한 것을 그대로 가져와서
Stylish 1.5.2에 설정하면 될 것 같은데, 현재는 제 능력 밖의 일이라 그림의 떡입니다.
17 Fyou
정말 마지막...ㅋㅋ
최대한 비슷하게 하려고 했는데...

*{
  font-family : 'KoPubDotumMedium' !important;
  font-weight : bold !important;
  font-size : 12px;
}

*
[class*="fa"]{font-family:"KoPubDotumLight",FontAwesome !important;
}
S 신동휘
유레카!
Fyou 님! 진심을 담아 보내는 저의 감사의 박수입니다.
S 신동휘
오늘까지 폰트 설정 문제를 꼭 해결하고 싶었는데, 드디어 해결 했습니다.
간단한 발상의 전환이 문제 해결의 키(key)였습니다. 출석 1등 했을 때보다 더 기쁩니다.
여분의 HDD에 Windows 7 새로 설치해서 확인하느라 시간이 조금 걸렸습니다.
정리해서 별도로 댓글 남기겠습니다.
S 신동휘
너무 고생 많이 하셨습니다. 정말 고맙습니다.
이 모든 게 Fyou 님 덕분입니다.
S 신동휘
(제가 하고 싶은 것은)
왼쪽 그림(= 후에 올린 이미지에서 위쪽 그림)과 똑같게 폰트를 설정하고(아주 마음에 들고 좋습니다), 아이콘들도 깨지지 않고 제대로 나오게 하는 것입니다.

최종적으로 작업한 내용을 정리했습니다. 많은 분이 활용했으면 합니다.

FontAwesome! ← 너야말로 나의 구세주~~~

(결론)
두 개의 확장 프로그램(① 폰트만 설정 ② 아이콘만 설정)을 '동시에 사용'하는 것입니다.
① Font Changer with Google Web Fonts™ 3.0.2에서
    글꼴: 'Kopub돋움체 Medium.ttf' 또는 woff, Font Weight: Bold로 설정
② Stylish 1.5.2에서는 새 스타일 쓰기(Write new style) 해서 다음의 3줄만 입력하고 저장(Save)
    *
    [class*="fa"]{font-family:FontAwesome !important;
    }

③ MacType 2013.1231.0은 크롬에서만 폰트 설정하려면 설치할 필요가 없습니다.
    윈도 폰트까지 설정하려면 설치해야 합니다. ☞ http://arkaeins.tistory.com/174
④ 0.01% 아쉬운 것은, 모든 폰트가 'KoPub돋움체 Medium'으로 강제로 설정된다는 점입니다.
    몇 개의 폰트[ 돋움(체), 굴림(체), 바탕(체), 궁서(체) ]만 KoPub돋움체 Medium으로 설정하고 싶었는데...
    영문 폰트의 가독성이 떨어지면, 지금처럼 확장 프로그램을 잠시 '사용 중지'하면 되니까 문제없습니다.
⑤ 조~오~금 불편하지만, 폰트 설정한 결과는 아주 많이 흡족합니다.
⑥ 도움주신 이스라필 님, Fyou 님! 대단히 고맙습니다.
1 진한
리플 달기위해서 가입했습니다.

저도 그 아이콘 깨짐이 너무 보기싫어서
사방 팔방 알아보다가 포기하고있기를 5개월 넘었는데
이런곳에서 집념으로 해결보신분이 계시니 감개가 무량합니다 ㅎㅎ

두분이 저의 구세주세요. 감사드립니다.
20 CINWEST
와... 이 분들 진정 능력자!
자막 제작뿐만 아니라 다방면으로 잘 아시는 분들이군요~ㄷㄷㄷㄷ
S 신동휘
( 2018. 07. 12. 06:26 추가합니다. )

1. 스피리투스 님의 제보
    https://en.wikipedia.org/wiki/Stylish
    여기 보니, 사용자의 브라우징 이력을 추적하여 특정 서버로 전송하는 보안 문제가 발견되어 퇴출되었다고 합니다.

2. 얼마 전 소프트웨어 엔지니어인 로버트 히튼 (Robert Heaton)이 Stylish 확장 프로그램이 스파이웨어 동작을 한다고 알렸습니다.
        ☞ https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/
    결국 Chrome Web Store에서 퇴출당하였고, 기존의 확장 프로그램 링크는 404 오류로 접속 자체가 불가능합니다.
    기존에 설치된 건 사용에 문제는 없지만, 개인정보 보호에 취약하다고 하니 < 삭제할 것을 권고 > 합니다. 

3. 대체할 수 있는 확장 프로그램은 Stylus입니다. 사용법은 Stylish와 거의 같습니다.
        ☞ https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?utm_source=chrome-ntp-icon
    출처: http://w3tech.tistory.com/377