WordPress 사이트에 오프라인 글꼴을 추가하는 방법

WordPress 사이트에 개성을 추가하려는 경우 오프라인 글꼴 로드를 고려할 수 있습니다. 이를 수행하는 방법에는 여러 가지가 있지만 Font Squirrel Webfont Generator를 사용하는 가장 쉬운 방법 중 하나를 보여 드리겠습니다. 글꼴 파일을 다운로드하면 WordPress 사이트에 업로드하여 다른 글꼴처럼 사용할 수 있습니다. 시작하자!

이 글은 제 책상 위에 꽤 오랫동안 놓여 있었고, 여러분과 공유하고 싶었습니다. Google 글꼴은 로컬에서 완전히 로드됩니다. 지금까지 Crunchify.com에서 Google 글꼴 Oswald와 Lato를 사용하고 있습니다. 새 탭에 나타나는 위 이미지의 URL을 열면 14개의 새 글꼴 이 생성되었음을 알 수 있습니다. 이 튜토리얼은 다음과 같은 질문이 있는 경우에도 도움이 될 것입니다. Lato.zip 파일의 압축을 풀면 확장자가 .ttf인 Lato의 글꼴 10개를 모두 볼 수 있습니다. 대부분의 웹 사이트에서는 일반, 굵게, 기울임꼴 글꼴만 필요합니다.

2단계에서 이제 글꼴을 woff2, eot, svg, ttf 및 wof 형식으로 변환해야 합니다. 글꼴을 이러한 형식으로 변환할 파일을 사이트 https://Font-Converter.net/en 에 업로드할 수 있습니다. 더 말할 필요가 없습니다. 이제 로컬 파일 시스템에서 글꼴을 로드할 수 있습니다.

WordPress 테마에 사용자 정의 글꼴을 어떻게 추가합니까?

WordPress 테마에 사용자 정의 글꼴을 추가할 수 있는 몇 가지 다른 방법이 있습니다. 한 가지 방법은 Google 글꼴 라이브러리를 사용하는 것입니다. Google 글꼴 웹사이트에서 사용 가능한 모든 글꼴의 전체 목록을 찾을 수 있습니다. 마음에 드는 글꼴을 찾으면 테마의 스타일시트(style.css)에 코드를 추가할 수 있습니다. 예를 들어 "Open Sans" 글꼴을 사용하려면 스타일시트에 다음 코드를 추가합니다. body { font-family: 'Open Sans', sans-serif; } WordPress 테마에 사용자 정의 글꼴을 추가하는 또 다른 방법은 Easy Google Fonts 와 같은 플러그인을 사용하는 것입니다. 이 플러그인을 사용하면 코드를 편집하지 않고도 테마에 사용자 정의 글꼴을 쉽게 추가할 수 있습니다.

Easy Google Fonts 플러그인 을 사용하여 WordPress 사이트에 사용자 정의 글꼴을 추가할 수 있습니다. 이 방법을 사용하면 다양한 글꼴을 사용하여 웹 사이트에 관심을 끌 수 있습니다. 타이포그래피는 연구에서 많은 이점이 있는 것으로 나타났습니다. 단순한 웹사이트를 통해 고객이 귀하와 더 쉽게 소통할 수 있습니다. CSS 속성을 사용하면 스타일 및 위치 변경 외에도 원하는 글꼴의 스타일 및 위치를 변경할 수 있습니다. 자체 글꼴 컨트롤 외에도 WordPress 플러그인 설정 페이지를 사용하여 추가할 수 있습니다. 플러그인을 사용하지 않으려면 Adobe 글꼴 대신 이 플러그인을 사용할 수 있습니다.

사용자 정의 Adobe 글꼴 플러그인을 설치하면 이러한 글꼴을 WordPress 사이트에 간편하게 통합할 수 있습니다. 플러그인을 설치한 다음 Adobe의 방대한 글꼴 라이브러리로 이동하여 적합한 글꼴을 찾으십시오(사용하려면 등록해야 함). 글꼴을 선택한 후 글꼴을 클릭한 다음 페이지 오른쪽 상단에서 '웹 프로젝트에 추가'를 찾습니다. 글꼴 쌍을 사용하면 글꼴 조합이 어떻게 보이는지 확인할 수 있으며, 보이는 내용에 따라 글꼴을 믹스 앤 매치할 수 있습니다. 디자이너가 직접 만든 사용자 정의 글꼴을 판매하는 여러 우수한 웹사이트가 있습니다. Squirrel 글꼴에는 큰 글꼴 라이브러리가 포함되어 있으며 구현도 간단합니다. @Font-Face의 웹 글꼴 키트를 사용할 수 있습니다.

이제 WordPress 웹사이트를 사용할 준비가 되었습니다. 키트에는 글꼴 파일과 CSS 스타일시트를 만드는 데 필요한 코드가 포함된 스타일시트가 포함되어 있습니다. 예를 들어 OpenSans-ExtraBold- web 글꼴 에 대해 다음 CSS를 사용해야 합니다. 가장 좋은 해결책은 선택한 위치에 모든 글꼴 파일을 저장하는 것입니다.

WordPress에서 Google 글꼴을 로드하는 방법

WordPress 관리자 패널로 이동하여 새로 추가를 선택합니다. Google Play 스토어에서 Easy Google Fonts를 다운로드하여 설치합니다. 플러그인을 설치한 후 활성화 버튼을 클릭하여 사용을 시작해야 합니다.

웹사이트나 디지털 제품에서 Google 글꼴을 사용하여 1000개 이상의 다양한 글꼴 모음을 실험할 수 있습니다. WordPress 사이트에 Google 글꼴을 수동으로 추가하려는 경우 몇 가지 옵션이 있습니다. 그들은 무료이며 오픈 소스이므로 모든 개발자가 사용할 수 있습니다. Google 글꼴을 통합하는 가장 편리한 방법은 functions.php 파일에 특정 글꼴 패밀리에 대한 URL이 포함된 스니펫을 포함하는 것입니다. 수동 프로세스가 어렵다면 플러그인을 사용할 수 있습니다. 먼저 WordPress 플러그인 저장소를 방문하여 플러그인을 설치할 수 있습니다. 이제 설치하고 활성화해야 합니다.

대부분의 WordPress 테마에는 기본 설정의 일부로 Google 글꼴 통합이 포함되어 있습니다. OMGF 플랫폼을 구성하는 플러그인을 사용하면 웹사이트에서 600개 이상의 글꼴을 탐색할 수 있습니다. 'Font Family' 드롭다운 메뉴에서 사이트의 다양한 섹션에 대해 100가지 이상의 다양한 유형 중에서 선택할 수 있습니다. 사용자 정의 미리보기에 표시된 대로 사용자 정의 글꼴 컨트롤 을 추가하기 위한 몇 가지 옵션이 있습니다.

Google 글꼴을 WordPress에서 로컬로 로드해야 하나요?

WordPress 사이트에 Google 글꼴 오류가 있는 경우 Google 글꼴을 로컬로 로드하여 해결해야 합니다. 제어할 수 없는 외부 리소스 및 스크립트가 있어 압축, 축소 또는 최적화가 불가능합니다. 이 예방 조치를 취하지 않으면 WordPress 속도가 크게 저하됩니다.

Wp-content/themes/your-theme/fonts

wp-content/themes/your-theme/fonts 폴더에는 테마와 함께 사용하려는 사용자 정의 글꼴을 저장할 수 있습니다. 글꼴은 FTP를 통해 또는 파일 관리자 플러그인을 사용하여 이 폴더에 추가할 수 있습니다. 이 폴더에 글꼴이 추가되면 글꼴 이름을 참조하여 테마의 CSS에서 사용할 수 있습니다.

다음 테마 중 하나를 사용하는 경우 글로벌 스타일을 사용하여 웹사이트의 글꼴을 변경할 수 있습니다. 이 경우 기본 및 제목 글꼴은 동일한 글꼴 쌍에 있습니다. 새 글꼴 쌍을 저장하려면 전체 스타일 메뉴에서 게시 버튼을 클릭하거나 재설정을 클릭하여 변경 사항을 되돌립니다. 적절한 사용자 정의 글꼴을 선택한 후에는 원하는 만큼 자주 변경할 수 있습니다. 제목 또는 기본 글꼴의 크기를 변경하려면 아래 및 각 글꼴의 오른쪽에 있는 크기 옵션을 선택한 다음 드롭다운 메뉴에서 크기를 선택하면 됩니다. 사용자 정의 CSS를 사용하여 전역 기본 글꼴 크기를 변경할 수 있습니다. 플러그인을 테스트한 후 사용을 중지하려면 플러그인을 비활성화하거나 삭제해야 합니다. Typekit.com 계정을 WordPress.com 블로그 또는 웹사이트에 연결할 수 없습니다. 주어진 언어와 특정 글꼴의 호환성을 테스트하려면 사용자 지정 프로그램을 사용하십시오.

플러그인 없이 WordPress에 글꼴 추가

플러그인 없이 WordPress에 글꼴을 추가하는 몇 가지 방법이 있습니다. 한 가지 방법은 Google 글꼴 라이브러리를 사용하는 것입니다. Google Fonts 웹사이트로 이동하여 사용하려는 글꼴을 선택한 다음 제공된 코드를 복사하기만 하면 됩니다. 그런 다음 WordPress 대시보드를 열고 모양 > 사용자 정의로 이동합니다. 그런 다음 "추가 CSS" 탭을 클릭하고 Google 글꼴에서 복사한 코드를 붙여넣습니다. 변경 사항을 저장하면 새 글꼴이 웹 사이트에 적용됩니다.

테마는 기본 설정에 웹 글꼴을 포함할 필요가 없습니다. 웹 페이지를 탐색하는 동안 브라우저를 사용하여 다운로드할 수 있습니다. 글꼴 코드를 복사하여 테마 파일에 붙여넣으려면 원하는 글꼴을 선택하기만 하면 됩니다. 동시에 여러 글꼴을 사용할 수 있으며 글꼴이 로드되는 시간을 볼 수 있습니다. WordPress 블로그 대시보드로 이동하여 WordPress 블로그에 CSS를 더 추가합니다. 회색 상자 1의 전체 코드를 본문 텍스트의 웹 글꼴로 복사합니다. 새로운 웹 글꼴 패밀리는 Google 글꼴 라이브러리 의 두 번째 회색 상자에서 찾을 수 있습니다. 또한 다음 코드를 사용하여 글꼴 크기와 글꼴 두께를 조정할 수 있습니다.