크롬/엣지 폰트 변경 팁

윈도우 환경에서 크롬이나 엣지 브라우저를 사용할 때, 맥(macOS)이나 모바일 기기보다 텍스트가 거칠거나 획이 찌글거려 가독성이 떨어진다고 느끼신 적이 많으실 겁니다. 특히 국내 웹사이트에서 여전히 기본값으로 쓰이는 '맑은 고딕'이나 레거시 '돋움/굴림', '바탕체'가 적용된 페이지는 장시간 글을 읽을 때 눈의 피로를 유발합니다.

이를 해결하기 위해 스타일시트에서 전체 폰트를 강제로 덮어쓰면(* { font-family: ... !important; }) 웹사이트 고유의 아이콘 폰트(FontAwesome 등)까지 깨지는 부작용이 발생합니다. 본 글에서는 웹사이트 아이콘 깨짐 없이, 구형 레거시 폰트만 안전하게 가로채어 프리텐다드(Pretendard)와 노토 세리프(Noto Serif)로 치환하는 최종 세팅법을 공유합니다.

1. 폰트 가로채기(Font Override) 원리와 전략

웹사이트의 CSS 전체를 무차별 강제 변환하는 대신, 브라우저의 폰트 매핑 테이블을 활용하는 '길목 지키기' 방식을 사용합니다.

• 아이콘 폰트 원형 보존: 클래스 선택자 덮어쓰기가 아니므로 웹사이트의 SVG 아이콘이나 아이콘 웹폰트가 손상되지 않습니다.
• 최신 모던 웹 폰트 보존: 구글 본고딕(Noto Sans KR), Inter, Roboto, 시스템 UI 폰트 등 이미 가독성이 우수한 모던 폰트는 가로채지 않고 사이트 고유 디자인을 유지합니다.
• 구형 레거시 폰트 정밀 교체: 가독성을 떨어뜨리는 맑은 고딕, 돋움, 굴림, Segoe UI, 바탕체 등 구형 폰트만 낚아채어 최신 폰트로 매핑합니다.
• 가변 폰트(Variable) 활용: font-weight: 100 900; 가변 축을 인식시켜 브라우저가 글자를 억지로 늘려 흐리게 만드는 왜곡(Faux Bold)을 방지합니다.

💡 왜 최신 폰트는 교체 대상에서 제외할까요?

IT 기업 웹사이트나 테크 블로그에서 주로 사용하는 Noto Sans KR이나 Roboto 등은 이미 윈도우 다이렉트라이트(DirectWrite) 환경에 최적화된 자간과 힌팅을 갖추고 있습니다. 모든 폰트를 천편일률적으로 바꾸는 것보다, 레거시 폰트만 선별 치환하는 것이 사이트 고유 레이아웃과의 호환성 측면에서 훨씬 안정적입니다.

2. 최종 Stylus 최적화 CSS 코드

크롬/엣지 확장 프로그램인 Stylus에 새 스타일을 생성하고 아래 코드를 복사하여 등록합니다.

/* ==========================================================================
   PREFIX. 가독성 및 렌더링 최적화 코어 (Font Rendering Enhancer)
   - DirectWrite 렌더링을 자극하여 윈도우 환경 특유의 흐릿한 외곽선을 보정합니다.
   ========================================================================== */
body, * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* 초미세 투명 그림자로 외곽선을 도톰하고 선명하게 유도 */
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   1. 구형/레거시 고딕(Sans-Serif) 가로채기 → Pretendard Variable 매핑
   * Noto Sans, Roboto, system-ui 등 최신 폰트는 고유 디자인 유지를 위해 제외
   ========================================================================== */

/* [윈도우 기본 한글 고딕] 맑은 고딕 대응 */
@font-face {
    font-family: 'Malgun Gothic';
    src: local('Pretendard Variable'), local('Pretendard-Variable'), local('Pretendard');
    font-weight: 100 900;
}
@font-face {
    font-family: '맑은 고딕';
    src: local('Pretendard Variable'), local('Pretendard-Variable'), local('Pretendard');
    font-weight: 100 900;
}

/* [윈도우 기본 영문 고딕] Segoe UI 및 Arial 대응 */
@font-face {
    font-family: 'Segoe UI';
    src: local('Pretendard Variable'), local('Pretendard-Variable'), local('Pretendard');
    font-weight: 100 900;
}
@font-face {
    font-family: 'Arial';
    src: local('Pretendard Variable'), local('Pretendard-Variable'), local('Pretendard');
    font-weight: 100 900;
}

/* [극단적 레거시 고딕] 옛날 관공서, 사내 ERP, 구형 쇼핑몰의 돋움 / 굴림 대응 */
@font-face {
    font-family: '돋움';
    src: local('Pretendard Variable'), local('Pretendard-Variable'), local('Pretendard');
    font-weight: 100 900;
}
@font-face {
    font-family: 'Dotum';
    src: local('Pretendard Variable'), local('Pretendard-Variable'), local('Pretendard');
    font-weight: 100 900;
}
@font-face {
    font-family: 'Gulim';
    src: local('Pretendard Variable'), local('Pretendard-Variable'), local('Pretendard');
    font-weight: 100 900;
}
@font-face {
    font-family: '굴림';
    src: local('Pretendard Variable'), local('Pretendard-Variable'), local('Pretendard');
    font-weight: 100 900;
}

/* ==========================================================================
   2. 구형 세리프(명조) 가로채기 → Noto Serif KR (본명조) 매핑
   ========================================================================== */

/* [윈도우 기본 한글 명조] 가독성을 해치는 바탕체 및 궁서체 계열 대응 */
@font-face {
    font-family: 'Batang';
    src: local('Noto Serif KR'), local('Noto Serif'), local('본명조');
    font-weight: 100 900;
}
@font-face {
    font-family: '바탕';
    src: local('Noto Serif KR'), local('Noto Serif'), local('본명조');
    font-weight: 100 900;
}
@font-face {
    font-family: '바탕체';
    src: local('Noto Serif KR'), local('Noto Serif'), local('본명조');
    font-weight: 100 900;
}
@font-face {
    font-family: 'Gungsuh';
    src: local('Noto Serif KR'), local('Noto Serif'), local('본명조');
    font-weight: 100 900;
}
@font-face {
    font-family: '궁서';
    src: local('Noto Serif KR'), local('Noto Serif'), local('본명조');
    font-weight: 100 900;
}

3. 단계별 실전 적용 가이드

위 코드를 정상 작동시키기 위해서는 PC 내 로컬 글꼴 설치와 브라우저 확장 프로그램 설정이 필수적입니다.

Step 1. 필수 폰트 로컬 PC 설치

CSS 코드 내의 src: local(...) 구문은 사용자의 윈도우 시스템에 설치된 폰트를 직접 참조합니다. 따라서 PC에 Pretendard Variable과 Noto Serif KR이 설치되어 있어야 합니다.

👉 Pretendard Variable 공식 다운로드 (GitHub) 👉 Noto Serif KR 공식 다운로드 (Google Fonts)

Step 2. Stylus 확장 프로그램에 코드 등록

1. 브라우저에 Stylus 확장 프로그램을 설치합니다.
2. Stylus 아이콘 클릭 후 [스타일 작성]을 누릅니다.
3. 스타일 제목(예: Font Enhancer Final)을 지정하고, 본문 입력창에 위의 CSS 코드를 붙여넣습니다.
4. 하단 적용 대상(Applies to)이 기본값인 Everything(전체)으로 설정되어 있는지 확인합니다.
5. 좌측 상단의 [저장(Save)] 버튼(혹은 Ctrl + S)을 누릅니다.

👉 크롬 웹스토어 Stylus 확장 프로그램 바로가기

Step 3. 적용 결과 확인

평소 맑은 고딕이나 굴림/돋움으로 렌더링되던 국내 뉴스 사이트나 공공기관, 구형 웹페이지를 새로고침해 보세요. 본문 텍스트는 모바일처럼 미려한 프리텐다드로 깔끔하게 치환되며, 웹페이지의 아이콘 깨짐이나 모던 사이트의 레이아웃 왜곡 없이 쾌적한 폰트 환경을 즐기실 수 있습니다.