사용자 정의 WordPress 글꼴을 추가하는 방법(및 쌍을 이루는 글꼴 선택)
게시 됨: 2019-04-04사이트에 사용자 정의 WordPress 글꼴을 추가하는 방법을 찾고 계십니까?
WordPress 테마에는 선택할 수 있는 자체 글꼴 세트가 포함되어 있을 수 있지만 옵션이 매우 제한적일 수 있으므로 대신 자신의 WordPress 글꼴을 추가하려는 것은 충분히 이해할 수 있습니다.
이 게시물에서는 몇 가지 다른 방법을 통해 WordPress에서 글꼴을 업로드하고 사용하는 방법을 배웁니다.
자신의 WordPress 글꼴을 사용하는 아이디어에 익숙하지 않은 경우 사용자 정의 글꼴을 찾을 수 있는 위치와 글꼴을 페어링하는 방법에 대한 빠른 입문서부터 시작하겠습니다.
그런 다음 다음에서 사용자 지정 WordPress 글꼴을 추가하는 방법을 보여줍니다.
- 구글 폰트
- Adobe 글꼴(Typekit)
- 말 그대로 다른 곳! (글꼴 파일을 업로드하고 CSS3 @font-face를 사용하여)
이 링크를 클릭하면 튜토리얼로 바로 이동합니다.
WordPress용 사용자 정의 글꼴을 찾을 수 있는 위치
맞춤 WordPress 글꼴을 찾는 가장 잘 알려진 곳은 단연 Google 글꼴입니다. Google Fonts에는 900개 이상의 글꼴이 있는 저장소가 있으며, 모두 무료이며 Google CDN 덕분에 WordPress 사이트에 쉽게 통합할 수 있습니다.
Google Fonts 다음으로 잘 알려진 또 다른 옵션은 Adobe Fonts( 이전에는 Typekit이라고 함 )입니다. Adobe Fonts는 Adobe Creative Cloud 구독의 일부로 추가 비용 없이 포함되지만 비구독자는 사용할 수 없습니다.
마지막으로 무료 및 프리미엄 글꼴을 모은 다른 사이트를 많이 찾을 수 있습니다. 우리가 가장 좋아하는 두 가지는 다음과 같습니다.
- Font Squirrel – 상업용으로 100% 무료인 글꼴을 수집합니다.
- Fonts.com – 다양한 프리미엄 글꼴 모음이 있습니다.
사이트가 멋지게 보이도록 글꼴을 페어링하는 방법
일반적으로 WordPress 사이트에서는 단일 글꼴을 사용하지 않습니다. 대신 대부분의 사이트에서는 글꼴 쌍을 사용하여 보다 흥미로운 디자인을 만들고 콘텐츠를 차별화합니다.
그러나 두 개의 글꼴을 무작위로 함께 던지고 싶지는 않습니다. 너무 뜨겁지 않을 수도 있습니다.
대신, 함께 작동하는 두 개의 글꼴이 필요합니다. 이 글꼴 은 디자이너가 아닌 경우 파악하기 어려울 수 있습니다.
이를 돕기 위해 글꼴 쌍을 제안하는 훌륭한 사이트가 많이 있습니다. 예를 들어, 정말 마음에 드는 글꼴을 찾으면 이 사이트 중 하나를 사용하여 글꼴을 찾을 수 있습니다. 우리의 즐겨 찾기 중 일부는 다음과 같습니다.
- 글꼴 쌍
- 폰조이
- Typ.io
두 개의 글꼴만 사용할 수 있다는 규칙은 없지만 WordPress 글꼴을 너무 많이 사용하는 것은 주의해야 합니다. 혼란스러운 디자인을 만들 가능성 외에도 사용자 정의 글꼴을 너무 많이 사용하면 사이트의 로드 시간이 느려질 수 있습니다.
사용자 정의 WordPress 글꼴을 추가하는 방법: 단계별 가이드
이제 재미있는 부분으로 – 여기에 자신의 사용자 정의 WordPress 글꼴을 사용하는 방법이 있습니다.
글꼴의 출처에 따라 여기에서 선택할 수 있는 몇 가지 경로가 있습니다.
다음은 우리가 다룰 세 가지 방법입니다. 다시 말하지만 링크를 클릭하면 특정 튜토리얼로 바로 이동할 수 있습니다.
- WordPress에 Google 글꼴 추가(플러그인, 수동 또는 로컬 호스팅 방법)
- WordPress에 Adobe 글꼴(Typekit) 추가
- CSS3 @font-face를 사용하여 WordPress에서 모든 글꼴 업로드 및 추가
WordPress에 Google 글꼴을 추가하는 방법
Google 글꼴은 맞춤 WordPress 글꼴에 대한 가장 인기 있는 소스이므로 WordPress에 Google 글꼴을 추가하는 세 가지 방법을 다룹니다.
- 플러그인을 사용하여 Google CDN에서 Google 글꼴 추가
- Google CDN에서 Google 글꼴을 수동으로 추가
- 플러그인을 사용하여 WordPress에서 로컬로 Google 글꼴 호스팅
플러그인을 사용하여 WordPress에 Google 글꼴을 추가하는 방법
Google Fonts의 인기로 인해 WordPress에 Google Fonts를 매우 간단하게 추가할 수 있는 몇 가지 고품질 플러그인을 찾을 수 있습니다. 가장 좋아하는 것은 Easy Google Fonts입니다.
- 무료
- 경량
- 사용하기 쉬운
플러그인을 설치하고 활성화한 후 WordPress 대시보드에서 모양 → 사용자 지정 으로 이동하여 실시간 WordPress 사용자 지정 프로그램을 실행합니다.
그런 다음 타이포그래피 옵션을 클릭하여 Google 글꼴 옵션을 선택합니다.
여기에서 옵션을 사용하여 사이트의 각 요소에 대한 사용자 정의 글꼴을 선택할 수 있습니다.
예를 들어 단락 글꼴을 변경하는 방법은 다음과 같습니다.
글꼴 자체를 선택하는 것 외에도 플러그인을 사용하여 다음을 사용자 지정할 수도 있습니다.
- 글꼴 두께
- 텍스트 장식
- 그림 물감
CSS에 대해 약간 알고 있다면 플러그인의 글꼴 제어 기능을 사용하여 특정 요소를 그룹화할 수도 있습니다. 예를 들어 헤더 선택기를 결합하여 모든 헤더를 한 번에 타겟팅할 수 있습니다.
이를 설정하려면 설정 → Google 글꼴 로 이동하여 특정 CSS 선택기를 대상으로 하는 새 글꼴 컨트롤을 만듭니다.
플러그인 없이 WordPress에 Google 글꼴을 추가하는 방법
Google은 자체 CDN에서 모든 글꼴을 호스팅하기 때문에 WordPress에 Google 글꼴을 수동으로 추가하는 것도 매우 쉽습니다.
기본적으로 서버에 글꼴 파일을 업로드할 필요 없이 Google에서 호스팅하는 CDN에 연결하기만 하면 Google에서 글꼴 제공을 처리합니다.
성능상의 이유로 이 작업을 수행하는 것을 좋아하지 않는 사람들도 있습니다 . 원하는 경우 다음 섹션에서 Google 글꼴을 로컬로 호스팅하는 방법을 공유하겠습니다 .
시작하려면 Google 글꼴 웹사이트를 사용하여 추가하려는 글꼴을 선택해야 합니다.
이 예에서는 Roboto 를 사용하려고 한다고 가정해 보겠습니다.
글꼴 페이지로 이동하여 + 이 글꼴 선택을 클릭합니다.
그러면 오른쪽 하단 모서리에 창이 추가됩니다. 클릭하여 해당 창을 확장합니다.
추가 글꼴 두께( 예: 굵게 및 기울임꼴 )를 선택하려면 사용자 정의 탭으로 이동할 수 있습니다. 사용성과 성능 간의 적절한 균형을 위해 절대 최대값 에서 세 가지 글꼴 두께를 선택하는 것이 좋습니다.
- 정기적 인
- 이탤릭체
- 용감한
최고의 성능을 원한다면 더 적게 사용할 수도 있습니다 .
당신이 당신의 선택을 한 후에는 삽입 탭으로 돌아가서 글꼴 포함 코드를 복사 :
다음으로 이 코드를 WordPress 테마의 <head> 섹션에 추가해야 합니다. 다음과 같이 할 수 있습니다.
- 자식 테마 의 header.php 파일 직접 편집( 자식 테마 를 사용해야 합니다. 그렇지 않으면 테마를 업데이트할 때 사용자 정의 글꼴이 사라집니다 )
- 머리글 및 바닥글 삽입과 같은 무료 플러그인 사용
코드를 추가하면 CSS에서 Google 글꼴을 사용할 수 있습니다.
Google 글꼴 웹사이트로 돌아가면 Google에서 실제로 사용해야 하는 CSS 규칙을 알려줍니다.
예를 들어 h2 태그가 새 Roboto 글꼴을 사용하도록 하려면 모양 → 사용자 정의 → 추가 CSS 로 이동하여 다음 스니펫을 추가할 수 있습니다.
h2 {
글꼴 패밀리: 'Roboto', sans-serif;
}
플러그인을 사용하여 WordPress에서 로컬로 Google 글꼴을 호스팅하는 방법
Google Fonts의 최종 방법은 다음과 같습니다.
어떤 사람들은 Google의 CDN에서 로드하는 것보다 로컬에서 Google 글꼴을 호스팅하는 것을 선호합니다. 즉, "https://fonts.googleapis.com/css?family=Roboto:400,700"과 같은 링크에서 로드하는 대신 자신의 서버에서 파일을 호스팅할 수 있습니다.
이를 수행하는 가장 쉬운 방법은 CAOS for Webfonts라는 무료 플러그인을 사용하는 것입니다.
플러그인을 설치하고 활성화하면 설정 → 웹 글꼴 최적화 로 이동하여 서버에 다운로드할 글꼴을 선택할 수 있습니다.
완료하면 CSS에서 글꼴 사용을 시작할 수 있습니다( 이전 방법을 따르는 것처럼 ).
WordPress에서 Adobe 글꼴(Typekit)을 추가하는 방법
WordPress에서 Adobe Fonts를 사용하려면 기본적으로 수동 Google Fonts 방법과 동일한 단계를 따를 수 있습니다. Adobe Fonts 서비스는 Creative Cloud 구독의 일부로만 사용할 수 있습니다 .
시작하려면 Adobe Fonts 웹 사이트를 사용하여 글꼴을 선택하고 웹 프로젝트를 만들어야 합니다( 자세한 지침은 여기 ).
웹 프로젝트에 글꼴 추가 창에서 포함할 글꼴을 선택할 수 있습니다.
그러면 Adobe에서 Google Fonts와 같은 내장 코드를 제공합니다.
해당 임베드 코드를 가져와 자식 테마의 header.php 파일이나 머리글 및 바닥글 삽입과 같은 플러그인을 사용하여 사이트에 추가합니다.
CSS 파일에 연결하면 Adobe에서 제공하는 CSS를 사용하여 사이트의 CSS 선택기에 글꼴 적용을 시작할 수 있습니다.
WordPress에서 @font-face를 사용하는 방법
마지막으로 보여드릴 마지막 방법은 WordPress에서 @font-face를 사용하는 방법입니다. 이 방법의 좋은 점은 문자 그대로 모든 소스의 모든 글꼴 파일 과 함께 작동한다는 것입니다.
기본적으로 글꼴 파일을 다운로드할 수 있고 사용할 수 있는 권한이 있는 한 CSS3 @font-face가 처리합니다.
시작하려면 원하는 소스에서 글꼴 파일을 다운로드하십시오. 이 예에서는 Alex Brush 라는 Font Squirrel의 무료 글꼴을 사용합니다.
가능한 경우 최상의 브라우저 간 호환성을 위해 .woff 또는 .woff2 파일 형식으로 파일을 다운로드하십시오. 이것이 가능하지 않다면 글꼴을 다른 형식으로 다운로드한 다음 무료 FontSquirrel Webfont Generator 도구를 사용하여 .woff 로 변환할 수 있습니다 .
그런 다음 FTP 또는 cPanel 파일 관리자를 통해 WordPress 사이트의 서버에 연결합니다. 그 다음에…
- 활성 테마 또는 하위 테마의 디렉토리에 fonts 라는 이름의 새 폴더를 만듭니다( 일부 테마에는 이미 fonts 폴더 가 있을 수 있습니다 . 이 경우 건너뛸 수 있음 ).
- fonts 폴더에 글꼴 파일을 업로드합니다. .woff 및 .woff2 형식을 모두 업로드할 수 있습니다.
파일을 업로드했으면 WordPress 대시보드에서 모양 → 사용자 정의 → 추가 CSS 로 이동합니다.
먼저 @font-face 를 사용하여 글꼴을 추가해야 합니다.
이를 위해, 글꼴 - 가족 글꼴의 이름을 입력하고 URL과 같은 서버에있는 글꼴 파일에 직접 URL을 추가합니다. AlexBrush 예제의 경우 다음과 같습니다.
@글꼴 얼굴 {
글꼴 패밀리: AlexBrush;
src: url(http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);
글꼴 두께: 보통;
}
그렇게 하고 나면 CSS를 사용하여 글꼴 패밀리를 적용할 수 있습니다( @font-face 에 등록한 이름으로 ). 예를 들어, <h2> 헤더에 AlexBrush 글꼴을 사용하는 방법은 다음과 같습니다.
그리고 그게 다야! 말 그대로 모든 글꼴 파일에 이 CSS3 @font-face 메서드를 사용할 수 있습니다.
사용자 정의 WordPress 글꼴에 대한 최종 생각
WordPress 테마에 사용하려는 글꼴이 없는 경우 당황하지 마세요! 사용자 정의 WordPress 글꼴을 추가하기 위한 많은 옵션이 있습니다.
시작하는 가장 쉬운 방법은 Google Fonts에서 호스팅되는 무료 글꼴 또는 Adobe Fonts에서 호스팅되는 프리미엄 옵션을 사용하는 것입니다.
그러나 이러한 서비스에 국한되지 않으며 CSS3 @font-face를 사용하여 말 그대로 모든 글꼴 파일을 WordPress에 업로드하고 테마에서 사용할 수 있습니다.
이제 밖으로 나가서 나만의 글꼴 페어링을 만드십시오!