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

웹 디자인의 핵심이 무엇인지 아십니까? WordPress 웹 사이트에 사용자 정의 글꼴 을 추가하는 것은 웹 사이트 방문자를 사이트에 유지하고 웹 사이트 가독성을 향상시키기 위해 취할 수 있는 궁극적인 단계입니다. 웹 사이트에 대해 선택한 글꼴은 브랜드 이미지를 나타냅니다. 인 및 아웃이 있는 사용자 정의 글꼴에 대해 자세히 알아보겠습니다.

온라인에서 무료 글꼴을 찾을 수 있지만 테마 호환성에 따라 사용이 제한됩니다. 그래서 수동 방법과 WordPress 플러그인을 사용하여 WordPress에 사용자 정의 글꼴을 추가하는 방법을 설명합니다.

사용자 정의 글꼴을 사용하는 이유와 찾을 수 있는 위치

위에서 언급했듯이 글꼴을 쉽게 다운로드할 수 있는 사이트를 많이 찾을 수 있습니다. 예를 들어, Font Squirrel 은 사용할 수 있는 최대 3개의 무료 글꼴과 함께 제공됩니다. Google 글꼴 은 900개 이상의 글꼴 중에서 선택할 수 있는 또 다른 놀라운 옵션입니다. 그 외에도 Edge Web Fonts 는 다양한 글꼴도 제공할 수 있습니다. 개인적인 사용을 위해 Fonts.com 또는 1001 Free Fonts 를 선택할 수 있습니다 .

DaFont 는 원하는 글꼴을 필터링할 수 있는 60,000개 이상의 서체가 있는 가장 오래된 글꼴 라이브러리입니다. 선택한 글꼴을 다운로드해야 하며 Google 글꼴 통합과 다릅니다. 비슷한 종류의 글꼴 라이브러리는 다양 하고 수익성 있는 글꼴이 있는 UrbanFont 입니다.

Adobe Fonts 또는 Typekit 은 1900개 이상의 글꼴을 사용할 수 있으므로 모든 웹 디자이너에게 매우 편리한 글꼴 라이브러리입니다. 무료 계정에 가입하더라도 200개 이상의 웹 글꼴을 제공합니다.

월 단위로 글꼴을 임대하고 구독료를 지불하고 싶다면 Fontstand 로 이동하십시오 . 약 2000개의 놀라운 글꼴을 제공하며 매월 요금을 청구합니다. Type Network 와 마찬가지로 한 번에 400개 이상의 글꼴 패밀리를 얻고 쉽게 탐색할 수 있는 또 다른 자체 호스팅 글꼴 라이브러리입니다.

웹 사이트에 가장 적합한 사용자 정의 글꼴을 선택하는 방법은 무엇입니까?

WordPress에 적합한 사용자 정의 글꼴을 찾는 리소스를 이미 알고 있으므로 지금 최고의 글꼴을 선택하는 방법을 알아야 합니다. 임의의 글꼴을 걸러내면 선택 과정이 길고 어색해집니다. 대신 WordPress 웹 사이트에 가장 적합한 사용자 정의 글꼴을 선택하는 동안 다음 단계를 시도할 수 있습니다. 이 블로그에서는 Google 글꼴을 탐색하여 모든 글꼴을 필터링하면서 최고의 글꼴을 선택하고 모범 사례를 볼 것입니다.

좋아하는 글꼴 목록 - Google 글꼴에서는 검색 상자에서 원하는 글꼴을 쉽게 검색하고 범주를 설정할 수 있습니다. 조정에 따라 검색 결과가 변경됩니다. 알파벳, 숫자 및 기타 형식의 글꼴을 볼 수 있습니다.

글꼴 세부 정보 확인 - 사용 가능한 모든 스타일과 글꼴 크기를 한 눈에 볼 수 있으므로 글꼴 세부 정보를 확인하는 것이 중요합니다. Google Fonts에서 찾을 수 있는 놀라운 특전은 해당 글꼴과 인기 있는 조합을 표시한다는 것입니다.

글꼴 세부 정보를 확인하는 동안 글꼴 형식도 확인하십시오. 모든 글꼴이 모든 브라우저 시스템을 지원하는 것은 아니기 때문입니다. 다음은 최신 브라우저 목록과 지원되는 글꼴 형식 목록입니다.

출처 – https://www.w3schools.com/Css/css3_fonts.asp

글꼴 컬렉션 강화 - 올바른 글꼴 필터링이 완료되면 ' 이 글꼴 선택' 버튼을 클릭하여 이러한 글꼴을 컬렉션에 추가할 수 있습니다.

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

웹 사이트에 사용자 정의 글꼴을 단계별 형식으로 추가하는 가장 쉬운 방법을 모았습니다. 어떻게 하는지 알아보자.

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

사용자 정의 글꼴을 수동으로 추가하는 것은 웹사이트가 느려지지 않도록 하는 가장 현명한 방법입니다. 원하는 글꼴을 찾기 위해 이미 일부 글꼴 크기를 살펴보았으므로 먼저 글꼴을 다운로드하십시오. 이제 글꼴을 웹사이트 호스팅 계정에 업로드해야 합니다. WordPress 웹 사이트에 사용 중인 테마를 확인하십시오. 글꼴의 CSS 파일을 계정에 업로드합니다. 글꼴을 다운로드하는 동안 .zip 파일에서 파일을 추출해야 합니다.

글꼴 파일을 업로드하려면 wp-content/themes/your-theme/fonts 디렉토리로 이동하십시오. 편의를 위해 별도의 글꼴 폴더를 만들 수 있습니다. 파일 관리자를 사용하여 hPanel에 파일을 업로드합니다. 이제 WordPress 계정으로 이동하여 모양 옵션을 클릭하십시오. style.css 파일이 표시될 테마 편집기를 선택합니다. 코드 맨 아래에 다음 코드를 추가합니다.

@글꼴 얼굴 {

font-family: Aguafina Script-Regular;

src: URL ( http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf );

글꼴 두께: 보통;

}

이제 '파일 업데이트' 버튼을 클릭하여 변경 사항을 저장합니다. 글꼴 코드는 방문자가 사이트를 방문할 때마다 글꼴을 로드합니다. 그러나 서체는 아직 어떤 요소에도 적용되지 않았습니다. 특정 요소에 글꼴을 할당하려면 매우 동일한 style.css 파일을 변경해야 합니다. 예를 들어 다음 코드는 우리 웹사이트의 헤드라인이 글꼴 스크립트를 사용하도록 합니다.

.사이트 제목 {

font-family: "Aguafina Script-Regular" , Arial, sans-serif;

}

WordPress 플러그인을 사용하여 사용자 정의 글꼴을 설정하는 방법

모든 WordPress 사용자의 경우 글꼴 플러그인을 사용하는 것이 사용자 정의 글꼴을 설정하는 가장 쉬운 방법입니다. 여기에서는 WordPress 웹 사이트에 사용자 정의 글꼴을 추가하는 가장 쉽고 유용한 글꼴 플러그인을 소개했습니다.

WP Google 글꼴

사용자 정의 글꼴을 사용하고 WP Google 글꼴 플러그인을 사용하여 특정 CSS 요소에 적용할 수 있습니다. WordPress 플러그인 디렉토리에서 WP Google 글꼴 플러그인을 설치하고 WordPress 대시보드를 사용하여 Google 글꼴 제어판에 액세스합니다. 서체를 선택하고 글꼴 스타일, 할당된 요소 등과 같은 옵션을 조정할 수 있습니다.

글꼴 플러그인

Font Plugin 은 비슷한 방식으로 작동하는 Easy Google Fonts의 프리미엄 대안으로, 테마를 변경하지 않고도 Google Fonts를 페이지에 원활하게 통합할 수 있습니다. 또한 사용자 정의 프로그램과 함께 작동하여 게시하기 전에 대체 글꼴 옵션을 시험해 볼 수 있습니다. 글꼴 플러그인에는 보너스인 Adobe Fonts 통합도 있습니다. 글꼴 플러그인을 사용하면 자료에서도 Adobe의 서체 라이브러리를 사용할 수 있습니다.

사용자 정의 글꼴을 사용하여 매력적인 웹 사이트 만들기

텍스트의 가독성과 우아함은 방문자가 사이트 서핑을 즐기는 정도에 영향을 미칩니다. 이제 누구나 웹사이트에서 사용할 수많은 서체 중에서 선택할 수 있습니다. 요즘 웹 사이트에서 오래된 글꼴을 사용할 이유가 없습니다. WordPress 타이포그래피를 사용자 정의하는 것은 이제 완전히 제어할 수 있습니다.

이 블로그가 흥미롭고 도움이 된다고 생각되면 블로그를 구독하여 이와 같은 블로그를 더 읽어보세요. 커뮤니티에 가입 하여 생각을 공유하십시오.