보통 웹 페이지에서 사용자 폰트를 지정해 쓸 때에는 구글 폰트(API)를 웹 링크로 끌어다 쓰는 경우가 많다. 하지만 이 경우 구글 폰트가 사용자 요청을 받고 서버에서 파일을 검색해 전달하는 과정에서 구글 서버가 사용자의 IP 주소를 기록하고 분석할 수 있기 때문에 GDPR 지침 위반 소지가 있다고 한다. 구글 폰트가 사용자 요청을 받고 서버에서 파일을 검색해 전달하는 과정에서 구글 서버가 사용자의 IP 주소를 기록하고 분석할 수 있기 때문이다. GDPR에 따르면 IP 주소는 사용자를 식별하는 데 사용할 수 있는 개인정보이고, 구글 폰트가 사용자의 동의 없이 개인정보를 수집하고 공유하는 것은 GDPR 위반이라는 것. 실제로 2022년 1월 20일 독일 법원에서 구글 폰트가 포함된 웹 사이트가 GDPR을 위반했다는 판결이 있었다.
이를 개선하기 위해서는, IP 주소가 수집 공유 분석될 수 있음을 고지하여 사용자의 동의를 받거나, 폰트를 로컬에서 호스팅 하는 방법이 있다(폰트 파일을 서버에 저장하여 사용). 하지만 아무래도 후자의 방법이 편한 방법이지 않을까 싶다.
예시 환경
- 워드프레스 버전: 6.4.3
- 워드프레스 테마: GeneratePress 3.4.0 (무료 버전)
- 예시 폰트: Noto Sans KR
과정 참고: docs.generatepress.com
1. 폰트 다운 받기
https://gwfh.mranftl.com/fonts에서 원하는 폰트(Noto Sans KR)를 검색한다.
(또는 각자 아는 경로를 통해 원하는 웹 폰트(Web Open Font Format) woff 또는 woff2 파일을 받는다.)
(1) Select charsets
기본은 Latin이기 때문에 Korean으로 변경한다.
(2) Select styles
Regular와 700을 선택했다. Regular는 기본 글쓰기 용. 700은 기본적으로 타이틀에 이용되기 때문에 빼먹으면 타이틀 글자가 이상하게 나온다. 이외에 원하는 스타일이 있으면 추가적으로 선택한다.
(3) Copy CSS
해당 내용을 워드프레스 CSS에 넣어 주어야 하는데 폰트 파일을 아직 서버에 업로드하지 않았으므로 파일 경로가 아직 없는 상황. 폰트 파일 업로드 후 복사해 와야 한다.
/* noto-sans-kr-regular - korean */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
src: url('../fonts/noto-sans-kr-v36-korean-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-kr-700 - korean */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
src: url('../fonts/noto-sans-kr-v36-korean-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}(4) 선택한 폰트 파일 다운로드
압축 파일을 풀면 noto-sans-kr-v36-korean-regular.woff2, noto-sans-kr-v36-korean-700.woff2 파일이 들어 있다.
2. 폰트 파일을 서버에 업로드
sftp를 이용해 원하는 폴더에 저장할 수도 있고, (사진을 업로드하는) 워드프레스 미디어 라이브러리에 올릴 수도 있다. 다만, 기본적으로 미디어 라이브러리에는 폰트 형식의 파일은 올릴 수 없기 때문에 functions.php에 다음 코드 스니펫을 넣어 주어야 한다. 폰트 업로드가 끝나면 보안상 해당 스니펫은 삭제하도록 하자.
add_filter( 'upload_mimes', function( $mimes ) {
$mimes['woff'] = 'application/x-font-woff';
$mimes['woff2'] = 'font/woff2';
$mimes['ttf'] = 'application/x-font-ttf';
$mimes['svg'] = 'image/svg+xml';
$mimes['eot'] = 'application/vnd.ms-fontobject';
return $mimes;
} );
파일이 업로드되면 파일의 URL 주소를 복사해 둔다(CSS 입력 시 사용). 대략 아래와 비슷한 형식이 된다.
https://OOOOO/wp-content/uploads/2024/03/noto-sans-kr-v36-korean-regular.woff2
https://OOOOO/wp-content/uploads/2024/03/noto-sans-kr-v36-korean-700.woff2
3. CSS 입력
모양 > 사용자 정의 > 추가 CSS
앞에서 자동 생성된 CSS 코드의 '폰트 경로'(붉은색 강조 지점)를 '내가 업로드한 폰트 파일 경로'로 변경한 후 저장한다.
4. 폰트 설정
모양 > 사용자 정의 > Typography > Font Manager
- FONT FAMILY NAME에 Noto Sans KR 입력 (CSS에서 정의한 이름)
- Use Google Fonts API는 비활성화
또는, Search fonts에서 검색하여 지정한 후 Use Google Fonts API를 비활성화해도 된다.
마지막으로 하단의 Typography Manager에서 body 등에 정의해 주면 끝. 웹 페이지 새로 고침 및 캐시 삭제를 통해 폰트가 잘 적용되고 있는지 확인해 주자.
