베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

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

Last Updated: 2021년 3월 20일 | 4개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스에서 커스텀 폰트를 적용하고 싶은 경우 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;
}

참고



4 개 댓글

Leave a Comment

  1. 안녕하세요, 항상 글 잘 읽고 있습니다.

    Avada 테마 관련해서, 질문 드려봅니다..
    사이트 트래픽이 한번 로드 하는데, 3mb ~ 6mb 차길래 확인 해보니,
    Avada 테마에서 fusion 빌드인 font를 부르는 것 같아서 빌드에서
    폰트 설정을 리셋 해 놓고, 제가 따로 추가해 놓은 웹 폰트 이외에,
    등록하지 않았습니다. 그렇게 설정을 해도,

    테마 빌드에서 제공하는 동일한 웹 폰트(종류 2개)에 두께만 다른 폰트들이 10개 이상 씩 불러와 지더군요.. ( noto sans KR 등 )

    그래서 어디에서 불러와지나 확인해보니 wp-content/upload/fusion-style 에서 폰트 및 테마 빌더에 추가해놓은 custom css가 있어서, 메인으로 불러오는 파일을 중복되는 폰트를 삭제하고 나서야 줄어들었습니다.

    그런데.. 다른페이지에 들어가니, 다른페이지에 들어간 css 파일이 동일한 내용으로 새로운 스타일 파일이... 만들어지는데.

    아바다 쪽에 다른 분이 문의를 드렸지만, 답변이 없었습니다 ㅜㅜ...

    다른 방법을 알고계시다면 답변 부탁드립니다..

    응답
    • 안녕하세요, yurigle님. 아바다와 같은 다목적 테마는 대부분의 사이트 구축에 사용할 수 있지만, 한편으로는 불필요한 기능까지 로드하므로 로드하는 페이지 사이즈가 증가할 수 있고, 최적화를 제대로 하지 않으면 사이트 속도에도 부정적인 영향을 미치는 것 같습니다.

      먼저는 아바다측의 답변을 기다리는 것이 좋을 듯 합니다.

      구글 폰트를 비활성화하는 방법으로 Clearfy와 같은 최적화 플러그인을 사용하는 것도 고려해볼 수 있습니다. 아바다 테마에서 잘 작동할지는 모르겠지만, 다음 글에서 소개하는 플러그인을 설치하여 테스트해볼 수 있을 것입니다.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%86%8D%EB%8F%84-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-clearfy/

      무료 버전과 유료 버전이 있고, 무료 버전에서는 기능이 제한되어 있지만 구글 폰트 비활성화 옵션은 무료 버전에서도 제공될 것입니다.

      응답
      • 답변 주셔서 감사합니다.
        다른 플러그인도 찾아봤다가, Asset CleanUp: Page Speed Booster 플러그인으로 해결보았네요!
        감사합니다.

      • Asset CleanUp도 나름 괜찮은 플러그인 같습니다. 이 플러그인을 사용하면 요청 수(Requests)를 줄여서 사이트 속도 개선에 도움이 될 것입니다.

        https://www.thewordcracker.com/basic/http-s-%EC%9A%94%EC%B2%AD%EC%9D%84-%EA%B0%90%EC%86%8C%EC%8B%9C%EC%BC%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%86%8D%EB%8F%84%EB%A5%BC-%EB%86%92%EC%97%AC%EC%A3%BC%EB%8A%94-wp-asset-cleanup/