글꼴에 대한 가장 기본적인 수준의 지원은 사용자가 사용하는 운영 체제에서 비롯됩니다. 이것은 안드로이드의 3 개의 글꼴에만 데스크탑 또는 노트북 시스템을위한 수십 개의 글꼴을 제공 할 수 있습니다.
불행히도, 이것은 상당히 냄비 운운 시스템으로 남아 있습니다. 우리는 모두 16px 이하로 설정할 때 Windows 기반 머신에서 Helvetica가 얼마나 제대로 보이지 않는지 알고 있으며, 일부 이전 버전의 OS X에서 Arial이 환상적이지 않을 수 있습니다. . 원래의 Apple Mac 운영 체제가 인치당 72 포인트의 오래된 인쇄기 기술과 연계되어 있기 때문에 이러한 불일치가 많이 발생했습니다. 따라서 10 점 글꼴이 디스플레이에 10 픽셀을 할당했습니다. 당시 Apple은 표준 미국 용지와 같은 크기의 수직 (초상화) 모니터를 제공했으며 화면에서 인쇄 된 버전으로 직접 일대일 비교를 할 수 있습니다. 반면에 Microsoft는 96 ppi 를 선택하여 사람들은 인쇄 된 페이지에서보다 컴퓨터 모니터에서 멀리 떨어진 거리의 1/3을 추가로 앉아있을 것입니다. 따라서 Windows 기반 컴퓨터에서 모든 것이 1/3 더 크게 렌더링되었습니다.
이 기술이 등장한 1990 년대 이후로 상황이 먼 길을 왔으며, 이제 우리는 수많은 스크린 크기와 결의안을 다루고 있습니다. 그러나 글꼴을 지정하지 않으면 사용자의 장치와 브라우저가 여전히 글꼴을 선택할 수 있습니다.
또 다른 문제는 일부 조직이 사용자 컴퓨터의 글꼴을 제한한다는 것입니다. 한때 컴퓨터가 조지아와 베르 다나 만 설치 한 조직에서 일했습니다. 이것은 직원이 보낸 편지와 이메일을 기업 신원과 일치하는 글꼴 만 사용하여 보낼 수 있도록했습니다.
내장 글꼴을 최대한 활용합니다
기업 글꼴의 사용을 견딜 수없는 대부분의 데스크탑 및 랩톱 컴퓨터 - 웹 프로젝트의 Microsoft 코어 글꼴 용 글꼴이 있습니다. 1996 년 의이 글꼴 팩에는 Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana 및 Webdings가 포함되었습니다. 이 글꼴의 버전 또는 그에 상응하는 버전은 대부분의 데스크탑 및 랩톱에있는 것으로 의존 할 수 있지만 브라우저는 예상대로 글꼴을 표시하는 데 의존하지 않을 수 있습니다.
글꼴 스택 를 사용하여 이러한 제한을 최소화 할 수 있습니다. 이로 인해 브라우저가 여러 글꼴 중 하나를 사용할 수있는 CSS 규칙이 설정됩니다. 여기에는 항상 세 리프 (스트로크 끝에 작은 장식이있는) 또는 SANS-SERIF (장식없이) 캐치를 모두 포함합니다. 따라서 우리는 캄브리아,‘호프러 텍스트’,‘해방 세리프’, 타임즈,‘뉴 로마’, 세리프를 가질 수 있습니다. 브라우저는 '스택'을 살펴보고 사용자의 컴퓨터에있는 목록에서 찾은 첫 번째 정의 된 글꼴을 사용하여 텍스트를 표시해야합니다. 그 중 하나를 찾을 수없는 경우,이 예에서는 Serif로 정의 된 폴백 글꼴을 사용합니다.
목표는 다양한 해상도와 줌 레벨에서 다양한 브라우저에서 잘 렌더링하는 글꼴 범위를 선택하는 것입니다.
캐나다 디자이너 Amrinder Sandhu의 글꼴 스택에 대한 훌륭한 토론이 있습니다.
불행히도, 폰 스택을 사용하는 것은 핸드 헬드 장치를 사용하는 경우 도움이되지 않습니다. Android 장치는 Droid Sans, Droid Serif 및 Droid Sans Mono를 사용하는 반면 Apple iOS 장치는 다양한 스타일과 가중치가있는 Helvetica Neue를 사용합니다. 당신은 아마도 여러 운영 체제 및 버전의 내장 글꼴에 의존하는 것보다 WordPress 페이지가 어떻게 보이는지 더 많이 제어하고 싶을 것입니다. 우리는 글꼴을 포함시켜 이것을 극복 할 수 있습니다
이제 사용 가능한 웹 글꼴 유형을 살펴 보겠습니다.
자유 글꼴
사용 가능한 대부분의 글꼴은 어떤 식 으로든 라이센스가 부여됩니다. 운영 체제가 설치된 컴퓨터, 태블릿 또는 휴대폰을 구입할 때 비용의 일부는 글꼴의 라이센스입니다. 그러나 광범위한 무료 내장 글꼴을 사용하는 방법에는 여러 가지가 있습니다.
임베디드 글꼴은 페이지가 활성화 된 시간 동안 타사 플랫폼에서 사용자의 컴퓨터로 다운로드 된 문자 세트입니다. 이를 통해 서빙 회사는 글꼴의 통제를 유지할 수 있지만 사용을 위해 지불해야 할 필요성이있는 글꼴을 표시 할 수 있습니다. 글꼴을 제공하는 많은 회사가 있습니다. 가장 잘 알려진 것은 다음과 같습니다.
Google Fonts, 아마도 가장 인기있는 무료 글꼴 서비스 인 플랫폼은 랍스터를 포함하여 700 개가 넘는 잘 설계된 글꼴을 제공합니다.
Adobe는 또한 Edge Web Fonts 플랫폼을 통해 글꼴을 제공합니다. 이것은 Typekit 서비스와 직접 인터페이스하지만 (아래 참조) 무료 열린 글꼴을 남기는 유료 글꼴을 필터링합니다.
고려해야 할 또 다른 플랫폼은 Open Font 라이브러리입니다. 600 개가 넘는 글꼴이 있습니다.
이 플랫폼의 모든 글꼴 및 기타 여러 글꼴은 Open Font 라이센스를 사용합니다. OFL (Open Font License)의 목표는 전 세계적으로 협업 글꼴 프로젝트의 개발을 자극하고, 학업 및 언어 커뮤니티의 글꼴 제작 노력을 지원하며, 파트너십에서 글꼴이 공유되고 개선 될 수있는 무료 및 개방형 프레임 워크를 제공하는 것입니다. 다른 사람들과 함께.
오픈 글꼴의 장점은 연간 라이센스 비용을 지불 할 필요없이 웹 사이트에서 자유롭게 사용할 수 있다는 것입니다. 단점은 선택한 글꼴이 전체 범위의 스타일과 가중치가 없다는 것입니다.
지불 글꼴
자유 글꼴의 유병률에도 불구하고 여전히 프리미엄 글꼴을 제공하는 많은 글꼴 파운드리가 있습니다. 예를 들어, Foundries Archive는 프리미엄 서체를 제공하는 300 개의 제작자 및 사이트에 가까운 사이트를 목록에 있지만 웹 페이지에 포함시킬 수는 없습니다.
웹 사용을위한 프리미엄 글꼴을 제공하는 조직의 독일 기반 글꼴 상점은 아마도 유료 글꼴에 가장 인기있는 시장 일 것입니다. 고품질 글꼴과 Ulrike Rausch의 주방 과일 및 채소 세트, 포크 및 나이프, 냄비 및 가전 제품, Liebecook과 같은 특이한 글리프 세트가 있습니다. Adobe Creative Cloud 계정이있는 경우 Adobe의 Typekit 서비스에 자동으로 액세스 할 수 있습니다. Typekit은 450 개 이상의 글꼴을 제공합니다. 라이센스를 사용하면 인쇄 간행물 및 개인 비상업적 웹 사이트에서 글꼴을 사용할 수 있지만 클라이언트를 위해 일하는 경우 Adobe 비즈니스 계정이있는 경우에만 웹 글꼴 만 사용할 수 있습니다. Adobe는 개발 중에 고객을위한 계정을 설정하고 고객에게 넘겨주는 것을 제안합니다. 이는 클라이언트가 계정을 지불하지 않으면 사이트가 정의 된 글꼴 스택의 폴백 글꼴로 되돌아 갈 것이라는 단점이 있습니다.
WordPress 페이지 및 게시물에서 원하는 글꼴을 얻으십시오
WordPress 웹 사이트에서 웹 글꼴을 사용할 수있는 많은 플러그인이 있으며 쉽게 Google 글꼴이 가장 인기있는 것 중 하나입니다. 이 기사의 플러그인에 초점을 맞추지 않고 테마를 변경하여 수동으로 수행하는 방법을 살펴 봅니다. 또한 시장의 일부 테마에는 다양한 웹 글꼴 옵션이 제공됩니다.
실제 코드는 서비스마다 다릅니다. Google Fonts 및 Adobe Edge/Typekit의 방법을 간략하게 설명하겠습니다. 다른 서비스도 비슷한 방식으로 작동합니다. 먼저, 사이트를 백업하거나 별도의 개발 사본에서 이상적인 작업을 수행하고 문제가 발생할 경우를 대비하여 파일의 사본을 사용해야합니다. 테마가 업데이트 될 때마다 변경 사항을 덮어 쓰지 않도록 하위 테마를 사용하여 스타일 변경을 수행해야합니다.
Google Fonts
WordPress 페이지에 외부 글꼴과 Google 글꼴이있는 게시물을 표시하는 세 가지 방법 (플러그인 제외)이 있습니다 : @Import, Link 및 JavaScript.
글꼴을 선택한 후에는 빠른 사용 버튼을 클릭하십시오. 제공된 경우 필요한 가중치와 스타일을 확인하고 문자 세트.
다음은 삽입 방법을 선택해야합니다. 가장 쉬운 방법은 수정하려는 테마의 @import 규칙을 Style.css 파일에 추가하는 것입니다. Style.css 규칙 내에서 코드를 배치하는 곳은 중요하지 않습니다. 그러나 @import는 다른 컨텐츠가 작업이 완료 될 때까지 다운로드하는 것을 차단합니다. 따라서 여러 글꼴 에이 방법을 사용할 계획이라면 요청을 하나의 @import 규칙에 결합해야합니다.
.
두 번째 방법은 똑같이 간단하며 링크 메소드를 사용하고 코드는 표준 탭에 포함되어 있습니다. 이번에는 코드가 Header.php 파일에 배치됩니다. 코드를 파일 상단에 놓습니다. 그런 다음 글꼴 스택에 글꼴 이름을 추가 할 수 있습니다. 첫 번째 글꼴로 추가하고 선호하는 시스템 글꼴 및 폴백 글꼴 스타일을 추가해야합니다.
여기서 Google 웹 글꼴 블로그는 @font-face 선언 전에 스크립트 태그가 있으면 글꼴 파일이 다운로드가 완료 될 때까지 인터넷 익스플로러가 페이지 컨텐츠를 표시하지 않습니다. 따라서 파일이 다운로드되지 않으면 Internet Explorer 사용자는 빈 페이지 또는 부분적으로로드 된 페이지가 남아있을 수 있습니다. 따라서 @font-face 선언을 최대한 빨리 파일에 넣습니다. .
추가 방법은 functions.php 파일의 글꼴을
enqeue 하는 것입니다. 아래에 표시된 기능은 필요한 글꼴 스타일과 가중치를로드합니다.
마지막으로 JavaScript를 사용하여 글꼴을로드 할 수 있습니다. JavaScript 사용에 대한 논쟁이 있지만 JavaScript가 꺼진 사용자 수는 매우 작습니다. 하위 테마의 Header.php에 코드가 추가되어 와 태그 사이에 배치됩니다. Google은 다시 첫 번째 요소가되어야한다고 제안합니다.이 방법으로 글꼴이로드되는 동안 페이지로드의 다른 부분은로드되며``스타일되지 않은 텍스트의 플래시 ''를 피해야합니다. .
Adobe Edge 웹 글꼴 및 typekit
Adobe Typekit 글꼴을 WordPress에 추가하는 것은 조금 간단합니다. Google 글꼴과 유사한 방법과 유사한 방법을 사용할 수 있지만 경험이 적은 개발자는 WordPress 플러그인에 TypeKit 글꼴을 사용할 수 있습니다. 설치되면 플러그인이 설정 메뉴에 나타납니다. 다시 말하지만, 이러한 수정을하기 전에 WordPress를 백업하는 것을 잊지 마십시오.
typekit을 사용하려면 Creative Cloud 앱을 통해 계정에 로그인하십시오. 글꼴을 선택한 후에는 키트를 만듭니다. 키트의 이름을 지정 한 다음 글꼴을 사용하는 사이트의 도메인 이름을 추가하십시오. 사이트 세부 정보를 입력하면 JavaScript가 제공됩니다. textedit 또는 notepad와 같은 일반 텍스트 편집기를 사용하여 텍스트 파일로 복사하여 저장하십시오.
다음 단계는 글꼴을 선택하고 사이트 키트에 추가 한 다음 게시하는 것입니다. 사용하려는 추가 글꼴을 추가하고 게시하십시오.
키트가 게시 된 후 WordPress 플러그인의 Typekit 글꼴로 이동하십시오.
텍스트 파일에 저장 한 코드를 추가합니다.
필요에 따라 CSS 코드 선택기를 추가하십시오. 이 예에서는 H1 텍스트로 표시하기 위해 포스트 타이틀을 추가했습니다 (WordPress 페이지 및 게시물 제목은 H1 텍스트입니다). 또한 본문 텍스트의 H2 소제목 인 부부 제목을 추가했습니다. 선택기를 명명하기 전에 이름이 테마에서 아직 사용되지 않았는지 확인하는 것이 좋습니다. 브라우저의 개발자 도구를 사용하여 요소를 검사하여이를 수행 할 수 있습니다. 각 변경에 따라 화면을 새로 고치는 것을 잊지 마십시오. 사이트에서 글꼴을 사용할 수있는 데 몇 분이 걸릴 수 있습니다. .
마지막으로, 글꼴을 사용할 때마다 글꼴 중량 및 글꼴 스타일 속성을 항상 지정하는 것이 좋습니다. 다시 말하지만, 이것은 수많은 플랫폼에 대한 글꼴 표시를 제어하는 데 도움이됩니다.
결론
사이트에 글꼴을 추가하는 것은 유혹적인 사이트를 생산하는 허용되는 방법입니다. 또한 일반적으로 사용되는 WordPress 테마가 다른 모든 것들과 차별화되도록하는 좋은 방법이 될 수 있습니다.
그러나 할 수 있기 때문에 수많은 글꼴을 추가하려는 유혹을받지 마십시오. 고등학교 시각적 커뮤니케이션에서 첫 번째 작업 중 하나는 시리얼 패킷의 글꼴 수를 세는 것이 었습니다 (25 개가 넘는 글꼴이있었습니다. 콘플레이크 패킷!). 글꼴로는 종종 더 많으며, 로딩 속도 관점뿐만 아니라 시각적 설계 관점에서도 자신을 2 ~ 3 개의 디자인으로 제한하는 것이 가장 모범 사례입니다.
Google은 팝 아웃에 글꼴 패리 링 기능을 제공합니다. 버튼은 빠른 사용 버튼 옆에있어 시작할 수 있도록 도와줍니다. 그래픽 디자인은 마스터하는 데 몇 년이 걸리지 만 몇 가지 좋은 글꼴을 포함시키는 공예품이지만, 선택한 디자인은 모든 사용자가 선택한 디자인을 보도록합니다. .
WordPress에서 웹 글꼴 사용에 대해 자주 묻는 질문
내 WordPress 사이트에 Google 글꼴을 추가 할 수있는 방법은 무엇입니까?
WordPress 사이트에 Google 글꼴을 추가하는 것은 간단한 프로세스입니다. 먼저 Google Fonts 웹 사이트를 방문하여 사용하려는 글꼴을 선택해야합니다. ‘이 글꼴 선택’버튼을 클릭하고 제공된 링크를 복사하십시오. 그런 다음 WordPress 대시 보드로 이동하여 모양> 테마 편집기로 이동하여 Header.php 파일을 찾으십시오. 복사 된 링크를 헤드 태그 내에 붙여 넣습니다. 마지막으로 글꼴 주식을 참조하여 CSS에서 글꼴을 사용할 수 있습니다. WordPress에서 사용자 정의 글꼴을 사용할 수 있습니까?
예, WordPress에서 사용자 정의 글꼴을 사용할 수 있습니다. 글꼴 파일 (일반적으로 .ttf 또는 .otf)을 WordPress 테마 디렉토리에 업로드 한 다음 CSS를 사용하여 웹 사이트에 글꼴을 적용하여이를 수행 할 수 있습니다. 사용하기 전에 글꼴의 라이센스를 확인해야합니다. WordPress에서 글꼴 크기를 변경하려면 CSS를 사용하여 WordPress의 글꼴 크기를 변경할 수 있습니다. WordPress 대시 보드의 외관> 사용자 정의> 추가 CSS로 이동하여 CSS 규칙을 추가하여 글꼴 크기를 변경하십시오. 예를 들어, 모든 단락의 글꼴 크기를 16px로 변경하려면 다음 CSS를 사용할 수 있습니다. p {font-size : 16px; }. . 웹 안전 글꼴의 예로는 Arial, Times New Roman 및 Courier New가 포함됩니다. WordPress에서 웹 안전 글꼴을 어떻게 사용할 수 있습니까?
WordPress에서 웹 안전 글꼴을 사용하려면 어떻게해야합니까? , 당신은 단순히 CSS의 글꼴을 참조 할 수 있습니다. 예를 들어, 모든 단락에 Arial 글꼴을 사용하려면 다음 CSS를 사용할 수 있습니다. p {font-family : arial; }. 예를 들어 Times New Roman과 Georgia가 있습니다. 반면에 Sans-Serif 글꼴에는이 작은 선이 없습니다. 예를 들어 Arial 및 Helvetica가 포함됩니다.
WordPress에서 Serif 글꼴을 어떻게 사용할 수 있습니까?
WordPress에서 Serif 글꼴을 사용하려면 CSS의 글꼴을 참조 할 수 있습니다. 예를 들어, 모든 제목에 Georgia Font를 사용하려면 다음 CSS를 사용할 수 있습니다 : H1, H2, H3, H4, H5, H6 {Font-Family : Georgia; }. CSS를 사용하여 다른 HTML 요소에 다른 글꼴을 적용하여이를 수행 할 수 있습니다. 예를 들어, 제목에 하나의 글꼴을 사용할 수 있고 바디 텍스트에는 다른 글꼴을 사용할 수 있습니다.
내 사이트에 적용하기 전에 WordPress에서 글꼴을 미리 볼 수있는 방법은 무엇입니까?
글꼴을 미리 볼 수 있습니다. Easy Google 글꼴과 같은 플러그인을 사용하여 WordPress. 이 플러그인이 사이트에 적용하기 전에 WordPress Customizer에서 글꼴을 미리 볼 수 있습니다.
Google 글꼴 또는 표준 웹 안전 글꼴에서 사용할 수없는 글꼴을 사용할 수 있습니까?
예, Google 글꼴 또는 표준 웹 안전 글꼴에서 사용할 수없는 글꼴을 사용할 수 있습니다. 글꼴 파일을 WordPress 테마 디렉토리에 업로드 한 다음 CSS를 사용하여 웹 사이트에 글꼴을 적용하여이를 수행 할 수 있습니다. 사용하기 전에 글꼴의 라이센스를 확인해야합니다.
