WordPress에서 사용자 정의 글꼴을 추가하는 방법

WordPress에서 사용자 정의 글꼴을 추가 하시겠습니까? 사용자 정의 글꼴을 사용하면 웹 사이트에서 다양한 글꼴을 아름답게 조합하여 활판 인쇄 및 사용자 경험을 향상시킬 수 있습니다.


보기 좋게 보이는 것 외에도 사용자 정의 글꼴을 사용하면 가독성을 높이고 브랜드 이미지를 만들며 사용자가 웹 사이트에서 보내는 시간을 늘릴 수 있습니다.

이 기사에서는 Google Fonts, TypeKit 및 CSS3 @ Font-Face 메서드를 사용하여 WordPress에서 사용자 정의 글꼴을 추가하는 방법을 보여줍니다..

WordPress에서 사용자 정의 글꼴 추가

노트 : 너무 많은 글꼴을로드하면 웹 사이트 속도가 느려질 수 있습니다. 두 개의 글꼴을 선택하여 웹 사이트에서 사용하는 것이 좋습니다. 또한 웹 사이트 속도를 늦추지 않고 올바르게로드하는 방법을 보여줍니다..

WordPress에서 사용자 정의 글꼴을 추가하는 방법을 살펴보기 전에 사용할 수있는 사용자 정의 글꼴을 찾아 보겠습니다..

WordPress에서 사용할 사용자 정의 글꼴을 찾는 방법

폰트는 비싸지 만 더 이상은 아닙니다. Google Fonts, Typekit, FontSquirrel 및 fonts.com과 같은 훌륭한 무료 웹 글꼴을 찾을 수있는 곳이 많이 있습니다.

글꼴을 혼합하고 일치시키는 방법을 모르면 글꼴 쌍을 사용해보십시오. 디자이너가 아름다운 Google 글꼴을 함께 사용하도록 도와줍니다..

글꼴을 선택할 때 너무 많은 사용자 정의 글꼴을 사용하면 웹 사이트 속도가 느려집니다. 그렇기 때문에 디자인 전체에서 두 개의 글꼴을 선택하여 사용해야합니다. 이것은 또한 당신의 디자인에 일관성을 가져올 것입니다.

비디오 튜토리얼

WPBeginner 구독

동영상이 마음에 들지 않거나 서면 가이드를 선호하는 경우 계속 읽으십시오..

Google Fonts에서 WordPress에 사용자 정의 글꼴 추가

Google Fonts 미리보기

Google Fonts는 웹 사이트 개발자 중 가장 크고 무료이며 가장 일반적으로 사용되는 글꼴 라이브러리입니다. WordPress에서 Google 글꼴을 추가하고 사용하는 방법에는 여러 가지가 있습니다.

방법 1 : Easy Google Fonts 플러그인을 사용하여 맞춤 글꼴 추가

웹 사이트에서 Google Fonts를 추가하고 사용하려면이 방법이 초보자에게 가장 쉽고 권장됩니다..

가장 먼저해야 할 일은 Easy Google Fonts 플러그인을 설치하고 활성화하는 것입니다. 자세한 내용은 워드 프레스 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오..

활성화되면 외관»커 스터 마이저 페이지. 새로운 타이포그래피 섹션이 표시되는 라이브 테마 맞춤 설정 인터페이스가 열립니다..

커 스터 마이저 타이포그래피

타이포그래피를 클릭하면 웹 사이트에서 Google 글꼴을 적용 할 수있는 다른 섹션이 표시됩니다. 수정하려는 섹션 아래의 ‘글꼴 수정’을 클릭하십시오..

타이포그래피 설정

글꼴 모음 섹션에서 웹 사이트에서 사용하려는 Google 글꼴을 선택할 수 있습니다. 글꼴 스타일, 글꼴 크기, 여백, 여백 등을 선택할 수도 있습니다..

테마에 따라 여기의 섹션 수가 제한되어 웹 사이트의 여러 영역에서 글꼴 선택을 직접 변경하지 못할 수 있습니다.

이 문제를 해결하기 위해 플러그인을 사용하면 자신 만의 컨트롤을 만들어 웹 사이트에서 글꼴을 변경할 수 있습니다..

먼저 방문해야합니다 설정»Google 글꼴 페이지에서 글꼴 컨트롤의 이름을 제공하십시오. 이 글꼴 컨트롤을 사용할 위치를 빠르게 이해하는 데 도움이되는 것을 사용하십시오..

폰트 컨트롤 섹션

그런 다음 ‘글꼴 컨트롤 만들기’버튼을 클릭하면 CSS 선택기를 입력하라는 메시지가 표시됩니다.

타겟팅하려는 HTML 요소 (예 : h1, h2, p, blockquote)를 추가하거나 CSS 클래스를 사용할 수 있습니다.

브라우저에서 검사 도구를 사용하여 변경하려는 특정 영역에서 사용되는 CSS 클래스를 찾을 수 있습니다.

CSS 선택기 추가

이제 ‘글꼴 컨트롤 저장’버튼을 클릭하여 설정을 저장하십시오. 웹 사이트의 다른 섹션에 필요한만큼의 글꼴 컨트롤러를 만들 수 있습니다.

이러한 글꼴 컨트롤러를 사용하려면 외관»커 스터 마이저 타이포그래피 탭을 클릭하십시오.

타이포그래피에서 ‘테마 타이포그래피’옵션도 표시됩니다. 클릭하면 이전에 만든 사용자 정의 글꼴 컨트롤이 표시됩니다. 이제 편집 버튼을 클릭하여이 컨트롤의 글꼴과 모양을 선택할 수 있습니다.

테마 타이포그래피 옵션

변경 사항을 저장하려면 저장 또는 게시 버튼을 클릭하는 것을 잊지 마십시오.

방법 2 : WordPress에서 수동으로 Google 글꼴 추가

이 방법을 사용하려면 WordPress 테마 파일에 코드를 추가해야합니다. 이전에이 작업을 수행하지 않은 경우 WordPress에서 코드를 복사하여 붙여 넣는 방법에 대한 가이드를 참조하십시오..

먼저 Google 글꼴 라이브러리를 방문하여 사용하려는 글꼴을 선택하십시오. 그런 다음 글꼴 아래의 빠른 사용 버튼을 클릭하십시오.

사용할 글꼴 스타일을 선택하십시오

글꼴 페이지에서 해당 글꼴에 사용할 수있는 스타일이 표시됩니다. 프로젝트에서 사용할 스타일을 선택한 다음 상단의 사이드 바 버튼을 클릭하십시오.

글꼴 포함 링크 가져 오기

다음으로 사이드 바에서 ‘포함’탭으로 전환하여 소스 코드를 복사해야합니다..

이 코드를 워드 프레스 사이트에 추가 할 수있는 두 가지 방법이 있습니다.

먼저 테마의 header.php 파일을 수정하고 태그 앞에 코드를 붙여 넣기 만하면됩니다..

그러나 WordPress의 코드 편집에 익숙하지 않은 경우 플러그인을 사용하여이 코드를 추가 할 수 있습니다.

Insert Headers and Footers 플러그인을 설치하고 활성화하기 만하면됩니다. 자세한 내용은 워드 프레스 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오..

활성화되면 설정»머리글 및 바닥 글 삽입 페이지의 ‘스크립트 헤더’상자에 소스 코드를 붙여 넣습니다..

WordPress 사이트에 글꼴 코드 추가

변경 사항을 저장하려면 저장 버튼을 클릭하는 것을 잊지 마십시오. 플러그인이 이제 웹 사이트의 모든 페이지에 Google 글꼴 포함 코드를로드하기 시작합니다..

다음과 같이 테마의 스타일 시트에서이 글꼴을 사용할 수 있습니다.

.h1 사이트 제목 {
폰트 패밀리 : ‘Open Sans’, Arial, sans-serif;
}

자세한 내용은 WordPress 테마에서 Google 글꼴을 추가하는 방법에 대한 가이드를 참조하십시오.

Typekit을 사용하여 WordPress에서 사용자 정의 글꼴 추가

Typekit Adobe 글꼴

Adobe Fonts의 Typekit은 디자인 프로젝트에서 사용할 수있는 멋진 글꼴을위한 또 하나의 무료 프리미엄 리소스입니다. 유료 구독 및 제한된 무료 요금제를 사용할 수 있습니다..

Adobe Fonts 계정에 가입하고 글꼴 찾아보기 섹션을 방문하십시오. 여기에서 버튼을 클릭하여 글꼴을 선택하고 프로젝트를 만들어야합니다..

프로젝트에 typekit 글꼴 추가

다음으로 프로젝트 ID가 포함 된 임베드 코드가 표시됩니다. 또한 테마의 CSS에서 글꼴을 사용하는 방법을 보여줍니다.

이 코드를 복사하여 웹 사이트 섹션에 붙여 넣어야합니다..

타입 킷 글꼴 포함 코드

이 코드를 워드 프레스 사이트에 추가 할 수있는 두 가지 방법이 있습니다.

먼저 테마의 header.php 파일을 수정하고 태그 앞에 코드를 붙여 넣기 만하면됩니다..

그러나 WordPress의 코드 편집에 익숙하지 않은 경우 플러그인을 사용하여이 코드를 추가 할 수 있습니다.

간단하게 머리글 및 바닥 글 삽입 플러그인을 설치하고 활성화하십시오..

활성화되면 설정»머리글 및 바닥 글 삽입 페이지의 ‘스크립트 헤더’상자에 소스 코드를 붙여 넣습니다..

WordPress에서 Adobe Fonts로 Typekit 추가

이제 WordPress 테마의 스타일 시트에서 선택한 Typekit 글꼴을 다음과 같이 사용할 수 있습니다.

h1 .site-title {
폰트 패밀리 : 길버트, 산세 리프;
}

자세한 내용은 Typekit을 사용하여 WordPress에서 멋진 타이포그래피를 추가하는 방법을 자습서에서 확인하십시오..

CSS3 @ font-face를 사용하여 WordPress에서 사용자 정의 글꼴 추가

WordPress에서 사용자 정의 글꼴을 추가하는 가장 직접적인 방법은 CSS3 @ font-face 메서드를 사용하여 글꼴을 추가하는 것입니다. 이 방법을 사용하면 웹 사이트에서 원하는 글꼴을 사용할 수 있습니다.

가장 먼저해야 할 일은 웹 형식으로 원하는 글꼴을 다운로드하는 것입니다. 글꼴의 웹 형식이없는 경우 FontSquirrel Webfont 생성기를 사용하여 변환 할 수 있습니다.

웹 폰트 파일이 있으면 WordPress 호스팅 서버에 업로드해야합니다..

서체를 업로드하는 가장 좋은 장소는 테마 또는 하위 테마 디렉토리의 새로운 “fonts”폴더 안에 있습니다..

cPanel의 FTP 또는 파일 관리자를 사용하여 글꼴을 업로드 할 수 있습니다.

글꼴을 업로드 한 후에는 다음과 같이 CSS3 @ font-face 규칙을 사용하여 테마의 스타일 시트에 글꼴을로드해야합니다.

@ font-face {
폰트 패밀리 : Arvo;
src : url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
폰트 가중치 : normal;
}

글꼴 모음과 URL을 자신의 것으로 바꾸는 것을 잊지 마십시오.

그런 다음 테마의 스타일 시트에서 다음과 같이 해당 글꼴을 사용할 수 있습니다.

.h1 사이트 제목 {
글꼴 모음 : "아르보", Arial, 산세 리프;
}

CSS3 @ font-face를 사용하여 직접 글꼴을로드하는 것이 항상 최상의 솔루션은 아닙니다. Google Fonts 또는 Typekit에서 글꼴을 사용하는 경우 최적의 성능을 위해 서버에서 직접 글꼴을 제공하는 것이 가장 좋습니다..

이 기사가 WordPress에 사용자 정의 글꼴을 추가하는 데 도움이 되었기를 바랍니다. WordPress에서 아이콘 글꼴을 사용하는 방법 및 WordPress에서 글꼴 크기를 변경하는 방법에 대한 가이드를 확인하십시오..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map