워드프레스에서 폰트를 추가하는 방법 중 하나인 구글 폰트와 같은 폰트 제공 사이트로부터 웹폰트를 연결하는 방법은 구글의 연결이 느려지면 사이트도 느려질 수 있기 때문에 폰트를 직접 업로드 하는 방법을 권장합니다.

워드프레스 폰트 업로드

폰트 업로드(예시: 구글폰트, Roboto)

구글폰트에 들어가 원하는 폰트를 다운로드 받은 후 업로드 합니다. 혹은 내 컴퓨터에 이미 업로드된 폰트를 이용합니다. 필자는 예시로 구글폰트에서 Roboto 폰트를 다운받아 테스트하겠습니다.

테마에 폰트 업로드, 폰트용 css 파일 추가

테마 아래에 fonts 폴더를 만든 후 다운로드한 폰트를 업로드합니다. 사이트 속도 최적화를 위해 실제 사용할 굵기의 폰트만 선택하여 올려줍니다. 이 폰트를 등록하기 위해 폰트이름의 css 파일을 생성합니다.

css에 font-face 등록

구글에서 register font-face를 검색 후 font-face Rule 사이트로 이동하여 font-face 코드를 복사합니다. 이 코드를 css 파일에 삽입합니다.

font-face 코드를 업로드한 폰트명과 같이 바꿔줍니다.

functions.php에서 폰트 css 파일 등록

<?php 
function wptutorial_style(){
   //font css  등록하기
   wp_enqueue_style('roboto', get_template_directory_uri().'/fonts/Roboto/roboto.css');
}
add_action('wp_enqueue_scripts', 'wptutorial_style');
?>

css 파일을 워드프레스에서 사용하기 위해서는 funtions.php 파일 내에 wp_enqueue_style 함수를 이용하여 등록시켜야 합니다.

style.css에서 font-family 적용

style.css에서 등록한 폰트를 사용하기 위해 font-family를 수정합니다.

개발자 모드에서 제대로 폰트가 적용되었는지 확인하여 완료합니다.