아바다 테마 커스텀 폰트 적용하는 방법

워드프레스에서 커스텀 폰트를 적용하고 싶은 경우 Use Any Font와 같은 플러그인을 사용하면 편리합니다. 인기 워드프레스 테마인 아바다 테마에서는 사용자 폰트를 업로드하여 적용할 수 있습니다. 아바다 테마에 커스텀 폰트를 적용하는 방법에 대해 살펴보겠습니다.

아바다 테마 커스텀 폰트 적용하는 방법 (예시: 나눔스퀘어라운드)

Avada 테마를 사용하는 경우 사용자 폰트를 업로드하여 설정하는 옵션을 제공합니다. 예시로 나눔스퀘어라운드 폰트를 업로드하여 설정해보겠습니다.

사용자 폰트 업로드하기

워드프레스 관리자 페이지 내에서 Avada > Options > 타이포그래피 > Custom Fonts를 클릭합니다.

서체 이름(Font Name)을 입력하고 각 타입의 폰트 파일을 업로드합니다.

다음 형식의 폰트 파일들을 업로드할 수 있습니다.

• WOFF2
• WOFF
• TTF
• EOT
• SVG

테스트로 나눔스퀘어라운드 폰트를 업로드해보았습니다. NanumSquareRound 폰트는 https://github.com/innks/NanumSquareRound에서 다운로드할 수 있습니다. SVG 포맷의 폰트 파일은 없지만, 온라인 TTF to SVG Converter 사이트에서 TTF 포맷을 SVG 포맷으로 변환할 수 있습니다.

폰트 파일을 모두 업로드했다면 Add 버튼을 클릭합니다. 여러 종류를 폰트를 업로드하려면 동일한 작업을 반복합니다.

변경 사항을 저장합니다.

폰트 파일 업로드 시 '죄송합니다. 이 파일 유형은 보안상의 이유로 허용하지 않습니다.' 오류가 발생하면서 미디어 라이브러리에서 파일 업로드에 실패할 수 있습니다. 그런 경우 wp-config.php 파일에 다음 라인을 추가한 후에 다시 시도하면 문제 없이 폰트 파일을 업로드할 수 있습니다.

define( 'ALLOW_UNFILTERED_UPLOADS', true );

wp-config.php 파일은 워드프레스가 설치된 루트 폴더 아래에 있습니다. wp-config.php 파일을 수정하기 위해서는 FTP에 접속이 가능해야 합니다. 블루호스트 등 cPanel을 제공하는 환경에서는 File Manager를 사용하여 수정하는 것도 가능합니다.

폰트 파일 업로드 후에는 위의 라인을 삭제해도 됩니다.

참고:

• 워드프레스 업로드 제한 파일 확장자를 추가하는 방법

사용자 폰트 적용하기

사용자 폰트를 업로드했다면 원하는 곳에 폰트를 적용할 수 있습니다. 워드프레스 알림판에서 Avada > Options > 타이포그래피 > Body Typography 또는 Heading Typography를 클릭합니다.

H1, H2, H3... 등 헤딩 타이포그래피를 적용하고 싶은 경우 Heading Typography 섹션에서 세부적으로 설정할 수 있습니다.

Font Family 아래의 필드를 클릭하면 드롭다운이 표시되면서 서체를 선택할 수 있습니다. 사용자가 업로드한 폰트는 Custom Fonts 아래에 표시됩니다. 예시에서는 H1 헤딩에 대하여 NanumSquareRoundB를 선택해보았습니다. 저장한 후에 사이트를 확인해보면 폰트가 적용된 것을 확인할 수 있을 것입니다.

만약 폰트가 원하는 대로 적용되지 않는 경우에는 CSS를 사용하여 강제로 적용시킬 수 있습니다. 예를 들어, 위의 방법으로 H2를 설정해도 일부 H2 항목에는 커스텀 폰트가 적용되지 않는 것을 발견했습니다. 이 경우 다음과 같은 형식으로 커스텀 CSS를 추가하면 원하는 대로 적용될 수 있습니다.

아바다 테마의 경우 Avada > Options > 사용자 정의 CSS 페이지에서 커스텀 CSS 코드를 추가할 수 있습니다.

예시:

h2.entry-title {
    font-family: NanumSquareRoundB, Georgia, serif !important;
}

참고

• 워드프레스에 나눔스퀘어라운드 폰트 적용 방법
• 아바다 테마 표 (테이블) 엘리먼트 사용하기