윈도우 크롬에서는 보기 싫은 굴림이 여전히 자주 출몰합니다.

클리어타입 폰트와 한 페이지에 섞이면 훨씬 더 보기 싫더군요.

 

 

 

크롬에서 굴림을 추방하기 위해 그동안 CSS를 활용한 다양한 방법이 시도되었습니다.

초기에 알려진 방법 ( * { font-family: Malgun Gothic !important; }  )은 영문 사이트들의 폰트까지

전부 맑은고딕 하나로 통일시켜버리거나, 웹폰트 아이콘이 전부 깨져 나온다는 단점이 있었습니다. 

 

이후 웹폰트와 해외사이트를 표시히기 위해 굴림,돋움,바탕 등의 한글폰트만을

맑은고딕으로 바꿔 표시해주는 방법이 알려졌는데요,

이건 아래와 같이 볼드가 이상하게 표시되는 단점이 있더군요. 

 

 

 

그래서 저는 알려진 팁에 약간의 볼드 옵션을 더해보았고, 결과에 만족하며 사용하고 있습니다.

이 방법을 적용하면 아래와 같이 볼드까지 정상적으로 표시됩니다.

 

 

 

 

 

처음 접하시는 분들을 위해서 전체 과정을 설명하겠습니다.

 

- 크롬 확장프로그램 stylish 설치

 

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

 

 

- stylish 옵션에서 Write new style 버튼 메뉴 진입후 아래 값 입력 (파일로도 첨부되어 있습니다) 

 

 

@font-face { 

    font-family: "돋움"; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: "돋움체"; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: dotum; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: DotumChe; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: "굴림"; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: "굴림체"; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: Gulim; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: GulimChe; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: "바탕"; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: "바탕체"; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: Batang; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: BatangChe; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: "궁서"; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: "궁서체"; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: Gungsuh; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: GungsuhChe; 

    src: local("Malgun Gothic"); 

} 

 

@font-face { 

    font-family: "돋움"; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: "돋움체"; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: dotum; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: DotumChe; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: "굴림"; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: "굴림체"; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: Gulim; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: GulimChe; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: "바탕"; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: "바탕체"; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: Batang; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: BatangChe; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: "궁서"; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: "궁서체"; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: Gungsuh; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

@font-face { 

    font-family: GungsuhChe; 

    src: local("Malgun Gothic"); 

    font-weight: bold;   } 

 

body { font-family: "Malgun Gothic" ; }

 

- Save 버튼으로 저장

 

이렇게 해서 적용하면 그나마 가장 보기 좋은 화면이 되더군요.

하지만 여전히 완벽하지는 않은 것 같습니다. CSS에 대해 더 많이 알고계신 분들의 조언 부탁드립니다.

 

참고 URL 

 

Dozen님 - 파이어폭스, 크롬에서 글꼴을 원하는대로 바꾸고 깨지는 아이콘 나타나게 하기

( http://www.clien.net/cs2/bbs/board.php?bo_table=lecture&wr_id=247310CLIEN )

 

PS44444님 - 윈도우 HiDPI 환경에서 크롬용 스타일시트(CSS) 설정을 통해 웹 한글 폰트 깨끗하게 보는 법.

( http://www.clien.net/cs2/bbs/board.php?bo_table=lecture&wr_id=307026CLIEN )