워드프레스는 자체 및 구글 폰트를 가지고 오기 때문에 꽤 다양한 폰트를 만날 수 있습니다. 허나..

한글 폰트은 왜 한결 같이 같은가…

폰트를 변경해도 한글은 변경이 되지 않습니다. 영어만 변경이 되는데요. 그래서 늘 워드프레스 블로그를 하는 내내 불만이었습니다.

기본 폰트인 궁서체 조차 쓸 수 없었으니까요.

한글 폰트를 변경하는 법은 없나?

기본 제공되는 글꼴에서 한글은 변경되지 않아 외부에서 가지고 와야 합니다. 이 부분이 조금 까다로울 수 있는데요.

우선 저는 NEVE 테마를 사용하고 있습니다. 테마가 다르면 아래 방법으로는 불가능하오니 참고하세요.

네이버 폰트 이쁘네..

네이버에서는 다양한 폰트를 무료로 제공하고 있습니다.

내가 별도로 팔아먹지 않는 이상 무료로 사용할 수 있습니다.

네이버 폰트 다운로드

네이버 폰트 중 손글씨 카테고리에서 암스테르담 폰트가 마음에 들어 다운로드 했습니다. 현재 적용 중인 폰트입니다.

설치하기를 클릭하여 ttf 파일을 다운로드 받습니다.

이제 어떻게 워드프레스에 적용할 것인가?

먼저 적용을 위해 필요한 것이 몇가지 있습니다. 테마에 따라 방법이 다르나 저와 작업환경이 같다면 아래와 같이 하시면 됩니다.

워드프레스 적용에 앞서 작업할 내용들입니다.

차일드 테마 등록
파일질라 설치 및 접속 환경 설정
플러그인 Snippets 설치

NEVE 차일드 테마 등록

테마에는 차일드 테마가 있습니다. 왜냐면 내가 인위적으로 변경한 내용들을 별로로 보관하기 위함이죠. 만약 삑이 나서 블로그가 망가져도 차일드 테마에서 작업했다면 차일드 테마만 삭제하면 그만이거든요.

NEVE는 이러한 이유로 차일드 테마를 설치해야 작업이 가능합니다.

다운로드

여기서 다운로드 하세요.

다운로드 받은 zip 파일은 워드프레스 > 외모 > 테마 > 테마 업로드 에서 설치합니다.

공식문서는 여기를 클릭하세요.

차일드 테마 적용

다운로드 받은 차일드 테마를 적용합니다. 적용은 기존 테마 적용방식과 동일합니다.

차일드 테마를 활성화 하세요. 저는 이미 활성화한 상태입니다.

ttf 파일 업로드를 위한 설정들

파일질라 설치

이제 다운로드 받은 ttf 파일을 워드프레스에 업로드 해야 합니다. 물론, 그냥 업로드하는 방법은 없습니다. 그래서 ftp 프로그램을 설치하여 워드프레스로 접속합니다. 아래 포스팅은 설치, 접속 방법까지 모두 설명합니다.

워드프레스 블로그 FTP로 파일 전송 하는 법

워드프레스 차일드 테마에 fonts 폴더 생성

폴더를 생성하고 ttf 파일을 업로드 합니다.

AWS lightsail 을 사용한 워드프레스 웹사이트라면 저와 경로가 같을 것입니다. neve-child-master 아래 fonts 폴더라고 생성했습니다.

꼭 저와 같지 않아도 됩니다. 다만 다르다면 이후 경로 설정값도 다르게 하세요.

폴더 생성하고 파일을 업로드 합니다.

permission denied???? 업로드가 안될경우

bitnami 아이디에 권한이 없는 경우 permission denied 에러와 함께 업로드가 되지 않습니다. 이럴 경우엔 권한을 줘야 업로드가 됩니다.

AWS 라이트세일은 자체 터미널을 제공하는데 여기서 작업이 필요합니다. 터미널을 열어 다음의 명령어를 입력합니다.

sudo su >>> root 권한으로 이동
sudo chown -R bitnami bitnami/wordpress/wp-content>>> wp-content 하위 폴더 bitnami로 파일소유권 변경
sudo chmod -R 755 bitnami/wordpress/wp-content>>> wp-content 하위 폴더 파일모드 755로 변경

이제 bitnami로 ftp 접속 후에 파일을 업로드 할 수 있게 됩니다.

참고

-r : 하위 모든 폴더 적용
755 : user에게만 권한 부여 (user가 속한 그룹 X)

Snippets을 활용하여 PHP 코드를 작성한다

Snippets 플러그인을 설치합니다. function.php에 코드를 때려 박아도 되지만 Snippets을 활용하면 오타 및 에러도 잡아주고, 코드가 많이 추가되었을 때 관리가 용이합니다.

Snippets 설치

워드프레스 플러그인에서 Snippets 이라고 검색 후 설치 및 활성화 합니다.

외부 글꼴 php 코드 추가

파일질라를 활용하여 ttf 파일을 업로드하였습니다. 그 ttf 파일을 사용하기 위한 php 코드를 작성합니다. 물론 공식문서 배포판이 있기에 그대로 복붙한 후 경로만 수정합니다.

공식문서는 여기를 클릭하세요.

경로 수정 코드

function add_custom_font() { 
	$font_path_ttf = get_stylesheet_directory_uri() . '/fonts/sibmanwon1.ttf';
	?>
	<style type="text/css">
	@font-face {
		font-family: 'sibmanwon1';
		src: url( <?php  echo esc_url( $font_path_ttf ); ?>)  format('truetype');
	}
	</style>
	<?php
}
add_action( 'wp_head', 'add_custom_font' );
add_action( 'customize_controls_print_styles', 'add_custom_font' );


function add_custom_fonts( $localized_data ) {
	$localized_data['fonts']['Custom'][] = 'sibmanwon1';
	return $localized_data;
}
add_filter( 'neve_react_controls_localization', 'add_custom_fonts' );

저는 ttf 파일명이 sibmanwon1.ttf 입니다. 이에 맞는 코드이니 경로나 파일명은 본인이 설정한 것으로 수정하여야 합니다.

코드 넣는 곳

경로 : 워드프레스 > Snippets > Add New

이제 설정에서 글꼴을 변경해보자

이제 글꼴 변경을 위한 작업은 끝입니다. 실제 변경해보겠습니다.

경로 : 워드프레스 > 외모 > 사용자 정의하기 > 글자

H태그 및 본문 글자를 변경할 수 있는 곳입니다. 여기서 내가 추가한 글꼴을 찾아봅니다. 본문을 변경해보겠습니다.

설정한 것과 마찬가지로 Custom에서 sibmanwon1 이라고 추가한 외부 폰트를 찾을 수 있습니다. 선택하고 적용하면 바꿘 글꼴을 확인할 수 있습니다.

구린 워드프레스 한글 글꼴 해방입니다.

조금만 응용하면 여러개의 ttf 파일을 다운로드 받아서 설정할 수 있습니다.

워드프레스 외부 폰트 적용하는 법