티스토리 툴바





구글 크롬의 개발자 버젼에서 글자 깨짐현상이 갑자기 나타나더군요.
해당 버젼은 16.0.891.0 dev-m 입니다. 


 

다음 버젼으로의 업데이트를 기다리면 되겠지만, 웹브라우져라는 물건이 한번 익숙해지면 다른 것으로 바꾸기가 어렵지요.

그래서 임시로라도 글자 깨짐을 해결할 수 있는 방법을 올려드리고자 합니다.
아래의 방법은 글자 깨짐의 해결만이 아니라 평소 모든 웹페이지를 원하는 글꼴(폰트)로 보시고자 하는 경우에도 활용이 가능합니다.

다른 브라우져에는 있지만 크롬에는 없는 기능이 있습니다. '사용자 글꼴로의 강제 지정'입니다.
웹킷 엔진이 갖고 있는 기능이지만 크롬은 제공하고 있지 않습니다.

글꼴 설정 메뉴가 있기는 하지만 적용이 되지 않습니다.

그래서 글꼴을 강제 지정하기 위해서는 확장 프로그램의 설치가 필요합니다.

유명한 두가지가 있습니다. 둘중 하나만 설치 및 설정하시면 되며, 무엇으로 하셔도 효과는 같습니다.


먼저, 아래의 내용을 참고하시어 나눔 고딕 혹은 다음체를 설치하여 주십시오.
2011/08/04 - [저작용 자료/무료 글꼴] - 무료글꼴 - 네이버 '나눔글꼴'
2011/09/08 - [저작용 자료/무료 글꼴] - 다음체 - 다음(Daum)에서 제공하는 무료 글꼴




userScriptCSS -- 설치 페이지로 가기

위의 설치 페이지로 이동하셔서 설치해 주십시오.
설치후 '확장 프로그램' 메뉴로 이동하세요.
(주소줄 우측의 아이콘을 클릭하여 메뉴 팝업에서 '도구'-'확장 프로그램' 을 선택하시거나,
 주소줄에 'chrome://settings/extensions'을 입력하세요.)


userScriptCSS 항목의 옵션으로 들어갑니다.

1. 'Enter a URL regexp here.' 입력란에 ' ^http://* ' 를 입력하세요.
2. 'Enter your user stylesheet here.' 입력란에 ' * { font-family: '나눔고딕' !important; } ' 를 입력하세요.
3. 입력란 아래의 'Save' 버튼을 클릭하시면 설정이 완료됩니다.

* 위의 설정은 '나눔 고딕'으로 되어 있습니다. '다음체', '맑은 고딕' 혹은 다른 글꼴을 원하실 경우 해당 글꼴명을 정확히 넣어주시면 됩니다. '돋움'과 '굴림'은 입력하시면 안됩니다. '돋움' 혹은 '굴림'을 입력하실 경우 깨진상태가 유지 됩니다. 아마도, 웹페이지 표시에서 클리어타입 처리와 연관된 문제로 보입니다. 클리어타입 미지원 글꼴이 깨지는 것이 아닌가 싶습니다만 정확히 밝혀진 원인은 아니니 참고만하여 주십시오.



이제 웹페이지를 보시면 '나눔 고딕' 글꼴로 모든 페이지의 내용이 표시되며, 글자 깨짐 현상도 사라집니다.
일부 사이트에서는 글꼴 변경에 따라 사이트의 디자인이 일부 깨지는 현상이 발생할 수 있습니다.

 

Personalized Web -- 설치페이지로 가기

위의 설치 페이지로 이동하셔서 설치해 주십시오.
설치후 '확장 프로그램' 메뉴로 이동하세요.
(주소줄 우측의 아이콘을 클릭하여 메뉴 팝업에서 '도구'-'확장 프로그램' 을 선택하시거나, 
 주소줄에 'chrome://settings/extensions'을 입력하세요.)


Personalized Web 항목의 옵션으로 들어갑니다.
 
1.  'Add new rule' 버튼을 클릭합니다.
2. 'Match URLs' 입력란에  ' ^http://* ' 을 입력합니다.
3. 'Add CSS:' 입력란에 ' * { font-family: '나눔고딕' !important;} ' 을 입력합니다.
4. 입력란 하단의 'save' 버튼을 클릭하시면 모든 설정이 완료됩니다.

* 위의 설정은 '나눔 고딕'으로 되어 있습니다. '다음체', '맑은 고딕' 혹은 다른 글꼴을 원하실 경우 해당 글꼴명을 정확히 넣어주시면 됩니다. '돋움'과 '굴림'은 입력하시면 안됩니다. '돋움' 혹은 '굴림'을 입력하실 경우 깨진상태가 유지 됩니다. 아마도, 웹페이지 표시에서 클리어타입 처리와 연관된 문제로 보입니다. 클리어타입 미지원 글꼴이 깨지는 것이 아닌가 싶습니다만 정확히 밝혀진 원인은 아니니 참고만하여 주십시오.



설정후 모든 웹페이지 표시는 '나눔 고딕'으로 대체됩니다. 물론 글자 깨짐 현상도 사라집니다.
일부 사이트에서는 글꼴 변경에 따라 사이트의 디자인이 일부 깨지는 현상이 발생할 수 있습니다.


구글 크롬 카나리아 빌드(Canary build)의 경우(크롬 아이콘이 노란색일 경우) 아래와 같이 설정하여 주시면 됩니다.
물론 개발버젼에도 적용되는 방법입니다. 


위의 '확장 프로그램'들은 설치하지 마시고, 글꼴은 꼭 설치하신 후에
크롬의 '옵션'- 좌측메뉴의 '고급설정'- 설정화면의 '글꼴 맞춤설정' 버튼을 클릭하시면
글꼴 설정화면이 나옵니다. 해당 설정화면에서 serif 글꼴을 원하시는 글꼴로 설정하십시오.
모든 페이지에 위의 설정이 적용되지 않기 때문에 추가로 Custom.css 파일을 수정하여 강제로 적용되게 해주어야 합니다.
주소줄에 'chrome://version/' 를 입력하시면 요약된 정보가 표시됩니다.
프로필 경로를 확인하시고, 윈도우 탐색기로 '프로필 경로'+'\User StyleSheets' 하시면 위의 파일을 찾으실 수가 있습니다.

예를 들어 프로필 경로가 'C:\Users\KangMS\AppData\Local\Google\Chrome\User Data\Default' 로 나오면 윈도우 탐색기로 'C:\Users\KangMS\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets' 위치를 보시면 위의 파일이 있습니다.

파일을 찾으셨다면 파일을 (메모장 등의) 텍스트 편집기로 열어 '* {font-family : serif !important; }' 을 내용으로 입력하시고 저장하시면 됩니다.

 
저작자 표시 비영리
Posted by namoos

댓글을 달아 주세요

  1. 에휴 2011/09/27 18:34  댓글주소  수정/삭제  댓글쓰기

    알기쉽게 정말잘설명해주셨는데.. 똑같이따라해도안되네요 ㅠㅠ개발자버젼이 아니라서 그런가봐여.. 그래도감사합니다~!

  2. namoos 2011/09/28 10:33  댓글주소  수정/삭제  댓글쓰기

    어떤 버젼을 사용하시는지 말씀해 주시면 저도 한번 확인해 보겠습니다.

  3. namoos 2011/09/28 11:00  댓글주소  수정/삭제  댓글쓰기

    추가로 한가지 방법을 더 말씀드리겠습니다.

    위의 '확장 프로그램'들은 설치하지 마시고, 글꼴은 꼭 설치하신 후에
    크롬의 '옵션'- 좌측메뉴의 '고급설정'- 설정화면의 '글꼴 맞춤설정' 버튼을 클릭하시면
    글꼴 설정화면이 나옵니다. 해당 설정화면에서 serif 글꼴을 원하시는 글꼴로 설정하십시오.
    모든 페이지에 위의 설정이 적용되지 않기 때문에 추가로 Custom.css 파일을 수정하여 강제로 적용되게 해주어야 합니다.
    주소줄에 'chrome://version/' 를 입력하시면 요약된 정보가 표시됩니다.
    프로필 경로를 확인하시고, 윈도우 탐색기로 '프로필 경로'+'\User StyleSheets' 하시면 위의 파일을 찾으실 수가 있습니다.

    예를 들어 프로필 경로가 'C:\Users\KangMS\AppData\Local\Google\Chrome\User Data\Default' 로 나오면 윈도우 탐색기로 'C:\Users\KangMS\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets' 위치를 보시면 위의 파일이 있습니다.

    파일을 찾으셨다면 파일을 (메모장 등의) 텍스트 편집기로 열어 '* {font-family : serif !important; }' 을 내용으로 입력하시고 저장하시면 됩니다.

  4. namoos 2011/09/28 15:59  댓글주소  수정/삭제  댓글쓰기

    에휴님 크롬 카라리아 빌드(Canary build)에서 확인해 보았습니다. 말씀하신대로 확장프로그램이 제대로 동작하지 않더군요. 바로 위에 추가한 댓글의 방법으호 해보니 적용되더군요. 말씀해주셔서 감사합니다. 덕분에 카나리아 버젼 대응법도 추가할 수 있게 되었습니다.

  5. 알렉스 2011/09/29 18:46  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 잘 되네요..

    다만 한 가지 수정하여야 할 사항이 있습니다.

    "나눔 고딕" ---> "나눔고딕"

    위와 같이 수정하니 잘 작동합니다.

    좋은 팁 감사합니다.

  6. namoos 2011/09/30 11:58  댓글주소  수정/삭제  댓글쓰기

    예. 감사합니다. 말씀하신대로 본문 내용 수정해 놓아야 겠네요.

  7. 버드나무그늘 2011/09/30 22:45  댓글주소  수정/삭제  댓글쓰기

    아... 몇몇 글꼴이 깨지는 이유가 그거였군요.

  8. 레조넌스 2011/10/24 01:05  댓글주소  수정/삭제  댓글쓰기

    혹시 IE에서 잘 보이던 네이버 블로그, 카페 등의 사용자 글꼴이 타 브라우저(크롬, 파이어폭스 등)에서는 기본 글꼴로만 표시되는 정확한 원인을 알 수 있을까요?

    누구는 액티브X 때문이라고도 하던데, 제 생각에 그건 아닌 것 같아서요.

    • namoos 2011/10/27 15:45  댓글주소  수정/삭제

      브라우져별 호환성 문제인듯 합니다. 예로 파이어폭스의 경우 동일 도메인에 존재하는 웹폰트 글꼴만을 인식합니다. 또한, eot의 경우 적용이 안되는 브라우져도 있을 수 있으므로, 최신브라우져의 경우 woff 형식의 웹글꼴을 포함해 주시는게 좋습니다.

  9. 까망군 2012/01/27 09:41  댓글주소  수정/삭제  댓글쓰기

    우아 고민하고 있었는데 감사합니다.