크롬에서 글꼴 바꾸는 확장프로그램 추천과 이로 인한 특정 사이트 아이콘 안깨지게 하는 방법

제가 구글 본고딕을 굉장히 좋아하는 이유로 웹사이트를 볼때 본고딕으로 보는걸 좋아합니다.

구글 본고딕(Noto Sans CJK KR)을 다운 받으려면 아래 주소로 가셔서 Noto Sans CJK KR을 다운로드 받으시면 됩니다.

용량은 약 121메가 정도 됩니다. 설치하는 방법은 생략할께요.

https://www.google.com/get/noto/#sans-kore

Google Noto Fonts

 

크롬에서는 확장프로그램을 써야 내가 원하는 폰트로 바꿔서 볼수 있는데요.

추천하는 확장프로그램은 Force Custom Fonts 입니다.

확장프로그램 Force Custom Fonts 주소: https://chrome.google.com/webstore/detail/force-custom-fonts/hckjchjpkmbihoocajjpjajkggbccgee?utm_source=chrome-ntp-icon

Force Custom Fonts

 

설치후 크롬 툴바에 보면 아래와 같은 아이콘이 나타나는데요.

 

아이콘에서 오른쪽 마우스를 눌러 옵션을 눌러보면 아래와 같이 나옵니다.

여기서 내가 좋아하는 폰트를 지정해주면 됩니다. 저는 본고딕(Noto Sans CJK KR)을 좋아해서 이 폰트로 지정을 해줬습니다.

 

제가 이 확장프로그램을 추천하는 이유는 다른 폰트 변경 확장프로그램들은 모든 폰트를 제대로 바꿔주질 못하지만 Force Custom Fonts 확장프로그램은 전부 지정한 폰트로 바꿔줍니다. 제가 여러가지 써봤지만 이 확장플고그램이 제일 확실하게 바꿔줍니다.

그런데 만약 이런 폰트변경 확장프로그램을 이용해서 폰트를 변경했는데 내가 가는 사이트의 아이콘이 깨져서 보이는 경우가 있을수 있습니다. 이럴땐 이 확장프로그램의 사용을 포기할수밖에 없겠죠. 아이콘이 깨지는 사이트가 없다면 굳이 사용하지 않을 이유는 없습니다.

아이콘 등이 깨져 보이게 된다면 위 확장프로그램은 삭제하고 아래의 확장프로그램을 설치해서 사용하면 되는데 이에 대한 사용법을 알려드리겠습니다.

STYLUS라는 확장프로그램을 설치합니다. 크롬 스토어에서 검색하면 두가지가 나오는데 같은 겁니다.  저는 그냥 베타버전으로 설치를 했네요.

https://chrome.google.com/webstore/detail/stylus-beta/apmmpaebfobifelkijhaljbmpcgbjbdo?utm_source=chrome-ntp-icon

Stylus (beta)

툴바의 스타일러스 아이콘을 눌러서 Manage를 눌러주세요

 

 

그러면 아래와 같은 화면이 나오는데 Write new Style를 누릅니다.

 

 

그런 후 왼쪽 상단에 제목을 입력합니다. 아무 제목이어도 상관없습니다.

그리고 Code 1 부분에 아래의 코드를 복사해서 붙여넣기를 해줍니다.

그리고 Save를 하면 내가 코드에서 지정한 폰트로 웹페이가 보이게 됩니다.

 

아래의 코드에서 저는 Noto Sans CJK KR로 웹페이지를 보기를 원해서 해당 폰트의 이름을 입력했습니다.

만약 다른 폰트로 보기를 원한다면 Noto Sans CJK KR 부분을 전부 다른 폰트명으로 바꿔서 입력해주면 됩니다.

/* CSS rules here.*/

@font-face {
font-family: "돋움";
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: "돋움체";
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: dotum;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: DotumChe;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: "굴림";
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: "굴림체";
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: Gulim;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: GulimChe;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: "바탕";
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: "바탕체";
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: Batang;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: BatangChe;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: "궁서";
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: "궁서체";
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: Gungsuh;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: GungsuhChe;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: 맑은고딕;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: MalgunGothic;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: arial;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: tahoma;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: Courier New;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: Calibri;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}

@font-face {
font-family: sans serif;
src: local("Noto Sans CJK KR"), local("Malgun Gothic");
}


body { font-family: "Noto Sans CJK KR" ; }
 * { -webkit-text-stroke-width:0.15px; }

이 방법으로 하면 폰트를 바꾸더라도 특정 사이트에서 아이콘이 제대로 안나오는 문제가 없습니다.

편한 방법으로 사용하시길 바랍니다.

 

 

#크롬폰트변경 #크롬폰트변경확장프로그램 #forcecustomfonts #stylus #크롬포스커스텀폰트 #크롬스타일러스 #구글본고딕 #구글폰트 #구글notosans폰트 #notosans폰트