워드 프레스에 커스텀 폰트 추가하기


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


워드 프레스 사이트에 적합한 글꼴을 선택하는 것은 웹 디자인 및 웹 사이트 브랜딩의 핵심입니다.

색상, 이미지 및 기타 요소처럼 타이포그래피 큰 역할을한다 방문자가 사이트를 인식하는 방식.

고맙게도 WordPress 글꼴은 자유롭게 사용자 지정할 수있는 많은 요소 중 하나입니다. 당신은 당신이 원하는 워드 프레스 사이트에서 거의 모든 무료 사용자 정의 글꼴을 사용할 수 있습니다.

WordPress 글꼴에 대해 알아야 할 모든 내용을 다룹니다.

  • A) WordPress에 사용자 정의 글꼴을 추가하는 방법 (수동)
  • B) 플러그인을 통해 WordPress에 사용자 정의 글꼴을 추가하는 방법
  • WordPress에서 사용자 정의 글꼴을 사용하는 이유
  • 사용자 정의 글꼴을 찾을 수있는 곳
  • 결론

A) WordPress에 수동으로 사용자 정의 글꼴을 추가하는 방법

WordPress에 사용자 정의 글꼴을 직접 추가하는 경우 HTML, JavaScript 및 CSS의 세 가지 주요 옵션이 있습니다. 각 방법에는 장단점이 있으며 설정에 따라 적합한 방법이 있습니다. 걱정하지 마세요, 우리는 그들 각각을 자세히 살펴볼 것입니다.

1. CSS와 @수입

가장 권장되지 않는 방법부터 시작하겠습니다. Google Fonts에서 사용자 정의 서체를 설치하려는 경우 레이블이 탭으로 표시되어 있습니다. @수입. 이 서비스는 CSS 코드를 제공합니다.

Google 글꼴의 가져 오기 탭

그대로 가져 와서 헤더에 삽입하거나 (아래에 자세히 설명) 복사하지 않고 복사 할 수 있습니다 >테마의 시작 부분에 괄호 (또는 더 나은 하위 테마) style.css 파일.

/ *
테마 이름 : 스물 열일곱 아이
테마 URI : https://wordpress.org/themes/twentyseventeen/
템플릿 : 스물셋 틴
저자 : WordPress 팀
작성자 URI : https://wordpress.org/
버전 : 1.0

* /

@import url ( 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * 추가 ​​CSS가 여기에 * /

이렇게하면 스타일 시트에서 글꼴을 사이트에로드합니다. 간단한 해결책 인 것 같습니다. 왜 가장 권장되지 않는가??

그 이유는 성능 문제입니다. 사용 @수입 브라우저가 여러 스타일 시트를 한 번에 다운로드하지 못하게하므로 더 이상 권장되는 방법이 아닙니다. 결과 : 페이지 로딩 시간이 느려집니다. 가능하다면 멀리 떨어져.

2. 워드 프레스 템플릿 파일 사용

사이트에서 글꼴을 얻는 두 번째 방법은 글꼴 라이브러리에서 제공 한 코드를 가져 와서 header.php 템플릿 파일. 대부분의 표준 WordPress 테마에는.

사이에 놓아야합니다. 괄호. 이렇게하면 페이지가로드 될 때마다 글꼴이로드됩니다..

워드 프레스 헤더에 구글 글꼴 코드를 입력

하위 테마를 사용하는 경우 부모 테마를 복사하십시오. header.php 하위 테마 디렉토리에 파일을 저장하고 변경하십시오..

일부 테마에는 백엔드를 통해 머리글과 바닥 글에 사용자 지정 코드를 추가 할 수있는 설정이 있습니다. 이것은 또한 실행 가능한 옵션입니다.

3. 사용 @ 폰트 페이스

지금까지 Google 및 Adobe 서버와 같은 다른 곳에서 호스팅되는 WordPress에서 사용자 정의 글꼴을 사용하는 방법에 대해서만 이야기했습니다. 그러나 자신의 사이트에서 글꼴을 호스팅하여 방문자의 브라우저에 글꼴을 제공 할 수도 있습니다.

이렇게하려면 먼저 해당 글꼴을 다운로드해야합니다. Google Fonts의 다운로드 버튼을 기억하십니까? 그 하나는 지금 편리해 질 것입니다. 다른 제공 업체에서도 글꼴을 다운로드 할 수 있습니다.

그렇게 할 때는 웹 글꼴 형식으로되어 있는지 확인하십시오. 그것은 TTF, OTF 또는 WOFF를 의미합니다. 당신은 그것에 대한 자세한 정보를 찾을 수 있습니다 여기. 올바른 웹 글꼴 형식이 없으면 사용할 수도 있습니다. 이 서비스 글꼴을 지원되는 글꼴로 변환.

글꼴 파일이 준비되면 FTP를 통해 WordPress 사이트에 업로드해야합니다. 그것들을 저장하기에 좋은 곳은라는 하위 테마의 하위 디렉토리에 있습니다. 폰트 (크리에이티브, 우리는 알고있다).

그런 다음 스타일 시트에 글꼴을로드해야합니다. @ 폰트 페이스. 모양은 다음과 같습니다.

@ font-face {
폰트 패밀리 : Roboto;
src : url (http : //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
폰트 가중치 : normal;
}

자신의 사이트에서 글꼴 이름과 위치를 바꿔야합니다. 그 후에는 새로운 사용자 정의 글꼴을 사용할 수 있습니다.

그러나 이것은 특히 성능 측면에서 최상의 솔루션은 아닙니다. Google 서버는 아마도 귀하의 서버보다 빠를 수 있으므로 거기에서 맞춤 글꼴을로드하는 것이 더 나은 해결책 일 것입니다.

4. 큐잉 글꼴 –“WordPress Way”

올바른 방법으로 WordPress에 사용자 정의 글꼴을 추가하려면 functions.php 파일 (현재 활성화 된 테마의 디렉토리 내부) 및 기능  wp_enqueue_script 또는 wp_enqueue_style.

도움을 받아 글꼴 사이트에서 제공하는 코드 스 니펫을 사용할 수 있습니다. 그러나 파일로 복사하는 대신 함수를 통해 헤더에 추가합니다..

차이점은 무엇입니까 wp_enqueue_scriptwp_enqueue_style? 이름에서 알 수 있듯이 하나는 스타일 시트를위한 스크립트를 추가하는 것입니다. 사용하기에 적합한 것은 소스에서 사용자 정의 글꼴을 제공하는 방법에 따라 다릅니다..

예를 들어 Google Fonts는 글꼴을 스타일 시트로 제공합니다. 이 경우 다음과 같은 방법으로 WordPress 사이트에 추가합니다.

add_google_fonts () 함수 {
wp_enqueue_style ( 'google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ( 'wp_enqueue_scripts', 'add_google_fonts');

이와 달리 Adobe Edge Web Fonts의 글꼴은 JavaScript로 제공됩니다. 따라서 사이트에서 대기열에 넣으려면 코드는 다음과 같습니다.

함수 add_adobe_fonts () {
wp_enqueue_script ( 'adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ( 'wp_enqueue_scripts', 'add_adobe_fonts');

그렇게 어렵지 않습니까? 또한 WordPress 방식으로 추가 포인트를 얻습니다..

5. 스타일 시트에서 사용자 정의 글꼴을 호출하십시오.

글꼴이 사이트에 추가되었으므로 공식적으로 사용할 수 있습니다. 그렇게하려면 남은 일은 스타일 시트에 새 글꼴에 대한 선언을 추가하는 것입니다. 예를 들어 제목 태그의 글꼴을 변경하려면 다음과 같이 사용하십시오.

h1,
h2,
h3,
h4,
h5,
h6 {
글꼴 모음 : 'Roboto';
}

노트 : 사용중인 서비스가 글꼴에 대한 CSS 선언을 지정하는 방법에주의하십시오. 테스트 사이트에서 CSS로 Open Sans를 호출하기 때문에 Adobe Edge Web Fonts가 작동하지 않는 것 같습니다. 열린 산 반대로 '오픈 산스' Google 글꼴에서.

그게 다야 이제 WordPress에 사용자 정의 글꼴을 수동으로 추가하는 방법을 알았습니다. 축하합니다, 이것은 다음 수준의 지식입니다! 분명히 플러그인을 통해 동일한 작업을 수행 할 수 있습니다. 이것이 우리가 다음에 이야기 할 내용입니다.

B) 플러그인을 통해 WordPress에 사용자 정의 글꼴을 추가하는 방법

플랫폼에 맞춤 글꼴을 추가하기위한 여러 플러그인 솔루션이 없다면 워드 프레스 영역은 그다지 좋지 않습니다. 우리는 사용법을 살펴볼 것입니다 쉬운 Google 글꼴, 이 지역에서 가장 인기있는 플러그인 중 하나입니다.

1. 플러그인 설치

첫 번째 단계는 플러그인 설치입니다. 그렇게하려면 플러그인> 새로 설치. 그런 다음 플러그인 이름을 검색하십시오. 검색 결과에서 지금 설치 귀하의 사이트에 플러그인이 활성화되면.

2. 사이트에서 글꼴 추가 / 변경

플러그인이 활성화되면 다음과 같은 새로운 메뉴 항목이 있습니다. 타이포그래피 아래에 모양> 사용자 화.

워드 프레스 커 스터 마이저의 타이포그래피 메뉴

당신이 그것을 클릭하고 선택하면 기본 타이포그래피, 단락 및 제목의 글꼴을 변경하는 컨트롤 목록이 있습니다..

워드 프레스 커 스터 마이저의 쉬운 구글 폰트 설정

그것들을 사용하는 것은 정말 간단합니다. 드롭 다운 메뉴를 클릭하면 글꼴 편집 사이트의 일부를 변경하려는 경우 그러면이 메뉴에 액세스 할 수 있습니다.

쉬운 구글 글꼴은 글꼴을 변경

여기서 가장 중요한 부분은 폰트 패밀리. 여기에서 전체 Google 글꼴 라이브러리에서 새 글꼴 유형을 선택할 수 있습니다 ( 스크립트 / 서브셋 글꼴 선택을 특수 문자가있는 글꼴로 제한).

글꼴은 표준, serif, sans-serif, 디스플레이, 필기 및 모노 스페이스 글꼴로 정렬됩니다. 그러나 이름으로 간단히 검색 할 수도 있습니다..

글꼴을 클릭하면 오른쪽에서 변경 사항을 실시간으로 미리 볼 수 있습니다.

쉬운 Google 글꼴에서 사용자 정의 글꼴 변경

3. 폰트 설정

글꼴을 선택한 후에는 타이포그래피를 추가로 사용자 정의 할 수있는 많은 옵션이 있습니다.

우선, 같은 이름의 메뉴에서 글꼴 두께 / 스타일을 변경할 수 있습니다. 글자의 두께를 제어합니다.

또한, 아래 텍스트 장식, 밑줄, 취소 선 및 밑줄을 추가 할 수 있습니다. 텍스트 변환 또한 모든 대문자로 설정하거나 모든 소문자로 설정하거나 모든 첫 글자를 대문자로 지정할 수 있습니다. 아래의 외관 탭에서 글꼴 색상, 배경 색상, 글꼴 크기, 줄 높이 및 문자 간격을 제어 할 수도 있습니다..

쉬운 Google 글꼴의 모양 설정

드디어, 포지셔닝 여백, 패딩, 테두리, 테두리 반경 및 표시와 같은 다른 설정을 변경할 수 있습니다.

쉬운 Google 글꼴로 위치 설정

요컨대, 사이트의 글꼴을 원하는대로 완전히 사용자 정의 할 수 있어야합니다. 쉽지 않습니까? 치는 것을 잊지 마세요 저장 및 게시 변경 사항에 만족하면 맨 위에.

작동하지 않습니다. 어떻게해야합니까?

때로는 사이트의 일부 글꼴을 변경할 수 없습니다. 일반적으로 사용중인 테마에 비표준 CSS 클래스와 선택자가 포함되어 스타일을 지정할 때 발생합니다..

예를 들어, Twenty Sixteen 테마에서 블로그 게시물 제목은 H1로 정의 될뿐만 아니라 CSS 클래스가 있습니다. .참가작. 이런 이유로 플러그인은 플러그인을 변경할 수 없습니다.

이 문제를 해결하려면 소위 폰트 컨트롤 아래에 설정> Google 글꼴.

쉬운 Google 글꼴로 글꼴 컨트롤 추가

필요한 경우 CSS 선택기를 새로운 컨트롤 및 강제 재정의와 연결할 수 있습니다. 이렇게 한 후에 WordPress Customizer의 새 글꼴 컨트롤을 추가 옵션으로 사용할 수 있습니다. 테마 타이포그래피. 쉬워요.

다른 사용자 정의 글꼴 WordPress 플러그인

사용자 정의 글꼴을 추가 할 수있는 다른 WordPress 플러그인도 있습니다.

  • 모든 글꼴 사용 – CSS없이 업로드 된 글꼴을 사용하는 데 도움이됩니다. 자체 서버에 글꼴을 저장하고 글꼴 형식을위한 변환 도구도 제공합니다..
  • WordPress 용 Typekit 글꼴 – Adobe의 글꼴 사용 타입 킷 서비스 (가입해야 함). 플러그인에서 직접 포함 코드 및 사용자 정의 CSS를 입력 할 수 있습니다..
  • TK Google 글꼴 – Google 글꼴 환경을 WordPress 백엔드로 이동시키는 Google 글꼴을 포함하는 대체 솔루션입니다. 미리보기 및 사용자 정의 텍스트가있는 글꼴을 사용해 본 후 WordPress Customizer에서 변경하십시오..

WordPress 웹 사이트에서 사용자 정의 글꼴을 사용하는 이유?

타이포그래피는 과학 자체이므로 웹 디자인에서 글꼴 사용에 대한 전체 과정을 제공 할 수는 없습니다. 결국, 글꼴뿐만 아니라 크기, 기울기, 두께 및 기타 많은 것들에 관한 것입니다. 그러나 우리는 할 수있다 WordPress 사이트에서 사용자 정의 글꼴을 사용하는 것이 좋은 이유를 설명하십시오..

1. 타이포그래피는 첫인상의 일부입니다

우선, 사용하는 글꼴은 사이트가 인식되는 방식에 많은 영향을줍니다. 당신의 사이트는 재미 있고 재미 있습니까? 당신은 비즈니스 전문가입니까? 방문객들은 이것을 한눈에 결정하고 타이포그래피는 그들의 인식에 큰 역할을합니다.

2. 글꼴은 생각보다 훨씬 많은 영향을 미칩니다

학습 능력, 텍스트 암기 및 기분에 영향을 줄 수 있습니다..

예를 들어 연구, 일부 텍스트를 읽는 데 소요되는 시간을 늘리려면 serif 글꼴을 사용해야합니다. 그러나 짧은 시간에 더 많은 내용을 읽으려면 sans-serif 글꼴로 전환해야합니다.

또 다른 연구는 사람들에게 다른 서체에서 동일한 운동 지침을 보여주었습니다. 그런 다음 참가자들에게 상기 지침을 완료하는 데 걸리는 시간을 추정하도록 요청했습니다. 흥미롭게도, 더 복잡한 글꼴을 가진 사람들은 더 간단한 글꼴을 가진 그룹보다 더 오래 걸릴 것이라고 생각했습니다. 결과적으로, 그들은 운동 루틴을 따를 가능성이 적었다.

사용자 정의 글꼴을 찾을 수있는 곳

1. Google 글꼴을 사용하여 맞춤 타이포그래피 찾기

우리가 볼 첫 번째 서비스는 구글 글꼴. 이름에서 알 수 있듯이 Google은 800 개 이상의 글꼴을 제공하는 서비스입니다. 무료로 사용할 수 있습니다. 모두를위한.

사용 방법은 다음과 같습니다.

2. 올바른 글꼴 찾기

처음 Google 글꼴 페이지로 이동하면 (Google 검색에 입력) 다음과 같이 표시됩니다.

워드 프레스 구글 글꼴 홈페이지에 사용자 정의 글꼴을 추가하는 방법

사용자 인터페이스는 목적에 맞는 글꼴을 찾는 데 도움을주기 위해 만들어졌습니다. 이미 글꼴을 염두에두고 있다면 오른쪽의 검색 필드에 해당 이름을 입력하면됩니다..

그렇지 않은 경우, 예를 들어 범주별로 여러 가지 방법으로 글꼴을 필터링 할 수 있습니다.

  • 가는 장식 선 – Times New Roman과 같이 끝에 구불 구불 한 줄이있는 의미있는 글꼴.
  • 산세 리프 – Helvetica와 같은 구불 구불 한 글꼴이없는 간단한 글꼴. 이 웹 사이트에서 사용 된 글꼴은 그 예입니다.
  • 디스플레이 – 헤드 라인과 같이 더 큰 크기로 사용할 수있는 서체.
  • 필적 – 타이포그래피를 손으로 직접 작성한 것처럼 보이시겠습니까? 그런 다음이 설정입니다.
  • 모노 스페이스 – 모든 문자가 같은 공간을 차지하는 타이포그래피, 이처럼.

다른 필터는 다음과 같습니다.

  • 정렬 – 트 렌딩, 인기, 날짜 추가 또는 알파벳순으로 글꼴 정렬.
  • 언어 -아랍어, 태국어 또는 베트남어와 같은 라틴 알파벳으로 작성되지 않은 언어로 글꼴 선택 제한.
  • 다양한 스타일 -사용 가능한 스타일 수를 선택하십시오. 서체가 다양한 두께, 이탤릭체, 굵게 등으로 제공되는지 여부를 의미합니다..
  • 두께 – 원하는 글꼴 두께를 선택하십시오.
  • 경사 – 두께와 동일하지만 경 사진 경우. 직선에서 거의 수평까지.
  • – 글자 너비와 간격으로 글꼴을 필터링.

필터를 적용하면 검색 결과가 실시간으로 조정됩니다. 왼쪽에는 카테고리에서 사용 가능한 글꼴과 예제 문장이 있습니다..

글꼴 위로 마우스를 가져 가면 상단의 드롭 다운 메뉴를 사용하여 Google 글꼴에 예제 단락, 전체 알파벳 또는 숫자를 표시 할 수 있습니다. 문장 필드를 클릭하고 원하는 것을 쓰십시오..

Google 글꼴로 샘플 텍스트 편집

또한 글꼴 스타일과 크기를 변경하는 옵션이 있습니다. 변경하면 모든 검색 결과에 적용 할 수있는 옵션도 있습니다. 마지막으로 클릭하여 글꼴 세부 정보 페이지를 확인하십시오. 표본 참조.

Google 글꼴의 글꼴 세부 사항 페이지

3. 컬렉션에 글꼴 추가

특정 글꼴이 마음에 들면 오른쪽 상단 모서리에있는 빨간색 더하기 기호를 사용하여 컬렉션에 추가 할 수 있습니다. 이렇게하면 하단에 선택한 모든 글꼴이 표시되는 메뉴가 열립니다..

Google 글꼴에서 선택한 글꼴

하나 이상의 글꼴 모음을 추가 할 수 있습니다. 예를 들어 본문 사본과 제목 중 하나를 선택할 때 의미가 있습니다..

4. 글꼴 설정 사용자 정의

컬렉션에 만족하면 하단 메뉴를 클릭하십시오. 이렇게하면이 화면이 열립니다 :

Google 글꼴의 글꼴 설정

보시다시피 사이트에 글꼴을 포함하고 사용하는 코드 조각을 찾을 수 있습니다. 이것은 나중에 중요해질 것입니다. 지금은 탭을 클릭하십시오 커스터마이즈. 이렇게하면이 메뉴로 이동합니다 :

Google 글꼴에서 글꼴을 맞춤 설정

여기에서 해당 글꼴의 스타일을 선택할 수 있습니다. 다른 크기의 글꼴을 사용하려는 경우에 중요합니다..

그러나 사이트를로드해야하는 스타일이 많을수록 속도가 느려집니다 (Google Fonts는 오른쪽 상단에 현재 컬렉션의로드 속도를 표시합니다). 따라서 실제로 필요한 것을 생각하고 선택하십시오. 그건 그렇고, WordPress 속도를 높일 수있는 더 많은 방법이 있습니다.

표준 라틴 알파벳 이외의 다른 언어가 필요한 경우 하단에서도 해당 언어를 선택하십시오.

Google 글꼴에서 글꼴 언어를 선택하십시오

그 외에도 상단에있는 두 개의 화살표 아이콘 만 있으면됩니다..

Google 글꼴로 다운로드 및 공유 버튼

왼쪽에있는 글꼴 모음을 사용하여 글꼴 모음을 미리보고 공유 할 수 있습니다. 이렇게하면 확장 된 페이지가 열리고 샘플 텍스트를 삽입하고 모든 글꼴에서 한 번에 볼 수 있습니다. 이 페이지는 또한 사람들과 공유하기에 좋습니다.

그 옆에있는 다운로드 버튼이 더 중요합니다. 클릭하면 글꼴 파일을 다운로드하여 데스크탑 컴퓨터 (예 : Photoshop)에서 사용할 수 있습니다. 사용하다 스카이 폰트 그들을 최신 상태로 유지.

나중에 이러한 파일을 서버에 업로드하고 사이트에서 직접 글꼴을 호스팅하는 방법을 보여줍니다. 미래를 염두에 두십시오. 지금은 비슷한 글꼴 라이브러리를 보여 드리겠습니다..

사용자 정의 글꼴에 대한 추가 소스

  • 권장되는 15 가지 이상의 웹 안전 글꼴

위와 함께, 당신은 자신을 위해 무언가를 찾을 수 있어야합니다. 마지막 팁 – 글꼴을 올바르게 결합하는 방법을 모른다면 폰트 페어 디자이너가 당신을 위해 작업을 완료 한 곳.

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