(업데이트)
지금은 SamsungOneKorean 400을 구해서 쓰고 있습니다. 제일 보기 편하더군요.
그리고 해당 글꼴이 더 진하게 나오게끔 하는 부분과, 글자간 간격(자간)을 줄이는 설정을 추가했습니다.
오픈소스이고 메모리도 덜 먹는 파이어폭스를 좋아해서 파이어폭스를 주로 씁니다.
그런데 아시다시피 윈도우에서 클리어타입을 넣어도 굴림이나 돋움 글꼴은 진짜 보기 싫어요.
그럴때 많은 분들은 파이어폭스 설정에 들어가서 내용 - 기본글꼴을 원하는 글꼴로 설정하시고
고급에서 웹페이지에서 지정한 글꼴사용 허용을 체크를 풀면 다 원하는 글꼴로 설정을 하시죠.
그런데 문제는 그렇게 원하는 글꼴로 설정을 바꾸는데
요즘 추세가 웹폰트(eot 파일)를 불러와서, 기존에 이미지로 쓰던 아이콘 대신 폰트를 활용한 아이콘으로
로딩에 필요한 용량을 줄이는 사이트들이 늘어나 원하는 아이콘들이 제대로 잘 안뜹니다.
그래서 방법을 찾아보다 결국 stylish에 내가 원하는 글꼴을 가장 먼저 뜨게끔 하고,
웹폰트도 불러들일 수 있게 폰트이름을 넣어서 원하는 글꼴도 보고, 웹폰트로 된 아이콘도 뜨게 설정해 두었습니다.
방법은
1. 파이어폭스나 크롬에서 사용자 작성 CSS를 추가할 수 있는 부가기능을 설치합니다.(크롬도 크롬 부가기능을 설치합니다)
원래 Stylish로 했는데 Stylish가 기업에 매각됐다는 이야기가 나와 타 부가기능을 추천드립니다.
https://addons.mozilla.org/en-US/firefox/addon/styl-us/
https://chrome.google.com/webstore/detail/osprey/ekjapccimkannnfgcnnoajhfdglobgak
2. 부가기능에 들어가서 사용자 스타일을 누르고, 새 스타일 작성을 누릅니다.
크롬의 경우 "Manage installed styles"로 들어가서 "Write new style"을 누릅니다.
3. 이름은 마음대로 적으시고 밑에 칸에
크롬에서 사용하실때는 밑에서 @-moz-document~로 시작되는 줄과 맨 아래 "}"만 삭제하시면 됩니다.
스노볼님이 알려주신 방법
----------------------------------------------이 줄 밑 부분부터 복사 & 붙여넣기 하시면 됩니다 -----------------------------------------
@-moz-document regexp('(?!http://www\.example\.com).*') {
/* CSS rules here.*/
@font-face {
font-family: "돋움";
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: "돋움체";
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: dotum;
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: DotumChe;
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: "굴림";
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: "굴림체";
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: Gulim;
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: GulimChe;
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: "바탕";
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: "바탕체";
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: Batang;
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: BatangChe;
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: "궁서";
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: "궁서체";
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: Gungsuh;
src: local("NanumGothic"), local("Malgun Gothic");
}
@font-face {
font-family: GungsuhChe;
src: local("NanumGothic"), local("Malgun Gothic");
}
/* letter-spacing의 -2px를 조절하셔서 글자 간격을 조절하실 수 있습니다. */
body { font-family: "NanumGothic" letter-spacing -2px !important; }
/* 이 부분은 글자체를 조금 굵게 만들어서 보기 편하게 만드는 설정입니다. px의 값을 조금씩 변경해가면서 취향대로 선택하세요 */
* { -webkit-text-stroke-width:0.15px; }
----------------------------------------------------- 이 윗줄까지 복사하시면 됩니다. --------------------------------------------------
에서 스노볼님이 사용하셨던 방법 내용을 붙여넣고 하시면 됩니다.
Applies to 는 Everything으로 냅두시고 Save 누르시면 됩니다.
저는 나눔고딕이 보기 좋아서 나눔고딕으로 해놨는데, 다른 글꼴을 쓰고 싶으시면 위에 NanumGothic을 다른 글꼴로 바꾸시면 됩니다.
Nanum Gothic이 띄어져 있어 안되시는 분은, NanumGothic으로 붙여서 쓰시면 적용이 될겁니다.
@font-face {
font-family: "돋움";
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: "돋움체";
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: dotum;
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: DotumChe;
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: "굴림";
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: "굴림체";
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: Gulim;
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: GulimChe;
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: "바탕";
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: "바탕체";
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: Batang;
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: BatangChe;
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: "궁서";
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: "궁서체";
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: Gungsuh;
src: local("Nanum Gothic"), local("Malgun Gothic");
}
@font-face {
font-family: GungsuhChe;
src: local("Nanum Gothic"), local("Malgun Gothic");
}
body { font-family: "Nanum Gothic" ; }
예를 들면 https://github.com/ 이런 곳이요
스타일 추가로 작성해서 이대로 붙여넣기 하고 테스트해보세요.
덕분에 한수 배워갑니다 감사합니다 :)
저는 Nanum Gothic이 바로 안떠서 NanumGothic로 붙여넣어 입력하니 잘 뜨네요.
이 내용도 추가하겠습니다 ^^
감사합니다 ㅎㅎ
저는 맑은 고딕을 선호해서 Nanum Gothic인줄 알았는데, NanumGothic이 정확한 폰트명이었나보군요.
참고로 구글에서 얼마전에 배표한 본고딕도 상당히 좋습니다. 한중일 모두 커버하거든요.
폰트를 통째로 바꾸는 것보다 보기 싫은 한글 글꼴만 골라서 대체하는 방식이라서 더 좋은 것 같습니다.
혹시 마지막에 body 부분 본문에는
body { font-family: "NanumGothic" letter-spacing -2px !important };
라고 적혀 있는데
body { font-family: "NanumGothic" letter-spacing -2px !important; }
아닌가요? ㅠㅠ
다른 구문들이랑 세미콜론이 다르길래 댓글 남기고 갑니다.
본문 수정하겠습니다.
아 그랬군요 ㅎㅎ 좋은 글 감사드립니다. font-family 검색하다가 우연히 발견하고 좋은 정보 얻어갔어요.