Oxygen builder에 폰트 적용하는 법

Oxygen Builder는 고급 사용자와 개발자를 위한 페이지 빌더로, 성능 최적화와 자유로운 디자인 커스터마이징이 강점이지만 기본적으로 폰트를 직접 추가하거나 관리하는 기능이 제공되지 않습니다. 따라서 원하는 폰트를 적용하려면 외부 플러그인이나 커스텀 CSS를 활용해야 합니다.

이 글에서는 외부 Json 파일을 import하여 쉽게 커스텀 폰트를 업로드 하는 방법을 안내하겠습니다.

Oxygen builder 커스텀 폰트 추가

Code Snippet 플러그인 추가

플러그인 > 새로 추가에서 Code Snippet 플러그인을 검색하여 설치, 활성화합니다.

Json 파일 다운로드 / Import

https://www.altmann.de/en/blog-en/code-snippet-custom-fonts 해당 블로그를 방문하여 아래에 Download 섹션에서 Json 파일을 다운로드 한 후 관리자페이지 Snippets > Import 에서 Json 파일을 업로드 합니다.

File Manager 플러그인 설치

파일 매니저 플러그인을 통해 별도의 FTP 접속 없이 플러그인으로 폰트를 업로드합니다.

관리자 페이지 WP 파일 관리자 화면에서 wp-content > uploads > fonts 폴더에 로컬에 저장된 폰트를 드래그앤드롭으로 업로드 하면 사이트 페이지에서 글로벌 폰트로 불러올 수 있습니다.

페이지 생성 후 Settings > Global Styles > Text font 옵션창에서 설치한 폰트를 적용할 수 있습니다.

font-face 설정

@font-face {
  font-family: 'Pretendard';
  src: url('파일 위치 경로') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('파일 위치 경로') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Pretendard';
  src: url('파일 위치 경로') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

폰트 파일을 업로드하여 Oxygen Setting에 기본 폰트로 적용 하면 내 화면에만 보이고, 다른 방문자의 화면은 위와 같이 CSS에 font-face를 설정해주어야 폰트 적용이 마무리 됩니다.

Oxygen