OTF, TTF, WOFF 폰트 설치

,

워드프레스에서 바로 폰트 설치를 위해 폰트 파일을 미디어에 삽입시 죄송합니다. "이 파일 타입 업로드할 권한이 없습니다."라는 오류가 나옵니다. 이를 해결하기 위해서는 function.php 파일에 폰트 형식을 허용하는 코드의 삽입이 필요합니다.

이 글에서는 폰트 타입 허용 코드를 삽입 후 직접 폰트 파일을 업로드하여 사이트에 추가하는 방법을 살펴보겠습니다.

워드프레스 폰트 직접 설치

폰트 추가 삽입 코드

function custom_mime_types($mimes) {
$mimes['otf'] = 'font/otf';
$mimes['ttf'] = 'font/ttf';
$mimes['woff'] = 'font/woff';
$mimes['woff2'] = 'font/woff2';
return $mimes;
}
add_filter('upload_mimes', 'custom_mime_types');

위의 코드를 functions.php 파일에 추가하면 otf, ttf, woff, woff2 파일을 자유롭게 미디어에 업로드하여 폰트를 설치하여 내 사이트에 적용할 수 있습니다.

관리자페이지에서 모양 > 테마 파일 편집기에서 functions.php 파일을 찾을 수 있으며, 테마 파일 편집기가 메뉴에 없다면 FTP를 접속하거나 파일 매니저라는 플러그인을 설치하면 됩니다.

css에 @font-face 적용

@font-face {
font-family: 'Pretendard-Medium';
src: url('폰트 위치') format('woff');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Pretendard-SemiBold';
src: url('폰트 위치') format('woff');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'Pretendard-Bold';
src: url('폰트 위치') format('woff');
font-weight: 700;
font-style: normal;
}

html {
scroll-behavior: smooth;
}

h1,
h2 {
font-family: 'Pretendard-Bold';
}

h3,
h4,
h5,
h6,
strong,
b {
font-family: 'Pretendard-SemiBold';
}

body {
word-break: keep-all;
font-family: 'Pretendard-Medium';
}

모양 > 사용자 정의 > 추가 CSS 에서 위의 font-face를 통해 폰트를 사이트에 적용할 수 있습니다.

📚 함께 읽으면 좋은 글

워드프레스 폰트 추가 방법

ALL RIGHTS ARE RESERVED.
magnifiercrossmenucross-circle