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

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

표준 글꼴을 사용하여 블로그를 지루하게 만드는 이유는 무엇입니까? 블로그에서 생생한 성격과 다양한 사용자 정의 글꼴로 다루는 주제에 대해 이야기하십시오. 맞춤 글꼴은 블로그를 다른 사람보다 선호하는 멋진 기능입니다..


현실을 직시하자; 우리는 모두 올바른 글꼴로 블로그와 사이트를 좋아합니다. 사이트를 장식 할뿐만 아니라 사용자를 귀하의 콘텐츠로 끌어들이는 데 도움이됩니다. 그러나 표준 WordPress 글꼴의 선택은 제한되어 있으며 사용중인 테마에 따라 다릅니다. 좋은 소식은 수동으로 또는 특수한 플러그인으로 추가 할 수 있다는 것입니다.

그리고 여기에 두 가지 질문이 있습니다. 사용자 정의 글꼴을 얻을 수있는 곳 워드 프레스 및 사용자 정의 글꼴을 설치하는 방법 워드 프레스 사이트.

알아 보자.

 왜 사용자 정의 글꼴을 사용해야합니까?

Times New Roman과 Georgia가 웹 사이트의 텍스트를위한 유일한 글꼴로 여겨지 던 시절은 지났습니다. 지난 몇 년 동안 Google Fonts 등의 글꼴이 등장하면서 글꼴 공간이 완전히 바뀌 었습니다..

오늘날 인터넷에서 사용할 수있는 수백 가지의 무료 글꼴, 정보 및 교육 지원 및 디자인 용 리소스가 있습니다. Adobe Illustrator, Photoshop 및 기타 클래식 응용 프로그램과 달리 WordPress에서는 기본적으로 글꼴을 완전히 제어 할 수 없습니다. 일부 테마 만 사용자 정의 글꼴을 지원하고 사용하도록 선택.

따라서이 글에서는 적합한 사용자 정의 글꼴을 찾는 방법과 WordPress 사이트에서 사용하는 방법을 배웁니다..

사용자 정의 글꼴 사용의 중요성

왜 글꼴을 변경하고 단어 사이에 들여 쓰기, 줄 간격, 문자 간격 또는 글꼴 채도를 묻는가? 그렇듯이 일부 연구는 타이포그래피로 독해력 향상.

글꼴의 구성에 따라 다릅니다. 의식과 잠재 의식 수준에서 – 누구나 웹 페이지의 내용을 디자인별로 평가합니다..

글꼴 디자인은주의를 기울이지 않아도 독자에게 영향을줍니다.. 글꼴 디자인을 포기한다는 것은 개발 자체를 포기하는 것을 의미합니다! 독자의 기분은 그것에 달려 있습니다. 글꼴은 읽기 쉬워 지거나 사용자가 페이지를 떠나도록합니다.

모든 웹 브라우저에는 기본 글꼴 세트가 포함되어 있습니다. 즉, 글꼴이 페이지의 CSS에 지정되어 있지 않으면 표준 버전이 사용됩니다. 항상 기본 글꼴을 사용할 수 있지만 사용자의 작업이 복잡합니다. 따라서 맞춤 글꼴을 사용해야합니다. 테마에 글꼴 변경 옵션이없는 경우 많은 웹 사이트 및 도구가 도움이 될 수 있습니다.

Google 글꼴 대안

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

많은 사람들이 무료 Google 글꼴에 대해 알고 있습니다. 아름다운 글꼴을 찾을 수있는 사이트가 더 많습니다. 그들 중 일부는 개인적인 용도로 무료입니다. 상업용으로 필요한 경우 라이센스가 필요합니다. Google 글꼴 및 Adobe Edge 글꼴은 무료입니다. 그래서 그들은 그렇게 독특하지 않습니다. 그리고 이것은 우리에게 적합하지 않습니다.

여기 몇 가지가 있습니다 글꼴 찾기를위한 기타 리소스 무료 및 상업용 :

  1. 템플릿 몬스터 — TemplateMonster 마켓 플레이스 웹 사이트에서 필요한 웹 디자인에 대한 모든 것을 찾을 수 있습니다. 적은 가격으로 개인적으로 사용할 수있는 많은 글꼴과 글꼴 팩도 있습니다. 또한 하나의 웹 개발 키트에 제공됩니다. 컬렉션은 거대하고 독창적입니다. 브로셔 나 프레임에 표시되는 모든 글꼴을 선택하는 데 도움이됩니다. 모든 글꼴에는 상업용 라이센스도 제공됩니다.
  2. 마이 폰트 — MyFonts는 현재 전 세계에서 가장 다양한 글꼴을 제공합니다. 그러나 여기서 가격은 더 높은 세그먼트에 있습니다. 따라서 예산이 빡빡하면 그렇지 않을 수도 있습니다..
  3. FontSpring — Fontspring은 상업적 용도로 사용되는 멋진 글꼴을 판매합니다. 그러나 거의 모든 가족에서 개인적인 목적으로 사용할 수있는 1-2 개의 무료 글꼴. 또한 무료 글꼴이있는 별도의 섹션이 있습니다. 컬렉션은 vibran입니다. 그러나 다운로드하기 전에 특정 글꼴의 라이센스 정보를주의 깊게 연구해야합니다..
  4. Cufonfonts — 또한 다양한 글꼴 모음입니다. 아무거나 선택하면 자세한 정보가 담긴 페이지가 나타납니다. 무료 글꼴이 많이 있으며 개별 섹션으로 나뉩니다. CufonFonts의 정렬 시스템은 매우 유연하고 편리합니다. 또한 웹 폰트 지원이 포함됩니다.
  5. 다 폰트 — 3,500 개의 무료 글꼴 모음. 대부분 개인 용도로만 설계되었습니다. 좋은 기능 DaFont는 카테고리 시스템입니다. 만화, 비디오 게임, 빈티지 또는 일본어 문자 양식의 글꼴을 선택할 수 있습니다.

글꼴의 선택은 모두 아름답 기 때문에 매우 유혹적입니다. 그러나 많이 선택해서는 안됩니다. 사용하다 사이트에서 2 개 이하의 글꼴. 그러면 웹 사이트의 모양이 일관됩니다. 글꼴을 선택한 후에는 사용할 각 스타일 (일반, 굵게, 기울임 꼴 등)의 파일을 다운로드해야합니다..

사이트에 적합한 글꼴을 선택 했으므로 추가하는 방법을 알아 보겠습니다..

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

WordPress 사이트에 글꼴을 추가하는 몇 가지 방법이 있습니다.

  1. 플러그인:이 경우 프로세스를 용이하게하기 위해 다른 WordPress 플러그인이 사용됩니다..
  2. 수동으로:이 방법을 사용하려면 사이트에 다운로드 한 글꼴을 업로드하고 CSS 파일을 편집해야합니다.
  3. 테마: 많은 인기있는 테마에는 글꼴을 사용자 정의하기위한 내장 옵션이 포함되어 있습니다 (참고 – 사용중인 테마에 따라 프로세스가 다르기 때문에이 옵션은 다루지 않지만 Total WordPress 테마와 같은 품질 프리미엄 테마는 온라인으로 제공됩니다) 쉽게 따라갈 수있는 문서 –이 가이드와 같이 사용자 정의 글꼴을 Total에 추가)

옵션 1 – 플러그인으로 WordPress 글꼴 변경

전역 변경에 신경 쓰지 않으면 사이트의 글꼴을 변경하는 WordPress 플러그인을 설치할 수 있습니다.

커스텀 폰트 플러그인의 특징

오픈 소스 소프트웨어는 커뮤니티의 이익을 위해 이점이 있으며 WordPress도이 장점을 가지고 있습니다. 여러 WordPress 플러그인을 사용하면 사용자 정의 글꼴을 추가 할 수 있습니다. 너무 많은 적합한 플러그인을 선택하는 방법은 무엇입니까? 사용자 정의 글꼴 플러그인의 기능은 무엇입니까?

고려해야 할 몇 가지 사항은 다음과 같습니다.

  • 사용자 정의 글꼴을 사용하는 기능
  • 하나 이상의 글꼴을 사용하는 기능
  • 대상 헤더 및 구성 요소
  • 보너스 : 비주얼 편집기에서 글꼴 설정을 변경하는 기능

그게 다야. 목록의 첫 번째 기능은 매우 중요합니다. DaFont, Font Squirrel 등과 같은 사이트에서 글꼴을 항상 다운로드 할 수 있지만 WordPress에 업로드 할 수 있어야합니다..

맞춤 글꼴을 업로드 할 수있는 몇 가지 WordPress 플러그인을 살펴 보겠습니다..

맞춤 글꼴 업 로더

맞춤 글꼴 업 로더

이 플러그인을 사용하면 Google 글꼴을 다운로드하여 블로그의 다양한 요소에 적용 할 수 있습니다. 예를 들어 기사 또는 페이지의 제목 또는 본문.

모든 글꼴 사용

모든 글꼴 사용

이것은 글꼴을 다운로드하고 시각적 편집기를 통해 직접 사용할 수있는 편리한 인터페이스를 제공하는 WordPress 플러그인입니다. WordPress 비주얼 편집기는 텍스트의 글꼴을 자동으로 변경할 수 있습니다. 이 플러그인은 몇 가지 기능을 제공하므로 사용자 정의 글꼴을 훨씬 더 쉽게 관리 할 수 ​​있습니다..

WP Google 글꼴

WP Google 글꼴

WP Google Fonts를 사용하면 Google 글꼴 카탈로그를 사용할 수 있습니다. 이 플러그인의 놀라운 장점 중 하나는 약 1000 개의 Google 글꼴이 추가 된 것입니다. Google 글꼴을 수동으로 대기열에 넣을 수 있지만 대부분의 사용자에게 플러그인을 사용하는 것이 훨씬 쉽습니다.

플러그인으로 글꼴을 설치하는 방법?

WP Google Fonts를 예로 들어 보겠습니다. 공식 WordPress 저장소에서이 플러그인을 설치하고 Google Fonts 섹션을여십시오..

WP Google 글꼴

여기에 Google 글꼴 제어판이 표시됩니다. 글꼴을 선택하고 글꼴 스타일, 적용되는 요소 등과 같은 다양한 설정을 변경하십시오..

옵션 2 – WordPress 사용자 정의 글꼴을 수동으로 설치

@ font-face 지시문을 통해 하나 이상의 글꼴을 사이트에 연결할 수 있습니다. 그러나이 방법에는 장단점이 있습니다.

찬성:

  • CSS를 통해 ttf, otf, woff, svg와 같은 형식의 글꼴을 연결할 수 있습니다.
  • 글꼴 파일은 서버에 위치하며 타사 서비스에 의존하지 않습니다.

단점:

  • 각 스타일에 맞는 글꼴을 연결하려면 별도의 코드를 등록해야합니다.
  • CSS를 몰라도 쉽게 혼란 스러울 수 있습니다.

그러나 가능하다면 실제 문제는 아닙니다. 완성 된 코드를 복사하기 만하면됩니다 값을 지정해야하는 곳.

노트: 시작하기 전에 사이트에 대한 하위 테마를 작성하십시오. 이렇게하면 하위 테마를 모두 편집하여 핵심 테마를 그대로 유지하여 나중에 필요할 때 쉽게 업데이트 할 수 있습니다..

1 단계 : “fonts”폴더 만들기

자녀 테마 내에서 아래에 새 “fonts”폴더를 만드십시오. wp-content / themes / your-child-theme / fonts

2 단계. 다운로드 한 글꼴 파일을 웹 사이트에 업로드

호스팅의 제어판 또는 FTP를 통해 수행 할 수 있습니다..

새로 추가 된 글꼴 폴더에 모든 글꼴 파일을 추가하십시오. wp-content / themes / your-child-theme / fonts 당신이 만든.

3 단계. 하위 테마 스타일 시트를 통해 글꼴 가져 오기

하위 테마의 style.css 파일을 열고 CSS 파일의 시작 부분에 하위 테마 주석 처리 후 다음 코드를 추가하십시오.

@ font-face {
글꼴 모음 : 'MyWebFont';
src : url ( 'fonts / WebFont.eot');
src : url ( 'fonts / WebFont.eot? #iefix') 형식 ( 'embedded-opentype'),
url ( 'fonts / WebFont.woff') 형식 ( 'woff'),
url ( 'fonts / WebFont.ttf') 형식 ( 'truetype'),
url ( 'fonts / WebFont.svg # svgwebfont') 형식 ( 'svg');
폰트 가중치 : normal;
글꼴 스타일 : 일반;
}

어디 MyWebFont는 글꼴의 이름이며 src 속성 (따옴표로 묶은 데이터)의 값은 해당 위치 (상대 링크)입니다. 각 스타일을 별도로 지정해야합니다.

먼저 일반 스타일을 연결하므로 font-weight 및 font-style 속성을 normal로 설정합니다.

4 단계. 추가시 이탤릭체, 다음을 작성하십시오.

@ font-face {
글꼴 모음 : 'MyWebFont';
src : url ( 'fonts / WebFont-Italic.eot');
src : url ( 'fonts / WebFont-Italic.eot? #iefix') 형식 ( 'embedded-opentype'),
url ( 'fonts / WebFont-Italic.woff') 형식 ( 'woff'),
url ( 'fonts / WebFont-Italic.ttf') 형식 ( 'truetype'),
url ( 'fonts / WebFont-Italic.svg # svgwebfont') format ( 'svg');
폰트 가중치 : normal;
폰트 스타일 : 이탤릭체;
}

모든 것이 동일하면 글꼴 스타일 속성 만 기울임 꼴로 첨부했습니다..

5 단계. 굵은 글꼴을 추가하려면 다음 코드를 추가하십시오.

@ font-face {
글꼴 모음 : 'MyWebFont';
src : url ( 'fonts / WebFont-Bold.eot');
src : url ( 'fonts / WebFont-Bold.eot? #iefix') 형식 ( 'embedded-opentype'),
url ( 'fonts / WebFont-Bold.woff') 형식 ( 'woff'),
url ( 'fonts / WebFont-Bold.ttf') 형식 ( 'truetype'),
url ( 'fonts / WebFont-Bold.svg # svgwebfont') format ( 'svg');
글꼴 무게 : 굵게;
글꼴 스타일 : 일반;
}

font-weight 속성을 굵게 설정 한 곳.

각 스타일에 맞는 글꼴 파일의 정확한 위치를 표시하십시오.

단계 6. 굵은 이탤릭체를 연결하려면 다음을 입력하십시오.

@ font-face {
글꼴 모음 : 'MyWebFont';
src : url ( 'fonts / WebFont-Italic-Bold.eot');
src : url ( 'fonts / WebFont-Italic-Bold.eot? #iefix') 형식 ( 'embedded-opentype'),
url ( 'fonts / WebFont-Italic-Bold.woff') 형식 ( 'woff'),
url ( 'fonts / WebFont-Italic-Bold.ttf') 형식 ( 'truetype'),
url ( 'fonts / WebFont-Italic-Bold.svg # svgwebfont') format ( 'svg');
글꼴 무게 : 굵게;
폰트 스타일 : 이탤릭체;
}

자, 그게 다입니다 이제 웹 사이트에 네 가지 글꼴 스타일을 연결했습니다.

그러나 Internet Explorer 8에서는이 글꼴 연결이 잘못 표시됩니다. 위로는 여전히 IE8을 사용하는 사람이 거의 없다는 것입니다..

WordPress 용 사용자 정의 글꼴 정리

사용자가 사이트를 방문 할 때 가장 먼저 눈에 띄는 것은 무엇입니까? 맞습니다, 디자인! 대부분의 디자인은 아름다운 글꼴을 올바르게 사용합니다. 따라서 사이트의 글꼴 디자인을 관리해야합니다. 코드를 추가하거나 위에서 언급 한 플러그인 중 하나를 사용하여 새 글꼴 스타일을 포함하십시오. 당신이 선택하는 방법은 당신에게 달려 있습니다.

같은 사이트에서 두 개 이상의 글꼴을 사용하지 않아야합니다. 사이트에 사용자 지정 글꼴을 더 많이 추가할수록 사이트 속도가 느려집니다..

그게 다야, 자유롭게 의견을 보내. 

또한 웹 사이트에 사용자 정의 글꼴을 추가하기 위해 어떤 옵션을 선택하고 글꼴을 찾는 지 알려드립니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me