WordPress에 사용자 정의 글꼴을 추가하는 방법은 무엇입니까?

게시 됨: 2020-11-05

웹 사이트의 타이포그래피를 사용자 정의하는 방법을 배우는 것은 웹 사이트를 만들고 실행하는 데 있어 매우 기본적인 측면입니다. 웹사이트의 전체적인 느낌을 바꾸고 방문자가 고객과 상호작용하는 방식에 큰 차이를 만들 수 있습니다.

따라서 WordPress에 사용자 정의 글꼴을 추가하는 방법을 알아야 합니다. 올바른 글꼴을 선택하면 웹사이트의 독특한 모양을 만들고 시각적 브랜드를 구축할 수 있으며 가독성과 방문자 참여도를 높일 수 있습니다.

온라인에서 사용할 수 있는 수천 개의 글꼴이 있으며 그 중 많은 글꼴이 무료입니다. 이 기사에서는 가장 널리 사용되는 두 가지 웹 글꼴 데이터베이스인 Google 글꼴과 Typekit 글꼴이라고도 하는 Adobe 글꼴을 웹사이트에 추가하는 방법에 대해 설명합니다. 이러한 글꼴 라이브러리에는 다운로드할 수 있는 수천 개의 웹 글꼴이 포함되어 있습니다.

이와 함께 인터넷에는 수많은 다른 글꼴 라이브러리가 있으며 이에 대해서도 이야기하겠습니다.

이러한 사용자 정의 글꼴을 웹사이트에 추가하는 방법은 다음과 같습니다.

목차

  • WordPress에 사용자 정의 글꼴을 추가하는 방법
    • 1. 플러그인을 사용하여 Google 글꼴 추가
    • 2. 코드를 사용하여 Google 글꼴 추가
    • 3. WordPress에 Adobe TypeKit 글꼴 추가
  • 기타 사용자 정의 글꼴 라이브러리
  • 플러그인을 사용하여 다른 사용자 정의 글꼴을 추가하는 방법
  • 다른 사용자 정의 글꼴을 수동으로 추가하는 방법
  • 결론

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

1. 플러그인을 사용하여 Google 글꼴 추가

Google 글꼴을 사용하여 WordPress 웹 사이트 콘텐츠의 스타일을 지정하려는 경우 WordPress 사용자 지정 프로그램을 Google 글꼴 데이터베이스와 직접 연결하는 편리한 도구가 있습니다. Easy Google Fonts는 무료이며 코드 작업 없이 Google Fonts를 사용할 수 있습니다.

  1. 이 방법을 사용하려면 먼저 Easy Google Fonts 플러그인을 설치하세요. 플러그인이 설정되면 WordPress 사용자 지정 프로그램(모양 > 사용자 지정)에서 '타이포그래피'라는 새로운 옵션을 찾을 수 있습니다.
타이포그래피

2. 타이포그래피 옵션으로 이동하면 사용자 정의할 수 있는 다양한 기본 콘텐츠 섹션 또는 글꼴 컨트롤을 찾을 수 있습니다. '글꼴 편집'을 클릭하면 해당 그룹의 글꼴 설정을 찾을 수 있습니다.

글꼴 편집

글꼴 설정은 매우 광범위하며 글꼴 크기 등과 같은 원하는 글꼴 스타일을 만들기 위해 텍스트의 거의 모든 측면을 사용자 정의할 수 있습니다. 스타일 탭의 글꼴 모음 옵션에서 특정 텍스트 범주의 글꼴을 변경할 수 있습니다.

모양 탭에서 글꼴 색상, 글꼴 크기 및 줄 높이와 같은 다른 일반적인 옵션을 찾을 수 있습니다.

여백, 패딩 및 테두리와 같은 위치 탭 아래에 몇 가지 심층적인 시각적 컨트롤이 있습니다.

3. 이제 이 플러그인에서 제공하는 기본 글꼴 컨트롤로 처리할 수 없는 특정 텍스트 범주에 대한 웹사이트의 특별한 주의가 필요할 수도 있습니다. 아마도 모든 제목에 대해 동일한 타이포그래피 설정을 원하고 단일 범주에서 모든 항목을 제어하기를 원할 수 있습니다. 설정 > Google 글꼴로 이동하여 사용자 정의 글꼴 컨트롤을 만들 수 있습니다.

구글 폰트

4. 글꼴 컨트롤 관리 탭으로 이동하여 '글꼴 컨트롤 만들기'를 클릭합니다.

새 글꼴 컨트롤 만들기

5. 이 특정 범주를 정의하기 위해 CSS 선택기를 제공하라는 메시지가 표시됩니다. 그런 다음 '안전한 글꼴 컨트롤'을 클릭하여 새 범주/글꼴 컨트롤을 만듭니다.

CSS 선택기

6. 사용자 정의 글꼴 컨트롤은 기본 글꼴과 다른 위치에서 찾을 수 있습니다. WordPress Customizer로 돌아가서 Typography 옵션을 클릭합니다. 기본 타이포그래피와 테마 타이포그래피의 두 가지 범주가 있습니다. 사용자 정의 글꼴 컨트롤은 테마 타이포그래피 옵션에서 찾을 수 있습니다.

테마 타이포그래피

2. 코드를 사용하여 Google 글꼴 추가

  1. 플러그인 없이 WordPress에 Google 글꼴을 추가하려는 경우 테마 파일에 코드를 추가할 수 있습니다. 변경 사항이 마음에 들지 않으면 되돌릴 수 있도록 이에 대한 하위 테마를 만들 수 있습니다.
이 스타일 선택 클릭

2. Google Fonts 웹사이트로 이동하여 원하는 글꼴을 찾습니다. 글꼴 페이지에서 각 글꼴의 다양한 스타일을 찾을 수 있습니다. 원하는 스타일에 대해 '이 스타일 선택' 버튼을 클릭합니다. 선택한 글꼴은 특수 섹션에서 사용하기 위해 저장됩니다. 페이지 오른쪽 상단에는 선택한 글꼴을 볼 수 있는 버튼이 있습니다. 두 개의 탭이 있는 사이드바가 열립니다. '삽입' 탭을 클릭합니다.

선택한 가족

3. 이 삽입 링크를 복사하여 <body> 태그 바로 앞에 있는 header.php 파일에 붙여넣습니다.

4. 테마 파일 작업의 번거로움을 처리하고 싶지 않다면, 테마 파일에 코드를 쉽게 추가할 수 있는 Insert Headers and Footers라는 편리한 플러그인이 있습니다. '머리글 및 바닥글 삽입'이라는 설정 표시줄의 자체 섹션을 통해 이 플러그인을 사용할 수 있습니다. '헤더의 스크립트' 상자에 코드를 붙여넣기만 하면 됩니다.

머리글 및 바닥글 삽입

3. WordPress에 Adobe TypeKit 글꼴 추가

Adobe에는 무료 버전과 유료 버전이 포함된 또 다른 인상적인 사용자 정의 글꼴 라이브러리가 있습니다. 글꼴 사용을 시작하기 전에 Adobe Fonts 웹 사이트에 계정이 있어야 합니다. 글꼴 찾아보기 페이지에서 사용 가능한 글꼴 탐색을 시작할 수 있습니다.

  1. 웹사이트에 로그인하면 </> 버튼을 클릭하여 원하는 글꼴을 사용할 수 있습니다.
어도비 글꼴

2. 포함 링크를 얻으려면 Adobe Fonts에서 웹 프로젝트를 만들고 선택한 글꼴을 프로젝트에 추가해야 합니다.

프로젝트의 글꼴 선택
코드 삽입

3. Google Fonts의 프로세스와 마찬가지로 이 삽입 링크를 테마의 header.php 파일에 붙여넣어 <body> 태그 앞에 붙여넣어야 합니다.

4. 머리글 및 바닥글 삽입 플러그인을 사용하여 테마 파일로 직접 작업하는 것을 피할 수 있습니다. 설정 표시줄의 머리글 및 바닥글 삽입 옵션으로 이동하여 포함 코드를 '머리글의 스크립트' 상자에 붙여넣기만 하면 됩니다. 선택한 TypeKit 글꼴을 가져옵니다.

머리글 및 바닥글 삽입

기타 사용자 정의 글꼴 라이브러리

Google Fonts 및 Adobe Fonts는 가장 널리 사용되는 웹 글꼴 데이터베이스입니다. 그러나 WordPress 웹 사이트에 적합한 글꼴을 다운로드하기 위해 탐색할 수 있는 다른 글꼴 라이브러리가 많이 있습니다. 다음은 탐색할 수 있는 몇 가지입니다.

  1. 템플릿몬스터
  2. 글꼴 다람쥐
  3. 폰트스프링
  4. 1001개의 무료 글꼴
  5. 글꼴 괴물
  6. 추상 글꼴
  7. 마이폰트

플러그인을 사용하여 다른 사용자 정의 글꼴을 추가하는 방법

사용자 정의 글꼴을 수동으로 추가하는 번거로움을 건너뛸 수 있는 모든 글꼴 사용이라는 편리한 플러그인이 있습니다. 대시보드에서 바로 새 글꼴을 추가하고 원하는 요소에 사용자 정의 글꼴을 할당할 수 있는 간단한 인터페이스를 제공합니다.

다른 사용자 정의 글꼴을 수동으로 추가하는 방법

원하는 글꼴을 수동으로 추가하려면 글꼴 파일을 WordPress 디렉토리에 업로드해야 합니다. 새로운 모양이 마음에 들지 않거나 원치 않는 변경으로 인해 웹 사이트에 버그가 생길 경우에 대비하여 보안 계층을 구축하기 위해 이에 대한 하위 테마를 사용하십시오. 하위 테마를 사용하면 변경 사항을 쉽게 되돌릴 수 있습니다.

TemplateMonster와 같은 글꼴 라이브러리에서 원하는 글꼴을 다운로드하십시오. 그런 다음 wp-content/themes/your-theme/fonts 로 이동하여 FTP 클라이언트를 사용하여 Fonts 폴더에 업로드합니다. Fonts 폴더가 없으면 새로 만드십시오.

글꼴 파일이 업로드되면 스타일시트를 사용하여 글꼴을 가져와야 합니다. style.css 파일에 다음 코드를 추가합니다.

@글꼴 얼굴 {

font-family: 사용자 정의 글꼴;

src: url(http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);

글꼴 두께: 보통;

}

font-family를 가져오려는 글꼴의 이름으로 바꾸고 URL을 웹사이트의 URL로 바꿔야 합니다.

결론

위의 단계를 따르면 최소한의 번거로움으로 WordPress 웹사이트에 사용자 정의 글꼴을 쉽게 추가할 수 있습니다. Google Fonts 및 Adobe Fonts 데이터베이스에서만 사용할 수 있는 수천 개의 웹 글꼴이 있습니다. 사용자 정의 글꼴을 올바르게 선택하면 웹 사이트가 다른 매력을 얻고 방문자의 참여를 유도하며 주제와 관련된 더 나은 미학을 만들 수 있습니다.