CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·주식한당 ·아이포니앙 ·MaClien ·방탄소년당 ·일본산당 ·자전거당 ·개발한당 ·이륜차당 ·소시당 ·패스오브엑자일당 ·AI당 ·안드로메당 ·나스당 ·걸그룹당 ·바다건너당 ·사과시계당 ·클다방 ·물고기당 ·노키앙 ·전기자전거당 ·노젓는당 ·축구당 ·윈폰이당 ·IoT당 ·창업한당 ·가상화폐당 ·여행을떠난당 ·곰돌이당 ·키보드당 ·리눅서당 ·골프당 ·콘솔한당 ·3D메이킹 ·X세대당 ·ADHD당 ·AI그림당 ·날아간당 ·육아당 ·배드민턴당 ·야구당 ·농구당 ·블랙베리당 ·비어있당 ·FM당구당 ·블록체인당 ·보드게임당 ·활자중독당 ·볼링친당 ·캠핑간당 ·냐옹이당 ·문명하셨당 ·클래시앙 ·요리한당 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·디아블로당 ·개판이당 ·동숲한당 ·날아올랑 ·e북본당 ·갖고다닌당 ·이브한당 ·패셔니앙 ·도시어부당 ·FM한당 ·맛있겠당 ·포뮬러당 ·젬워한당 ·안경쓴당 ·차턴당 ·총쏜당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·KARA당 ·꼬들한당 ·덕질한당 ·어학당 ·가죽당 ·레고당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·오른당 ·영화본당 ·MTG한당 ·소리당 ·적는당 ·방송한당 ·PC튜닝한당 ·찰칵찍당 ·그림그린당 ·소풍간당 ·심는당 ·라즈베리파이당 ·품앱이당 ·리듬탄당 ·달린당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·나혼자산당 ·스타한당 ·스팀한당 ·파도탄당 ·퐁당퐁당 ·테니스친당 ·테스트당 ·빨콩이당 ·공대시계당 ·터치패드당 ·트윗당 ·VR당 ·시계찬당 ·WebOs당 ·소셜게임한당 ·위스키당 ·와인마신당 ·WOW당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

팁과강좌

PC/모바일 파이어폭스, 크롬에서 글꼴을 원하는대로 바꾸고 깨지는 아이콘 나타나게 하기 17

8
2014-11-17 23:57:38 수정일 : 2021-03-08 12:50:05 211.♡.115.229
Dozen

(업데이트) 

지금은 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으로 붙여서 쓰시면 적용이 될겁니다.

Dozen 님의 게시글 댓글
SIGNATURE
요한일서 4장 1절의 거짓 선지자 이만희 데살로니가후서 2장 3절의 멸망의 아들 이만희
베드로후서 2장 14절의 저주 받은 자식 이만희 잠언서 25장 14절의 비없는 구름 이만희

어떤 비관론자도 별의 비밀을 발견하거나, 미지의 섬으로 항해하거나, 인간정신의 새로운 낙원을 연적이 없다.
학문을 익히는 것은 강을 거슬러 노를 젓는 것처럼 어렵지만, 그렇다고 한 발짝도 못 나가면 후퇴하는 것과 같다.
"서생적 문제인식과 상인적 현실감각"

No pessimist ever discovered the secret of the stars, or sailed to an uncharted land, or opened a new doorway for the human spirit.

學如逆水行舟 不進則退
학여역수행주 부진즉퇴
서명 더 보기 서명 가리기
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [17]
_K66
IP 121.♡.234.184
11-18 2014-11-18 00:38:27 / 수정일: 2017-04-30 13:02:04
·
감사합니다.
스노볼
IP 183.♡.0.141
11-18 2014-11-18 00:57:14 / 수정일: 2017-04-30 13:02:04
·
저는 font face 로 한글 폰트만 다른 폰트로 대체해서 사용하고 있습니다. 이렇게 하면 특정 폰트만 골라서 다른 폰트로 바꿀 수 있기 때문에, 외국어나 이모지/아이콘 폰트는 그대로 나옵니다.

@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" ; }
Dozen
IP 121.♡.211.182
11-18 2014-11-18 00:59:47 / 수정일: 2017-04-30 13:02:04
·
이렇게 하시면 아이콘 다 뜨나요?
예를 들면 https://github.com/ 이런 곳이요
스노볼
IP 183.♡.0.141
11-18 2014-11-18 01:00:53 / 수정일: 2017-04-30 13:02:04
·
네. 저도 파폭에서 스타일리시로 사용 중입니다.
스타일 추가로 작성해서 이대로 붙여넣기 하고 테스트해보세요.
Dozen
IP 121.♡.211.182
11-18 2014-11-18 01:09:00 / 수정일: 2017-04-30 13:02:04
·
스노볼님 //
덕분에 한수 배워갑니다 감사합니다 :)
저는 Nanum Gothic이 바로 안떠서 NanumGothic로 붙여넣어 입력하니 잘 뜨네요.
이 내용도 추가하겠습니다 ^^
스노볼
IP 183.♡.0.141
11-18 2014-11-18 03:28:36 / 수정일: 2017-04-30 13:02:04
·
Dozen님
감사합니다 ㅎㅎ
저는 맑은 고딕을 선호해서 Nanum Gothic인줄 알았는데, NanumGothic이 정확한 폰트명이었나보군요.
참고로 구글에서 얼마전에 배표한 본고딕도 상당히 좋습니다. 한중일 모두 커버하거든요.
삭제 되었습니다.
창천
IP 210.♡.229.108
11-18 2014-11-18 23:22:08 / 수정일: 2017-04-30 13:02:04
·
크롬과 파이어폭스를 다 사용하는데 크롬에서는 아이콘이 보이는데 파이어폭스에서는 안 보이는 문제가 뭐가 문제인지 몰라서 그냥 사용하고 있었는데 이 글이 해결책인가 싶어서 해봤는데도 안 되네요. stylish 설치하고 위 내용을 적용하고 github 들어가봐도 아이콘이 제대로 안 보이네요. 뭘 잘못한건지 모르겠네요.ㅠ.ㅠ
Dozen
IP 121.♡.211.182
11-19 2014-11-19 17:40:54 / 수정일: 2017-04-30 13:02:04
·
혹시 설정에서 "웹페이지에서 지정한 글꼴사용 허용" 체크가 되어있는지 확인해보세요
텔레포트
IP 1.♡.148.80
05-23 2015-05-23 14:49:25 / 수정일: 2017-04-30 16:05:57
·
파이어폭스에 잘 적용했습니다만, 혹시 익스플로러에서도 동일한 식으로 적용할 수 있는 방법이 없을까요?
南無
IP 211.♡.183.40
09-11 2015-09-11 14:53:42 / 수정일: 2017-04-30 16:06:05
·
오... 아이콘 잘 나오네요 감사합니다.
네덜란드인
IP 121.♡.244.36
11-15 2015-11-15 09:43:20 / 수정일: 2017-04-30 16:06:10
·
크롬에서 덕분에 잘변경했습니다.
ㅋㅌㅊㅍ
IP 210.♡.130.84
12-12 2015-12-12 23:51:52 / 수정일: 2017-04-30 16:06:12
·
좋은 팁 감사합니다. 저도 크롬에서 동일한 확장프로그램 설치하고 스노볼님이 알려주신 대로 하니까 잘 되네요.
폰트를 통째로 바꾸는 것보다 보기 싫은 한글 글꼴만 골라서 대체하는 방식이라서 더 좋은 것 같습니다.
xijax
IP 211.♡.124.82
11-15 2016-11-15 23:07:52 / 수정일: 2017-04-30 22:26:06
·
이거 좋습니다. ㅠㅠ 계속 이모지 폰트 깨져서 고민했는데 해결 했네요..
Fohenz
IP 118.♡.7.22
02-10 2017-02-10 03:27:46 / 수정일: 2017-05-01 00:23:51
·
감사합니다.
huni-hit-home
IP 114.♡.152.101
09-30 2019-09-30 23:43:13
·
좋은 예시 감사합니다.
혹시 마지막에 body 부분 본문에는
body { font-family: "NanumGothic" letter-spacing -2px !important };
라고 적혀 있는데
body { font-family: "NanumGothic" letter-spacing -2px !important; }
아닌가요? ㅠㅠ

다른 구문들이랑 세미콜론이 다르길래 댓글 남기고 갑니다.
Dozen
IP 121.♡.155.2
09-30 2019-09-30 23:54:44
·
그러네요.. ㅎㅎ 근데 제가 쓰고있는거는 적으신대로 해놨...
본문 수정하겠습니다.
huni-hit-home
IP 114.♡.152.101
10-01 2019-10-01 15:19:45
·
@Dozen님
아 그랬군요 ㅎㅎ 좋은 글 감사드립니다. font-family 검색하다가 우연히 발견하고 좋은 정보 얻어갔어요.
새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB / 업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.