본문 바로가기

유용한 정보

구글 크롬 글자 깨짐 해결 및 사용자 글꼴 강제 지정


구글 크롬의 개발자 버젼에서 글자 깨짐현상이 갑자기 나타나더군요.
해당 버젼은 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; }' 을 내용으로 입력하시고 저장하시면 됩니다.