글꼴(Typography)을 바꿔야 하는 이유
워드프레스 웹사이트의 디자인은 이용자의 만족도를 높이고 사이트의 정체성을 형성하는 데 중요한 역할을 합니다. 특히 웹사이트에서 사용하는 글꼴은 콘텐츠를 더 읽기 쉽게 만들고, 사이트의 분위기와 스타일을 정의하는 중요한 요소입니다. 제목, 내용 등 요소에 적합한 글꼴을 선택하고 적용함으로써 웹사이트의 가독성을 높이고 방문자들에게 좋은 인상을 남길 수 있습니다. 워드프레스에서 글꼴을 쉽게 변경하는 방법은 여러 가지가 있으며, 이번에는 가장 일반적인 방법들과 각 방법의 장단점에 관해 설명하겠습니다.
1. 테마 사용자 정의(Customizer)를 이용한 글꼴 변경
워드프레스는 기본적으로 테마 사용자 정의(Customizer)를 통해 디자인 요소를 쉽게 변경할 수 있는 기능을 제공합니다. 사용자 정의는 테마마다 조금씩 다르지만, 많은 테마에서 글꼴 변경 옵션을 기본 제공하므로 간단하게 사이트의 글꼴을 수정할 수 있습니다.
- 워드프레스 대시보드에서 모양(appearance) > 사용자 정의(customize)로 이동합니다.
- Typography 또는 글꼴 섹션을 찾습니다. 여기에서 사이트 제목, 본문, 헤딩 등 다양한 요소에 사용할 글꼴을 선택할 수 있습니다.
- 원하는 글꼴을 선택하고, 크기나 두께, 스타일 등의 옵션을 조정한 후 저장 버튼을 클릭합니다.
이 방법은 기본적인 글꼴 변경 작업을 매우 쉽게 처리할 수 있는 방법이지만, 모든 테마가 이 기능을 제공하지는 않습니다. 특히 유로 버전을 별도로 제공하는 테마의 경우 무료 버전에서는 제한적인 기능만 제공할 가능성이 높습니다. 만약 테마에서 글꼴 변경 기능을 지원하지 않는다면, 다른 방법을 시도해야 합니다.
2. 플러그인을 이용한 글꼴 변경
워드프레스는 다양한 플러그인을 통해 기능을 확장할 수 있으며, 글꼴 변경 또한 플러그인을 사용하면 매우 쉽게 처리할 수 있습니다. 다음은 워드프레스에서 자주 사용되는 글꼴 변경 플러그인입니다.
글꼴 플러그인 | Google 글꼴, Adobe 글꼴 또는 업로드 글꼴 사용
이 플러그인은 Google Fonts를 손쉽게 웹사이트에 적용할 수 있는 강력한 도구입니다. 글꼴 플러그인은 테마의 디자인이나 성능에 큰 영향을 미치지 않으면서, 다양한 글꼴을 사용할 수 있게 해 줍니다.
- 플러그인을 설치하고 활성화하면 대시보드에 Fonts Plugin 섹션이 추가됩니다.
- Fonts Plugin > Customize Fonts 를 선택합니다.
- Google 글꼴은 여기서 기본적으로 제공됩니다.
- 이곳에서 글꼴을 변경하고, 실시간으로 미리 보기를 통해 적용된 변화를 확인할 수 있습니다.
- 텍스트에 적용할 글꼴 스타일과 크기 등을 세부적으로 설정한 후 상단의 공개를 클릭하면 설정이 반영됩니다.
- Adobe 글꼴은 Fonts Plugin > Adobe Fonts에서 Adobe에서 제공하는 API 토큰을 적용하고 난 후 이용 가능합니다.
- https://fonts.adobe.com/account/tokens → 여기서 토큰을 만들 수 있으며 Adobe 회원에게 제공됩니다.
플러그인의 경우 업데이트를 통해 사용 방법이 변경되거나 더 이상 유지 관리 또는 지원되지 않는 경우가 있으므로 항상 최신 버전의 워드프레스와 호환되는 플러그인을 검색해서 적절한 플러그인을 사용하시길 권장합니다.
플러그인을 사용하면 별도의 코딩 지식 없이 다양한 글꼴을 웹사이트에 적용할 수 있다는 장점이 있습니다. 또한 플러그인 업데이트를 통해 최신 글꼴도 지속해서 제공되므로, 관리가 용이합니다.
3. Google Fonts를 직접 추가하는 방법
만약 플러그인을 사용하고 싶지 않거나, 테마 사용자 정의에서 글꼴 변경 옵션이 제공되지 않는 경우, Google Fonts를 직접 추가하는 방법도 있습니다. 이를 위해서는 약간의 코드 수정이 필요하지만, 간단한 방식으로 사이트에 Google Fonts를 적용할 수 있습니다.
- Google Fonts 웹사이트(https://fonts.google.com/)에 접속하여 원하는 글꼴을 선택합니다.
- 우측 상단에 있는 “Get font” 를 클릭합니다.
- 그다음 “<> Get Embed Code” 를 선택한 후 제공되는 첫 번째 링크 태그를 복사합니다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
</style>- 워드프레스 대시보드에서 모양(appearance) > 테마 파일 편집기(theme editor)로 이동하여 style.css 파일을 엽니다.
- 태그 안에 복사한 링크 태그 중 <style>태그 안에 있는 내용을 추가합니다.
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');- 마찬가지로 두 번째 링크 태그를 복사한 후 추가합니다.
.roboto-thin {
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: normal;
}
.roboto-light {
font-family: "Roboto", sans-serif;
font-weight: 300;
font-style: normal;
}
.roboto-regular {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-style: normal;
}
.roboto-medium {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-style: normal;
}
.roboto-bold {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
}
.roboto-black {
font-family: "Roboto", sans-serif;
font-weight: 900;
font-style: normal;
}
.roboto-thin-italic {
font-family: "Roboto", sans-serif;
font-weight: 100;
font-style: italic;
}
.roboto-light-italic {
font-family: "Roboto", sans-serif;
font-weight: 300;
font-style: italic;
}
.roboto-regular-italic {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-style: italic;
}
.roboto-medium-italic {
font-family: "Roboto", sans-serif;
font-weight: 500;
font-style: italic;
}
.roboto-bold-italic {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: italic;
}
.roboto-black-italic {
font-family: "Roboto", sans-serif;
font-weight: 900;
font-style: italic;
}
이 방법을 사용하면 Google Fonts에서 제공하는 다양한 글꼴을 직접 추가할 수 있습니다. 코드 편집이 필요하지만, 전체적인 컨트롤을 유지하면서 원하는 글꼴을 쉽게 적용할 수 있습니다.
4. 테마의 functions.php 파일을 이용한 글꼴 추가
또 다른 방법으로는 functions.php 파일을 사용해 Google Fonts를 워드프레스 테마에 추가하는 방법이 있습니다. 이는 조금 더 기술적인 방식이지만, 성능에 직접적인 영향을 미치지 않고 글꼴을 적용할 수 있는 안전한 방법입니다.
- 워드프레스 대시보드에서 모양(appearance) > 테마 파일 편집기(theme editor)로 이동하여 functions.php 파일을 엽니다.
- 아래 코드를 functions.php 파일에 추가합니다.
function add_google_fonts() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap', false);
}
add_action('wp_enqueue_scripts', 'add_google_fonts');- 이후 style.css 파일에 아래와 같은 CSS 코드를 추가해 사이트에 글꼴을 적용합니다.
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-style: normal;
}이 방식은 header.php 파일을 수정하는 것보다 더 안전한 방법이며, 테마 업데이트 시에도 문제가 발생하지 않도록 functions.php에서 글꼴을 관리할 수 있습니다.
5. 사용자 정의 폰트 업로드 및 사용
때로는 Google Fonts나 기본 제공되는 글꼴 이외에, 자신만의 글꼴을 사용하고 싶을 수 있습니다. 이때는 다운 받아서 저장해 놨던 폰트를 직접 서버에 업로드하고 CSS를 통해 이를 적용할 수 있습니다. 이를 위해서는 먼저 폰트 파일이 필요하며, .woff나 .ttf 같은 파일 형식을 지원하는 글꼴을 다운로드해야 합니다.
- 폰트를 워드프레스의 uploads 폴더나 wp-content/themes/your-theme/fonts 폴더에 업로드합니다.
- style.css 파일에 아래와 같은 코드를 추가하여 커스텀 글꼴을 선언합니다.
@font-face {
font-family: '나만의 글꼴';
src: url('폰트가 있는 폴더/MyCustomFont.woff') format('woff'),
url('폰트가 있는 폴더/MyCustomFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}이 방법을 통해 고유한 폰트를 사이트에 적용할 수 있습니다. 다만, 글꼴 파일이 크면 사이트 로딩 속도에 영향을 미칠 수 있으므로, 가급적 최적화된 파일 형식(.woff, .woff2)을 사용하는 것이 좋습니다.
6. 마무리하며
워드프레스에서 글꼴을 변경하는 방법은 다양합니다. 테마 사용자 정의와 플러그인을 활용하면 누구나 쉽게 글꼴을 변경할 수 있고, Google Fonts를 직접 추가하거나 사용자 정의 폰트를 사용하는 방법을 통해 더욱 맞춤화된 디자인을 적용할 수 있습니다.