WordPress 웹 사이트에서 가변 글꼴을 사용하는 방법

게시 됨: 2018-07-30

정직하자. 웹사이트에서 무게, 높이 또는 간격의 변화 없이 단일 글꼴을 사용하면 사람들이 지루해 할 것입니다. 그들은 당신의 물건을 읽지 않을 것입니다. 그렇기 때문에 사이트에서 가변 글꼴 을 사용해야 합니다 . 하나의 글꼴만 사용하도록 선택하더라도 CSS를 통해 기능적으로 다양한 글꼴을 선택할 수 있도록 충분히 조정할 수 있습니다.

가변 글꼴이란 무엇입니까?

가변 글꼴은 5가지 다른 기준 또는 축에 따라 CSS에서 변경할 수 있는 단일 글꼴입니다. 각 축은 글꼴 모양의 특정 측면을 제어하며 해당 CSS 레이블이 있습니다.

  • 무게 (CSS에서 wght)
  • 경사 (CSS에서 slnt)
  • 기울임 (ITAL CSS에서)
  • 광학 크기(CSS의 opsz )
  • 너비(CSS의 중량 )

그리고 CSS에서 GRAD 로 표현되는 유사 축 Grade가 있습니다. 스타일시트에 사용할 때 Grade가 모두 대문자로 표시되는 이유를 말씀드리고 싶지만... 그렇게 할 수 없습니다. 그것이 무엇인지입니다. 또한 기술이 발전함에 따라 다른 회사에서 새로운 축을 도입할 수 있습니다. 그래서 앞으로 이것들을 가지고 할 수 있는 일이 많습니다.

서로 다른 모든 축을 결합할 때 단일 서체로 원하는 모든 작업을 수행할 수 있습니다. 심지어 SVG처럼 애니메이션을 적용할 수도 있습니다. (참고로 여기에는 우리와 같은 아이콘 글꼴도 포함됩니다.)

가변 글꼴을 사용하는 이유

짧은 대답은 사이트에 여러 글꼴을 포함하고 렌더링하는 것보다 훨씬 효율적이라는 것입니다. Google의 개발자 문서에는 다음과 같이 요약되어 있습니다.

OpenType 가변 글꼴을 사용하면 다양한 유형의 유형을 단일 글꼴 파일에 저장할 수 있습니다. Monotype은 12개의 입력 글꼴을 결합하여 Italic 및 Roman 스타일 모두에서 3개의 너비에 걸쳐 8개의 가중치를 생성하는 실험을 실행했습니다. 단일 가변 글꼴 파일에 48개의 개별 글꼴을 저장하면 파일 크기 가 88% 감소했습니다 . (자신의 것을 강조)

WordPress에서 가변 글꼴 사용

이제 가변 글꼴이 매우 훌륭하다는 것을 알았으므로 다음 단계는 이를 워크플로 및 WordPress 사이트에 통합하는 것입니다.

1 단계

가장 먼저 해야 할 일은 웹사이트에 글꼴을 설치하는 것입니다. 모든 글꼴 사용과 같은 플러그인을 사용하거나, ET 회원인 경우 Divi 인터페이스를 통해 직접 업로드하거나, @font-face를 사용하여 링크하거나, 플러그인 및 테마를 완전히 포기하고 구식 방식으로 할 수 있습니다.

WordPress에서 가변 글꼴을 사용하는 방법

어떻게 하는지에 관계없이 사이트에 글꼴이 있으면 글꼴을 사용하는 것은 실제로 매우 쉽습니다. 이를 위해 내가 사용하는 무료 글꼴 Gingham을 Divi를 통해 업로드했습니다. 최종 결과는 동일합니다.

2 단계

가변 글꼴은 CSS 기반이므로 사용자 정의 CSS를 추가한 곳으로 이동하고 싶을 것입니다. 그것은 custom.css 파일, stylesheet.css , WordPress 사용자 정의 도구의 추가 CSS 또는 Divi 테마 옵션의 일반 탭 하단에 있을 수 있습니다(대부분의 테마에도 유사한 상자가 있음). 이 코드를 입력합니다(사용 중인 가변 글꼴의 이름과 함께). 

@font-face {
  font-family: 'Gingham';
  src: url('Gingham.woff2') format('woff2'),
}

CSS 창에서 다음과 같이 보일 것입니다.

WordPress에서 가변 글꼴을 사용하는 방법

이 모든 작업을 통해 웹사이트에서 글꼴을 사용할 수 있습니다.

WordPress에서 가변 글꼴을 사용하는 방법

3단계

이제 어떻게든 스타일링할 때입니다. 이것으로 무엇이든 할 수 있고, 어떤 클래스나 ID에도 스타일을 적용할 수 있습니다. 보시다시피, 이것은 모든 .et_pb_text div에 적용됩니다. 전신 또는 h1, h2, h3 또는 p 에도 적용할 수 있습니다 . 당신의 선택. 그들은 결국 가변 글꼴입니다.

두 가지 방법으로 접근할 수 있습니다. 첫 번째는 font-variation-settings를 사용하는 효율적인 단일 CSS 라인입니다 . 

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  font-variation-settings: 'wght' 700, 'wdth' 75; 
}

float 또는 z축 또는 다른 것과 마찬가지로 다른 CSS와 함께 추가할 수도 있습니다.

또는 개별 라인에 축을 입력할 수 있습니다. 

h3 { 
  font-family: 'Gingham',Helvetica,sans-serif;
  font-size: 35px;
  wdth: 900;
  wght: 100;  
}

둘은 결국 같은 일을 한다.

WordPress에서 가변 글꼴을 사용하는 방법

이미지 제공: Google 개발자 가이드

가변 글꼴은 어디에서 찾을 수 있습니까?

가변 글꼴을 찾는 것은 Google 글꼴로 이동하는 것보다 약간 어렵습니다(특히 Google 글꼴이 가변적이지 않기 때문에). 기술이 새롭기 때문에 가변 글꼴은 그렇게 광범위하지 않습니다. 축 사이의 모든 상호 작용으로 인해 개별적으로 만들어야 하므로 제공하는 곳에서 일반적으로 구매할 수 있는 프리미엄 글꼴입니다.

    Adobe Typekit은 선택할 수 있는 다양한 가변 글꼴을 제공합니다. Creative Cloud 멤버십으로 일부 TypeKit에 액세스할 수 있습니다.
  • V-Fonts.com은 다양한 글꼴을 얻을 수 있는 다양한 위치의 디렉토리입니다. 그들은 당기는 것의 다른 소스에 연결합니다.
  • Monotype은 가변 글꼴을 판매하며 FF Meta 글꼴의 무료 데모도 있습니다.

무료 가변 글꼴

즉, 무료 개별 글꼴을 얻을 수 있습니다. 유쾌하고 감각적이며 항상 재능있는 Kenny Sing이 추천하는 것들입니다.

  • 깅엄은 위에서 사용한 것입니다. Kenny가 저를 넣어줬고, 아주 좋습니다.
  • League Mono는 단순하지만 다재다능한 가변 글꼴에도 좋은 선택입니다.
  • Renner의 페이지는 그것이 현대의 걸작이라고 말합니다. 내가 누구를 변론해야 합니까?

그것은 지금 당신을해야합니다. 가변 글꼴은 하나의 상자에 포장된 수십 개의 글꼴과 같기 때문에 위의 글꼴을 다운로드하면 내가 셀 수 있는 것보다 더 많은 옵션에 액세스할 수 있습니다.

명심하십시오

WordPress 사이트에서 가변 글꼴을 사용할 때 염두에 두어야 할 유일한 사항은 다음과 같습니다. 모든 브라우저 에서 글꼴을 지원하는 것은 아니지만 Firefox에는 몇 가지 문제가 있습니다. 따라서 가변 글꼴의 가변 부분을 웹 사이트의 귀중한 부분으로 만들 계획이라면 Firefox… 또는 Microsoft Edge 사용자를 위한 비상 계획이 필요할 것입니다. 그러나 여전히 IE 6을 실행하는 사람들 때문에 이미 그 중 하나가 있을 것입니다.

마무리

가변 글꼴은 사용자의 작업이 거의 없이 테이블에 많은 가치를 제공합니다. 굵게 또는 기울임꼴을 추가할 수 있는 것처럼 CSS 속성으로 스타일을 지정할 수 있다는 것은 멋진 일입니다. 그리고 더 많은 브라우저가 개발 중인 다양한 축을 인식하기 시작함에 따라 가변 글꼴은 두 팔을 모두 포용하지 않더라도 최소한 실험해보고 싶은 것이 될 것입니다.

가변 글꼴에 대한 귀하의 생각은 무엇입니까?

기사 특집 이미지 크레딧 Tyler Finck / tylerfinck.com