플러그인 없이 WordPress에서 다운로드한 글꼴을 사용하는 방법

Google 글꼴은 놀라운 리소스입니다. 그것이 널리 보급되기 전에는 고유한 글꼴을 사용하는 웹사이트를 만드는 것이 정말 고통스러웠습니다. 그러나 이제 몇 번의 클릭과 한 번의 코드 스니펫으로 웹사이트가 Helvetic-eh 에서 Helvetic-awesome으로 이동 합니다. 하지만 좋아하는 글꼴이 Google 글꼴 제품군에 속하지 않는다면 어떻게 될까요? 당신은 수염의 영혼을 말하는 환상적인 힙스터 글꼴을 발견했기 때문에 다운로드한 글꼴을 사용하는 방법을 알아야 합니다.

웹사이트에서 다운로드한 글꼴을 사용하는 것은 clicky-clicky-paste-paste만큼 간단하지 않습니다. 그것은 어려운 과정이 아닙니다. 명심하세요. 저는 당신이 다시는 Helvetic-eh 웹사이트를 가지지 못하도록 당신을 안내할 것입니다.

이제 플러그인을 통해 이 작업을 수행할 수 있다는 점을 지적하고 싶습니다. 리포지토리에 소수가 있습니다. 하지만 왜 그렇게 하고 싶습니까? 저는 몇 줄의 코드가 같은 작업을 수행할 때 플러그인 사용을 피하는 것을 선호하는 사람입니다. 과도한 플러그인은 엄청난 양의 팽창, 불필요한 HTTP 요청을 유발하고 사이트 속도를 저하시킵니다.

그래서 우리는 이 글꼴을 다시 90년대 후반처럼 손으로 가져올 것입니다. 아, 그래.

글꼴 선택 및 다운로드

나는 글꼴 정리의 열렬한 팬입니다. 우아한 테마에는 원하는 것을 보기 위해 스캔할 수 있는 톤이 있습니다. 따라서 이들 중 일부를 누르고 당신이 좋아하는 것을 보십시오.

• 필기체 글꼴
• 레트로 글꼴
• 고급 글꼴
• 필기체 글꼴
• 소식통 글꼴
• 재미있는 글꼴

나를 위해 나는 Hipster 라운드 업에서 Aventura 글꼴로 갈 것입니다.

첫 번째 단계는 글꼴에 대한 다운로드 링크를 찾아 파일을 컴퓨터에 저장하는 것입니다. 다양한 파일 형식을 포함하는 .zip 파일일 가능성이 높습니다. 가장 일반적인 것은 .ttf (TrueType 글꼴) 또는 .otf (OpenType 글꼴)입니다.

웹 글꼴 만들기(선택 사항이지만 실제로는 아님)

FontSquirrel에는 귀하의 사이트의 화려함과 호환되지 않는 브라우저가 남아 있지 않은지 확인하는 데 사용할 수 있는 훌륭한 도구가 있습니다. 다운로드하는 대부분의 글꼴은 단일 형식으로만 사용할 수 있으므로 FontSquirrel 도구를 사용하면 글꼴 작성자가 배포한 글꼴에 제한을 받지 않습니다. 글꼴을 사용할 수 있는 권한이 있는 한 해당 글꼴이 제품/사이트에서 작동하는지 확인할 수 있습니다.

최근에 다운로드한 글꼴을 업로드하고 옵션을 선택하기만 하면 됩니다. 개인적으로 나는 가능한 모든 글꼴 형식을 얻기 위해 전문가 옵션을 사용합니다. 다른 것들은 작동하지만, 전체의 요점인 만큼 많은 파일 유형을 얻지는 못합니다.

FontSquirrel은 사이트로 가져오기 위해 필요한 CSS를 제공한다는 점에서도 훌륭합니다. 사용자 친화적 인 방법은 무엇입니까? 복사하여 붙여넣기만 하면 됩니다(아래에서 다룹니다).

WordPress에 글꼴 업로드

완료되면 글꼴을 호스팅 제공업체에 업로드해야 합니다. 저는 항상 FTP를 통해 이 작업을 수행합니다(저는 FileZilla를 사용하지만 원하는 클라이언트를 사용할 수 있습니다).

호스트의 FTP 정보를 모르는 경우 cPanel로 이동하여 Files -> FTP Accounts 아래를 확인하십시오.

거기에 호스트의 모든 FTP 계정이 표시되고 각 계정 옆에 Configure FTP Client(FTP 클라이언트 구성) 링크도 표시되어야 합니다.

거기에 들어가면 cPanel이 서버 정보 또는 자격 증명 설정을 가져오기 위해 가져올 수 있는 FileZilla(및 기타) 파일을 제공합니다. 나는 개인적으로 수동을 선택하지만 당신은 당신이 좋아하는 것을합니다. 파일을 사용하더라도 로그인할 때 비밀번호가 필요하므로 두 가지 방법 모두 안전합니다.

이제 FTP를 통해 호스트에 로그인 했으므로 사이트의 /wp-content 폴더로 이동합니다. 이것은 WordPress 사이트의 콘텐츠이기 때문에 왜 거기에 넣지 않습니까? /wp-content/uploads 를 포함 하여 어디든지 자유롭게 배치하세요. 넌 너대로 해.

FTP를 사용하면 파일을 매우 쉽게 업로드할 수 있습니다. 다운로드한 글꼴 파일을 찾아 FileZilla의 오른쪽 하단 창으로 드래그하기만 하면 됩니다. 그러면 업로드가 시작됩니다. 디렉토리에서 그것을 보는 데 1초도 채 걸리지 않을 것입니다.

위에서 논의한 FontSquirrel 도구를 사용했다면 이 도구에서 다운로드한 모든 글꼴 파일에도 이 작업을 수행합니다. 저장하고 싶은 곳에 끌어다 놓기만 하면 됩니다.

CSS와 함께 글꼴 사용

이제 글꼴이 업로드되어 따뜻하고 편안한 wp-content 담요에 안전하게 안착됩니다. 이제 테마에 필요한 CSS 가져오기를 추가할 차례입니다.

FTP 클라이언트에서 하위 테마의 디렉토리(하위 테마를 사용하고 있습니까?)로 이동하여 style.css 파일을 찾아 마우스 오른쪽 버튼으로 클릭하고 보기/편집을 선택하여 기본 텍스트 편집기에서 불러옵니다.

하위 테마가 없는 경우 Orbisius 하위 테마 생성기를 사용하여 매우 빠르게 만들 수 있습니다. 나중에 플러그인을 삭제할 수 있습니다. 나는 이것을 좋아한다.

@글꼴얼굴

우리가 사용하는 코드는 FontSquirrel에서 직접 가져온 것이며(자신의 코드를 작성하거나 아래 예제를 복사/붙여넣기할 수 있음) /wp-content 를 포함하도록 URL 업로드 경로만 변경했습니다. 다른 모든 것은 웹폰트 생성기가 제공한 것입니다.

이 @font-face 스크립트가 하는 모든 일은 웹사이트의 스타일시트에 "이봐, 친구, 당신이 언젠가 그것을 사용하고 싶다면 이 새 글꼴을 여기에 두겠습니다." 라고 말하는 것 뿐입니다. 컵케이크를 집에 가져와서 함께 사는 사람들에게 말할 때 하는 것처럼요.

@font-face 없이 font-family: 'aventurabold'; CSS에 의해, 당신의 사이트는 당신이 그것을 어디에 보관하고 있는지 알려주지 않았기 때문에 그것을 찾을 수 없을 것입니다.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

파일을 저장하고 FileZilla를 통해 편집하기 위해 파일을 열었으므로 서버에 있는 파일을 바꿀 것인지 묻는 대화 상자가 나타납니다. 당신의 대답은 분명히 그렇습니다.

이제 custom.css 로 이동하기만 하면 됩니다(또는 WP 대시보드의 탐색 창에서 Divi, Divi -> 테마 옵션 -> 사용자 지정 CSS 를 사용하는 경우).

다른 글꼴과 마찬가지로 CSS 스타일을 추가하기만 하면 됩니다. 기존에 사용하던 'Roboto' 및 'Exo' Google 글꼴을 'aventurabold' 로 교체하기만 하면 문제가 해결되었습니다(위의 @font-face 가져오기 덕분에).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

우리 수고의 열매

이전 모습은 다음과 같습니다.

CSS에 Aventura를 추가한 후 일어난 일은 다음과 같습니다.

만세! 효과가있다! 잘 했어요! 가자!

잘 생겼어, 친구

Malcolm Reynolds 대위가 "우리는 불가능한 일을 해냈고, 그것이 우리를 위대하게 만듭니다."라고 말한 것처럼 유명합니다. 글쎄요. 글꼴을 업로드하고 CSS를 통해 가져오는 것은 불가능한 일이라고 할 수는 없지만 많은 WordPress 사용자가 감히 생각하지 못하는 일을 해냈습니다. 바로 플러그인 없이 핵심 기능을 추가하는 것입니다.

그리고 친구 여러분, 그것이 여러분을 정말로 강력하게 만듭니다.

그렇다면 Google 글꼴이 아닌 웹에서 가장 좋아하는 글꼴은 무엇입니까? 댓글로 알려주세요!

32픽셀/Shutterstock.com의 기사 썸네일 이미지