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

컴퓨터에 더 많은 글꼴을 추가하는 것은 매우 간단합니다. 글꼴 디렉토리에 파일을 다운로드하기만 하면 선택한 소프트웨어와 응용 프로그램에서 사용할 수 있습니다.

그러나 웹 사이트에서 사용자 정의 글꼴, 특히 방문자가 장치에 설치하지 않았을 수 있는 글꼴을 사용하려는 경우 조금 더 복잡해집니다.

고맙게도 WordPress 사용자로서 웹사이트 에 개별 글꼴 또는 전체 라이브러리를 추가하는 데 사용할 수 있는 몇 가지 훌륭한 무료 도구가 있습니다 . 테마에 사용할 수 있는 글꼴을 만든 후에는 웹사이트에서 사용 중인 다양한 스타일에 글꼴을 적용할 수 있습니다.

이 기사에서는 고품질 무료 및 프리미엄 글꼴을 찾을 수 있는 곳, WordPress 웹사이트에 추가하는 방법, 웹사이트의 각 서체에 적합한 설정을 선택하는 데 도움이 되는 몇 가지 도구를 보여줍니다.

웹사이트용 글꼴을 찾을 수 있는 위치

WordPress 웹 사이트에 사용자 정의 글꼴을 추가하는 방법을 설명하는 지침을 살펴보기 전에 사이트의 텍스트 모양을 수정하기 위해 새 서체를 찾을 수 있는 몇 곳을 살펴보겠습니다.

웹사이트 전체에서 자유롭게 사용할 수 있는 오픈 소스 글꼴을 찾을 수 있는 훌륭한 무료 온라인 리소스가 있습니다. 탐색할 수 있는 몇 가지 리소스는 다음과 같습니다.

• Google 글꼴: 웹에 최적화된 600개 이상의 오픈 소스 글꼴을 검색합니다. WordPress 웹사이트에서 이 글꼴을 사용하는 것은 매우 쉽습니다. 곧 다룰 것입니다.
• Font Squirrel: 무료 글꼴을 사용할 수 있는 또 다른 대규모 저장소입니다.
• Edge Web Fonts: Adobe Typekit에서 제공하는 무료 웹 글꼴 모음입니다.
• Typekit: 웹 및 인쇄용으로 Adobe에서 제공하는 4,000개 이상의 무료 및 프리미엄 글꼴의 전문 컬렉션입니다.

보시다시피 WordPress 웹 사이트의 모양을 사용자 정의하는 데 사용할 수 있는 무료 및 프리미엄 글꼴의 합법적인 온라인 소스가 많이 있습니다.

웹 디자이너를 위한 타이포그래피 도구

웹사이트에 적합한 글꼴 세트를 선택하는 것은 어려울 수 있습니다. 원하는 글꼴을 한두 개 선택한 다음 웹사이트에 추가하는 것보다 더 많은 과정이 있습니다.

글꼴의 모양뿐만 아니라 선택할 크기, 사이트의 콘텐츠 영역 너비 및 각 서체에 대한 최적의 줄 높이를 고려해야 합니다.

고맙게도 선택한 글꼴을 올바르게 적용하는 데 사용할 수 있는 몇 가지 무료 온라인 도구가 있습니다. 그러면 콘텐츠가 최상의 상태로 표시 됩니다.

웹사이트에서 글꼴을 사용자 정의할 때 반드시 빠르게 살펴봐야 하는 온라인 리소스 중 하나는 Golden Ratio Typography Calculator입니다. Thesis Framework 뒤에 있는 사람이 만든 이 타이포그래피 도구를 사용하면 글꼴 크기를 입력한 다음 콘텐츠 영역의 너비를 입력할 수 있습니다. 그러면 도구가 특정 웹사이트 구성에 대한 완벽한 인쇄 설정을 계산합니다.

Type Scale은 웹사이트의 다양한 텍스트 스타일이 서로 관련되어야 하는 크기를 쉽게 설정할 수 있게 해주는 또 다른 온라인 도구입니다. 사이트의 단락 텍스트 크기와 같은 기본 글꼴 크기를 입력한 후에 는 서로 다른 제목 각각에 어떤 크기 를 설정해야 하는지 알 수 있습니다.

위의 황금 비율을 포함하여 선택할 수 있는 다양한 척도가 있습니다. 설정에 만족 하면 CSS를 빠르게 복사 하여 자신의 웹사이트에서 사용할 수 있습니다.

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

온라인에서 글꼴을 찾을 수 있는 곳이 많은 것처럼 WordPress 웹사이트에 글꼴을 통합하는 방법도 많이 있습니다. 그러나 가능한 한 빨리 시작할 수 있도록 다음은 최고의 WordPress 글꼴 관련 플러그인입니다.

쉬운 Google 글꼴

Easy Google Fonts는 WordPress 웹사이트의 Google 리포지토리에 있는 600개 이상의 무료 글꼴 을 사용할 수 있는 기능을 제공하는 무료 플러그인입니다. 플러그인은 WordPress Customizer 도구와 함께 작동합니다. 이렇게 하면 사이트에서 사용할 글꼴을 최종 결정하기 전에 변경 사항을 미리 볼 수 있습니다.

웹사이트에 플러그인을 설치하고 활성화한 후 현재 WordPress 테마에서 사용하는 글꼴을 변경할 수 있습니다. 그렇게 하려면 WordPress Customizer 도구로 이동하여 Typography 섹션을 클릭합니다.

기본적으로 플러그인을 사용하면 테마에서 사용하는 기본 스타일의 타이포그래피 설정을 변경할 수 있습니다. 여기에는 단락과 개별 제목이 포함될 수 있습니다. 그러나 Easy Google 글꼴 설정 페이지를 통해 사용자 정의 글꼴 컨트롤을 만들 수 있습니다. 그런 다음 목록, 따옴표 등과 같은 요소에서 사용하는 글꼴을 쉽게 변경할 수 있는 사용자 지정 인터페이스에 추가됩니다.

사용자 정의 글꼴 컨트롤을 추가한 후 사용자 정의 프로그램의 테마 타이포그래피 설정에서 액세스할 수 있습니다.

플러그인의 이 기능을 사용하면 WordPress 테마의 요소나 스타일에서 사용하는 글꼴을 수정할 수 있습니다. 사용자 정의 프로그램에 추가된 컨트롤은 글꼴 두께, 텍스트 장식 및 변형 속성은 물론 글꼴 색상, 배경색, 크기, 줄 높이 및 문자 간격도 다룹니다.

사용자 정의 글꼴 컨트롤을 제공되는 세부 설정과 결합하여 Easy Google 글꼴 플러그인은 코드를 직접 편집할 필요 없이 WordPress 웹사이트의 텍스트 모양을 수정할 수 있는 모든 가능성의 세계를 엽니다.

모든 글꼴 사용

위의 Easy Google Fonts 플러그인을 적극 권장합니다. 그러나 한 가지 단점이 있습니다. Google Fonts 컬렉션의 서체만 사용할 수 있다는 것입니다. 686개의 글꼴 중 어느 것도 매력적이지 않거나 사용자 정의 서체를 사용 하려는 경우 동등하게 무료인 모든 글꼴 사용 플러그인이 좋은 대안입니다.

플러그인을 설치하고 활성화한 후 컴퓨터에서 직접 하나 이상의 글꼴을 웹사이트에 업로드할 수 있습니다. 그러나 시작하기 전에 플러그인을 글꼴 변환 도구에 연결하는 무료 API 키에 가입(또는 기부)해야 합니다.

하나 이상의 글꼴을 업로드했으면 웹사이트의 특정 요소에 할당할 수 있습니다. 여기에는 기본 요소 목록과 사용자가 정의한 모든 사용자 정의 요소가 포함됩니다.

플러그인은 또한 WordPress 게시물 편집기에 일부 글꼴 컨트롤을 추가합니다. 이렇게 하면 게시물과 페이지에 사용되는 글꼴을 전 세계적으로가 아니라 개별적으로 쉽게 변경할 수 있습니다.

글꼴을 할당한 후 웹 사이트의 프런트 엔드를 방문하여 타이포그래피의 변경 사항을 볼 수 있습니다. 이 플러그인의 컨트롤은 Easy Google Fonts 플러그인에서 제공하는 컨트롤과 비교되지 않지만 테마의 특정 요소에서 사용하는 글꼴을 선택한 사용자 정의 글꼴로 변경하려는 경우 모든 글꼴 사용은 일을 멋지게.

WordPress용 Typekit 글꼴

WordPress 웹 사이트에서 Adobe Typekit 서비스의 무료 및 프리미엄 글꼴을 사용하려는 경우 WordPress 플러그인용 무료 Typekit 글꼴이 적합합니다.

이 플러그인을 사용하면 사전 정의된 선택기를 사용하거나 사용자 정의 CSS 규칙을 추가할 수 있습니다 . 이렇게 하면 웹사이트에서 Typekit 글꼴로 개인화하려는 부분이 무엇이든 이 플러그인을 사용하여 자유롭게 할 수 있습니다.

손으로 WordPress에 사용자 정의 글꼴 추가

이유가 무엇이든 위의 무료 플러그인 중 하나를 사용하는 아이디어가 마음에 들지 않으면 WordPress 웹 사이트에서 사용되는 글꼴을 언제든지 손으로 변경할 수 있습니다. 사용하려는 글꼴을 Google 글꼴 저장소에서 찾을 수 있으면 웹사이트에 추가하는 것이 매우 쉽습니다.

Google 웹사이트에서 글꼴을 선택한 다음 관련 코드를 웹사이트의 헤드 섹션과 CSS 스타일시트에 복사하기만 하면 됩니다.

그러나 선택한 글꼴이 단순히 링크할 수 있는 Google Fonts와 같은 저장소에서 호스팅되지 않는 경우 글꼴을 직접 호스팅해야 합니다. 이것은 프로세스를 약간 변경하고 글꼴을 서버에 업로드하는 것과 같은 몇 가지 추가 단계를 추가합니다.

FTP 소프트웨어를 사용하거나 웹 호스트의 제어판에 있는 파일 관리자 도구를 사용하여 글꼴 파일을 업로드할 수 있습니다. 글꼴을 전용 fonts 디렉토리에 업로드 하는 것이 좋습니다. 정리를 유지하는 데 도움이 되도록 자식 테마 폴더에 있는 것이 좋습니다.

글꼴 파일이 서버에 있으면 편집을 위해 테마 CSS 스타일시트 파일을 엽니다. 이 작업은 WordPress 관리 대시보드의 모양 > 편집기 화면에서 수행할 수 있습니다.

위의 CSS를 스타일시트에 추가하여 글꼴을 로드하면 해당 CSS 파일의 아무 곳에서나 이를 사용하여 아래와 같이 텍스트 모양을 수정할 수 있습니다.

성능상의 이유로 가능한 경우 Google 글꼴과 같은 외부 글꼴 저장소에 연결을 시도해야 합니다. 그러나 온라인에서 사용하려는 글꼴을 찾을 수 없는 경우 파일을 직접 호스팅하여 페이지 속도를 약간 희생해야 할 수도 있습니다.

결론

이제 사용자 정의 글꼴을 찾을 수 있는 위치와 WordPress 사이트에 추가하는 방법을 알게 되었기를 바랍니다. Easy Google Fonts와 같은 무료 플러그인 중 하나를 사용하면 웹사이트에서 사용되는 글꼴뿐만 아니라 이러한 글꼴이 표시되는 방식 도 변경할 수 있습니다.

WordPress Customizer 도구 덕분에 이제 웹 사이트의 텍스트 모양을 쉽게 변경할 수 있습니다. 이 모든 것은 실시간 미리 보기가 포함된 일련의 시각적 메뉴를 통해 이루어집니다.

현재 테마가 사이트에서 사용되는 글꼴을 많이 제어할 수 없는 경우 위의 방법 중 하나를 사용하여 기본 CSS를 직접 편집하지 않고도 쉽게 변경할 수 있습니다.

가장 좋아하는 글꼴은 무엇입니까? 웹사이트에서 어떤 타이포그래피 설정을 변경하고 싶습니까? 글꼴, 타이포그래피 또는 WordPress에 대한 일반적인 질문이 있는 경우 아래 의견에 공유해 주세요.