크롬 폰트 변경하기 (크롬 59버전 업데이트 기준)

Tip/PC활용 2017. 6. 19. 21:05

안녕하세요.

얼마전에 크롬이 업데이트되면서 또 폰트 렌더링 방식이 바뀌었는지 비트맵 폰트들의 표현이 이상하게 보이게 되었습니다.

특히 굴림이나 돋움같은거 말이죠.

예전에 DirectWrite 기능을 강제로 꺼버려서 해결하곤 했는데 이젠 그런것도 불가능해졌고요.

크롬에 기본적으로 있는 폰트 변경 기능이 있지만 이것을 사용해도 실제 웹 페이지에선 폰트가 변경되지 않습니다.

물론 변경되는 웹 페이지도 있습니다만 강제로 지정된 폰트를 보여주는 웹 페이지에서는 무소용이죠.

그래서 폰트를 변경하는 방법을 소개합니다.

일단 변경할 폰트가 필요하겠죠?

저는 애플산돌고딕네오와 나눔바른고딕 폰트를 추천합니다.

그 둘이 가장 덜 부자연스럽게 보이더군요. 기존 웹페이지 레이아웃을 가장 덜 헤치는 자간과 장평을 가진듯 합니다.

애플산돌고딕네오 폰트는 유료 폰트이거나 맥OS에 제공되는 폰트입니다.

나눔바른고딕 폰트는 네이버에서 무료 배포하는 폰트입니다.

http://hangeul.naver.com/2016/nanum

크롬 확장 프로그램을 설치합니다.

https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=ko

Stylish라고 사용자 설정 CSS를 가능하게 해줍니다.

18년 7월초에 stylish에 스파이웨어가 포함되어있다고 하여 파폭과 크롬 웹스토어에서 퇴출당한걸로 보입니다.

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ko

stylus를 설치하세요.

설치 후 아이콘을 우클릭해서 Open styles manager를 클릭합니다.

write new style 버튼을 눌러 새로운 스타일을 만듭니다.

아래의 CSS코드를 복사&붙여넣고 스타일 이름(나눔바른고딕가늘게)을 입력하고 SAVE를 합니다.

그럼 기본적으로 모든 사이트에서 지정된 폰트(나눔바른고딕가늘게)로 표시됩니다.

다른 비슷한 확장 프로그램은 일단 기본 설정된 폰트가 보이고 그 다음에 사용자가 지정한 폰트로 변하는데, 이 확장 프로그램은 처음부터 사용자가 지정한 폰트로 보입니다.

그외 다른 테마화 기능도 있는것 같습니다만 그런 기능은 사용하지 않아서 잘 모르겠네요.

설치 후 새 스타일을 만듭니다.

나눔바른고딕 가늘게

@font-face {
    font-family: "Malgun Gothic";
     src: local("NanumBarunGothicLight");
}
@font-face {
    font-family: "맑은 고딕";
     src: local("NanumBarunGothicLight");
}                                                
@font-face {
    font-family: "돋움";
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: "돋움체";
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: dotum;
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: DotumChe;
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: "굴림";
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: "굴림체";
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: Gulim;
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: GulimChe;
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: "바탕";
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: "바탕체";
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: Batang;
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: BatangChe;
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: "궁서";
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: "궁서체";
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: Gungsuh;
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}
@font-face {
    font-family: GungsuhChe;
    src: local("NanumBarunGothicLight"), local("Malgun Gothic");
}

맑은 고딕의 경우

@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: "Malgun Gothic";
     src: local("AppleSDGothicNeo-Regular");
}
@font-face {
    font-family: "맑은 고딕";
     src: local("AppleSDGothicNeo-Regular");
}                                                
@font-face {
    font-family: "돋움";
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: "돋움체";
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: dotum;
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: DotumChe;
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: "굴림";
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: "굴림체";
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: Gulim;
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: GulimChe;
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: "바탕";
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: "바탕체";
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: Batang;
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: BatangChe;
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: "궁서";
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: "궁서체";
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: Gungsuh;
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}
@font-face {
    font-family: GungsuhChe;
    src: local("AppleSDGothicNeo-Regular"), local("Malgun Gothic");
}

위의 코드를 붙여넣고 스타일 임의의 이름으로 저장(Save)합니다.

저장하면 그 후 부터 폰트가 바뀝니다.

돋움,굴림,바탕,궁서체의 비트맵 폰트를 애플산돌고딕네오 폰트로 변경하고 없으면 맑은 고딕으로 변경하는 CSS입니다.

맑은 고딕도 산돌고딕네오로 변경하는 겁니다.

다른 폰트는 "AppleSDGothicNeo-Regular" 부분을 변경하면 됩니다.

나눔바른고딕이라면 "NanumBarunGothic"이겠죠.

앞으로 또 어떻게 크롬의 렌더링 방식이 바뀔지 모르겠습니다.

따라서 미래엔 이러한 방법도 효과가 없을수도 있습니다.