WordPress에서 사용자 정의 글꼴을 업로드하는 방법

개인은 종종 WordPress에 사용자 정의 글꼴을 업로드하려고 하지만 절차가 막혀 있습니다.

사용자 정의 글꼴을 사용하면 블로그 또는 사이트가 눈에 띄고 새로워집니다. 플러그인과 테마의 발전으로 WordPress 기반 사이트에서 사용자 정의 글꼴을 사용하는 것이 일반적인 추세가 되었습니다.

과도한 대중 수요로 인해 테마 자체에 수백 개의 글꼴이 미리 로드된 여러 테마가 있습니다. 단일 웹사이트에서 여러 글꼴을 사용하면 사이트 속도가 느려질 수 있다는 점을 알아야 합니다.

이 기사에서는 Type Kit, Google Fonts 및 CSS3를 사용하여 WordPress에 사용자 정의 글꼴을 추가하는 방법을 다뤘습니다. 또한 사용자 정의 글꼴 사용으로 인해 속도가 느려지지 않도록 사이트를 사용하는 적절한 방법에 대해 간략히 설명합니다. 기본 사항부터 시작하여 WordPress 사이트에 대한 사용자 정의 글꼴을 찾는 방법을 이해하겠습니다.

WordPress용 사용자 정의 글꼴 찾기

폰트조차 비쌌던 시대가 있었다. 그러나 오늘날은 그렇지 않습니다. FontSquirrel, TypeKit, Google Fonts 및 fonts.com과 같은 여러 곳에서 훌륭한 무료 웹 글꼴을 다운로드할 수 있습니다. 글꼴을 일치시키고 혼합하는 것이 어렵다면 글꼴 쌍을 시도하는 것이 좋습니다. 디자이너는 최고의 Google 글꼴을 함께 사용하는 데 사용합니다.

사이트 속도를 유지하고 속도 저하를 방지하려면 웹 사이트 디자인 전체에 두 가지 사용자 정의 글꼴을 사용하십시오. 이렇게 하면 디자인에 일관성 요소도 추가됩니다.

Google 글꼴을 사용하여 WordPress에서 사용자 정의 글꼴 업로드

개발자가 사용하는 가장 일반적이며 가장 큰 무료 글꼴 라이브러리는 Google 글꼴입니다. 다음은 WordPress 플랫폼에서 Google 글꼴을 업로드하는 여러 방법입니다.

Google 글꼴 플러그인 사용

Google 글꼴을 사용하고 WordPress에 사용자 정의 글꼴을 업로드하려는 초보자에게 가장 쉽고 가장 권장되는 방법은 이 플러그인을 사용하는 것입니다.

Easy Google Fonts 플러그인을 다운로드한 다음 설치하고 활성화합니다. 활성화되면 추가 프로세스를 수행하기 위해 모양 섹션에서 사용자 지정 페이지로 이동합니다. 여기에서 라이브 테마 사용자 정의 섹션이 열리며 여기서 새 섹션(예: 타이포그래피)을 볼 수 있습니다.

쉬운 Google 글꼴

이 섹션을 통해 Google Fonts를 적용할 수 있는 다양한 섹션에 대해 알 수 있습니다. 글꼴 편집 옵션을 클릭하면 웹사이트에서 사용자 정의 글꼴을 사용할 수 있습니다. 스타일, 크기, 여백, 패딩 등과 같은 다른 글꼴 사용자 정의도 가능합니다.

사용 중인 테마에 따라 글꼴 선택 수 및 글꼴 적용이 특정 영역으로 제한될 수 있습니다. 이 문제를 해결하기 위해 사용자 지정 컨트롤을 만들고 웹사이트에서 사용할 수 있습니다. 이렇게 하려면 설정에서 Google 글꼴 페이지를 방문하여 글꼴 컨트롤의 이름을 제공하십시오.

글꼴 제어 생성 버튼을 클릭하면 CSS 선택기를 입력해야 합니다. CSS 클래스나 HTML 요소를 사용할 수도 있습니다. 설정을 저장하려면 글꼴 컨트롤 저장을 클릭하십시오.

웹사이트의 여러 섹션에 대해 필요한 만큼 글꼴 컨트롤러를 만들 수 있습니다. 이전에 만든 사용자 정의 글꼴 컨트롤을 확인하려면 타이포그래피 옵션으로 이동하고 테마 타이포그래피를 선택합니다. 언제든지 컨트롤러를 편집할 수 있습니다.

수동으로 Google 글꼴 추가

WordPress에 사용자 정의 글꼴을 업로드하려면 테마 파일에 코드를 추가해야 합니다. Google 글꼴 라이브러리에서 사용하려는 글꼴을 선택하고 동일한 아래의 빠른 사용 버튼을 사용하십시오. 글꼴 스타일 선택을 위해 다른 페이지로 리디렉션됩니다.

사용에 자신이 있는 글꼴 스타일만 선택하십시오. 아래로 스크롤하면 포함된 코드 섹션에 도달합니다. 표준 탭 아래에 포함된 코드를 복사하여 테마의 header.php 파일에 붙여넣습니다.

이것은 WordPress 사이트에 Google 글꼴을 수동으로 추가하는 간단한 절차입니다. 이 글꼴은 테마 스타일 시트에서도 사용할 수 있습니다.

Typekit을 사용하여 WordPress에서 사용자 정의 글꼴 업로드

디자인 프로젝트에 사용할 글꼴을 위한 프리미엄 무료 리소스는 Typekit입니다. 제한된 무료 구독 플랜과 사용자가 선택할 수 있는 프리미엄 플랜이 함께 제공됩니다. Typekit 계정에 가입한 후 새 키트를 생성해야 합니다.

다음 단계에서는 Typekit 라이브러리에서 글꼴을 선택한 다음 키트에 추가합니다. 키트의 내장 코드를 복사한 후 WordPress 사이트의 관리 영역으로 이동합니다.

여기에서 WordPress 플러그인용 Typekit 글꼴을 다운로드한 다음 설치하고 활성화해야 합니다. 활성화되면 설정에서 Typekit 글꼴을 방문하고 플러그인의 설정 페이지에 포함 코드를 붙여넣습니다. 그게 다야 이제 가도 좋습니다.

WordPress 스타일 시트에서 Typekit 글꼴을 사용하려면 아래 코드를 따르세요.

h1 .사이트 제목 { 
font-family: 'modesto-condensed', Arial, sans-serif; 
}

CSS3 @font-face를 사용하여 WordPress에서 사용자 정의 글꼴 업로드

이것은 사용자 정의 글꼴을 추가하는 직접적인 방법입니다. 이 방법을 통해 원하는 글꼴을 웹사이트에서 사용할 수 있습니다.

첫 번째 단계에서 원하는 글꼴을 웹 형식으로 다운로드합니다. 글꼴의 웹 형식을 찾지 못하면 FontSquirrel Webfont 생성기와 같은 변환기를 사용할 수 있습니다. 웹 호스팅 서버에 글꼴의 웹 형식이 있는 즉시 업로드합니다.

테마 또는 하위 테마에서 '글꼴' 폴더에 '새' 폴더를 만든 다음 사용자 정의 글꼴을 업로드합니다. 글꼴을 업로드하려면 cPanel의 파일 관리자 또는 FTP를 사용하십시오. 다음과 같이 테마 스타일 시트에 글꼴을 로드합니다.

@글꼴 얼굴 {
    글꼴 패밀리: 글꼴 이름;  
    src: url(http://www.sktthemes.org/skt-content/themes/your-theme/fonts/fontname-Regular.ttf);  
    글꼴 두께: 보통;  
}

위 코드에서 글꼴 패밀리와 URL을 수정하고 교체합니다. 스타일 시트에서 사용하려면 아래 방법을 따르십시오.

.h1 사이트 제목 { 
글꼴 패밀리: "font_name",Cambria,sans-serif; 
}

이 방법을 통해 직접 글꼴을 로드하는 것은 최상의 솔루션이 아닙니다. 서버 또는 최적의 성능 Typekit 또는 Google Fonts에서 직접 글꼴을 제공하는 것이 가장 좋습니다.

결론

참조 및 사용을 위해 WordPress에서 사용자 정의 글꼴을 업로드하는 모든 가능한 최상의 방법을 다루었습니다. 도움이 되기를 바랍니다.

관련 기사

WordPress의 멋진 글꼴

Google 글꼴은 직접 사용하거나 플러그인을 사용하여