Google 및 플러그인과 함께 Google 글꼴을 사용하는 방법을 안내합니다!
게시 됨: 2021-07-30
디자이너라면 타이포그래피를 웹사이트 디자인의 기초로 생각할 가능성이 더 큽니다. 글꼴 선택뿐만 아니라 웹 페이지의 가독성에 우위를 제공합니다.
타이포그래피란?
타이포그래피는 줄 길이, 포인트 크기, 줄 간격, 서체를 선택하고 문자 그룹 사이의 간격을 조정하는 것입니다.
Google Fonts가 확실한 선택인 이유는 무엇입니까?
인터넷에는 보는 사람이 지루할 수 있는 표준 글꼴이 있었지만 시간이 지남에 따라 웹 디자이너와 개발자는 라이브 텍스트 글꼴 선택을 제한하고 가장 많은 사용자와 호환되는 글꼴을 디자인해야 했습니다. 인터넷. 그들은 CSS3를 생각해 냈습니다. Typekit이 시작했습니다.
Typekit은 디자이너가 웹 페이지에 사용할 매력적이고 사용자 친화적인 글꼴을 선택하는 데 도움이 되는 매력적인 글꼴을 개발했지만 Typekit을 사용할 때의 유일한 문제는 사용자에게 부과하는 비용이었습니다.
가격은 49달러였고 디자이너가 두 개의 사이트를 개발하려는 경우 웹 페이지에서 글꼴을 사용하는 데만 99달러를 지불해야 했습니다. 멋진 글꼴 디자인을 제공하고 무료로 제공한 Google에 감사드립니다.
돈으로 얻을 수 있는 것을 무료로 얻을 수는 없지만 Google Web Fonts는 Typekit에서 제공하는 것과는 다릅니다. 물론 Google 웹 글꼴은 전체 웹사이트를 구축하는 데 비용이 너무 많이 든다는 사실을 알고 있기 때문에 글꼴에 너무 많은 비용을 지출하고 싶지 않을 때 가장 좋습니다.
Google 글꼴 및 사용자 정의:
현재 Google 라이브러리에는 647개 이상의 별도 글꼴이 있습니다. 웹사이트 콘텐츠의 글꼴을 선택할 때 해당 글꼴을 구현하는 방법과 유사한 방식으로 글꼴을 확인하는 것이 중요합니다. 일부 글꼴은 본문 내용에는 완벽해 보이지만 제목으로는 두려운 것입니다.
다행히 Google Web Fonts를 사용하면 사용 사례에 맞게 미리보기를 사용자 지정할 수 있습니다. 사용자 정의 미리보기 텍스트를 입력하고 원하는 대로 미리보기 크기를 변경할 수 있습니다. 단락 보기에서 사용할 머리글이나 본문 사본을 미리 보는 것이 중요하며 본문 사본이 많은 경우 사용자 정의 글꼴을 너무 많이 사용하지 마십시오.
올바른 글꼴을 깔기!
우리는 600개가 넘는 글꼴 패밀리를 살펴봐야 하기 때문에 단순히 하나씩 스크롤하여 올바른 글꼴 패밀리를 필터링하고 선택하기가 어렵습니다. 따라서 아래 단계를 사용하여 웹사이트에 필요한 사항을 정확히 파악하세요.
- Google에서 최근 업데이트한 글꼴을 간단히 살펴보세요. 나머지 글꼴을 볼 필요 없이 인기 있고 버그가 없는 글꼴을 얻을 수 있습니다. 또한 대부분의 디자이너와 개발자가 사용하는 글꼴을 참조하십시오. 이렇게 하면 다양한 스타일과 너비로 사용할 수 있는 다양한 글꼴을 알 수 있습니다.
- 웹사이트의 서체를 알고 있다면 글꼴의 특성과 스타일로 결과를 개선할 수 있습니다. 예를 들어 손으로 쓴 글꼴을 원하는 경우 다른 모든 유형의 결과를 비활성화합니다.
- Google을 사용하면 필터링 옵션으로 문자의 두께, 기울기 및 너비를 추가하여 글꼴 검색을 더욱 세분화할 수 있습니다. 웹사이트에 가장 적합한 글꼴을 얻을 수 있는 멋진 기능이 아닙니까?
글꼴 선택
구글은 웹사이트 소유자의 필요에 따라 글꼴을 선택하고 구현하는 다양한 방법을 가지고 있습니다. 여기에는 옳고 그름이 없습니다. 당신에게 가장 좋은 것이 무엇이든, 당신은 그것을 얻을 것입니다. 올바른 글꼴을 선택하는 데 도움이 되는 세 가지 버튼을 지원합니다.
- 빠른 사용: 원하는 글꼴을 빠르게 살펴봅니다.
- 팝업: 기능 및 사용과 같이 좋아하는 글꼴에 대해 자세히 알아보기 위해.
- 컬렉션: 두 개 이상의 글꼴을 사용하려면 컬렉션을 클릭해야 하는 버튼입니다. 한 페이지에 원하는 모든 글꼴을 추가합니다.
Google 글꼴을 사용하는 방법?
웹페이지에서 사용하려는 글꼴을 선택했으면 "사용" 탭을 클릭하여 실제 글꼴을 볼 수 있습니다. 이제 글꼴에 대해 확신이 서면 웹페이지에 일부 코드를 복사하여 붙여넣기만 하면 됩니다. 다음 세 가지 옵션 중에서 선택할 수 있습니다.
기준:
표준 스타일시트 링크입니다. HTML 파일의 헤드 부분에 배치해야 하므로 이미 삽입된 스타일시트에 상당히 추가하는 @import 규칙을 추가하는 단계를 절약할 수 있습니다. 예:
CSS:
헤더에 자동 생성된 스타일시트에 연결하지 않으려면 CSS @import 규칙을 사용하세요. 글꼴을 CSS에 통합하려면 아래 코드를 사용하십시오.
font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;
자바스크립트
Google과 Typekit은 모두 WebFont 로더의 일부로 이 코드를 개발하여 사용자에게 글꼴 로드를 더 잘 제어할 수 있도록 했습니다.
HTML 스니펫을 가져와 다음과 같이 HTML 헤더 근처에 둡니다.
페이지 제목
CSS로 이동하고 다음을 따르십시오.
h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}
플러그인의 도움으로!
원활한 Google 글꼴 통합을 제공하는 몇 가지 플러그인이 있습니다. 플러그인을 사용하면 플러그인이 HTML 또는 CSS의 도움을 받아 추가로 사용자 정의하지 않고 특정 텍스트를 찾을 수 없다는 것과 같은 한계가 있습니다. 하지만 여전히 웹사이트에 Google 글꼴을 포함할 수 있는 플러그인이 몇 개 없습니다.
1. 글꼴 플러그인 
몇 번의 클릭만으로 웹사이트에 Google 글꼴을 삽입할 수 있는 쉽고 효과적인 방법입니다. 스타일시트를 사용하거나 CSS 스타일을 사용할 수 있습니다. 둘 다 테마에 맞게 조정됩니다. 관리 영역이나 웹사이트의 스타일시트에서 할 수 있습니다. 글꼴 플러그인은 웹사이트에 필요한 모든 것, 빠르고 효율적입니다.
2. 쉬운 구글 폰트 
Easy Google Fonts 플러그인을 사용하면 웹사이트에서 글꼴을 가져오기 위해 코딩을 만질 필요가 없습니다. 선택부터 라이브에 고유한 색상을 최적화하고 미리보기에 제공하는 것까지 Easy Google Fonts를 사용하면 글꼴이 있는 모든 작업을 수행할 수 있습니다.
3. TK 구글 폰트 
TK Google 글꼴은 페이지나 게시물을 개발할 때 291개의 모든 Google 웹 글꼴을 시각적 편집기 패널에 추가합니다. 설치하고 사용하기만 하면 됩니다.
위 플러그인 설치:
- WordPress 관리자에 로그인
- "플러그인"을 클릭하십시오
- "새로 추가"를 클릭하십시오
- 오른쪽 상단 모서리에 플러그인 이름을 입력하고 "지금 설치"를 클릭합니다.
플러그인을 사용자 정의하려면
- "모양"을 클릭한 다음 "사용자 정의"를 클릭하십시오.
- "사이트 방문"을 클릭한 다음 "사용자 지정"을 클릭합니다.
- "Typography"로 새로 추가된 메뉴를 볼 수 있습니다.
학습을 구현하십시오!
기사를 읽는 것이 학습 교훈이 되었기를 바랍니다. 이제 웹 사이트에서 이 지식을 사용할 때입니다. 다양한 글꼴, 플러그인을 탐색하여 웹사이트의 타이포그래피를 개선하십시오. 글꼴을 사용자 정의하는 경우 글꼴을 복사하여 붙여넣는 것보다 더 유용하다는 점을 명심하십시오. 프로젝트에서 청중을 유혹하기 위해 타이포그래피를 추가하는 데 사용하는 글꼴과 방법을 알려주십시오.
글꼴은 웹사이트의 미적 형태를 향상시키며 모든 웹사이트 디자인의 기초입니다. 글꼴 또는 타이포그래피는 줄 길이, 포인트 크기, 줄 간격, 서체를 선택하고 그룹 문자 사이의 간격을 조정하는 것입니다.
디자이너는 필터링 옵션으로 문자의 두께, 기울기 및 너비를 추가하여 글꼴 검색을 더욱 세분화하는 것이 좋습니다. 모든 글꼴이 본문 및/또는 제목 콘텐츠에서 보기에 좋은 것은 아닙니다.
어떤 글꼴은 제목으로 보기에 좋지 않고 다른 글꼴은 본문 내용에서 쉽게 읽을 수 없습니다. 따라서 가독성을 테스트할 수 있도록 선택한 글꼴을 구현 방법과 유사한 방식으로 보는 것이 좋습니다.
인터넷이 예전과 같은 지루한 표준 글꼴을 사용하던 시대는 지났습니다. 첨단 기술과 웹 디자이너와 개발자는 인터넷을 통해 가장 많은 사용자와 호환되는 글꼴을 디자인해야 했습니다.
그들은 CSS3를 생각해 냈습니다. Typekit은 이를 시작했고 웹 디자이너가 사용할 수 있는 매력적이고 매력적인 글꼴을 개발했습니다. 그러나 비용이 너무 많이 들었습니다. 고맙게도 Google이 구출되어 훌륭하고 사용자 친화적인 글꼴 디자인을 무료로 제공했습니다.
올바른 글꼴 아래로 퍼널링!
현재 구글 라이브러리에 있는 글꼴의 수는 647개에 달해 필터링하고 올바른 글꼴을 선택하기가 어렵습니다. 그러나 이 3단계를 통해 웹사이트에 필요한 것을 정확히 얻을 수 있습니다.
- Google에서 최근 업데이트된 글꼴을 살펴보고 최신 유행의 버그 없는 글꼴을 얻으십시오. 또한 대부분의 디자이너가 사용하는 글꼴을 찾아 여러 스타일과 너비로 사용할 수 있는 글꼴의 다양성에 대해 알 수 있습니다.
- 웹사이트의 서체, 글꼴의 특성 및 스타일을 파악하여 결과를 개선하십시오.
- 필터링 옵션으로 문자의 두께, 기울기 및 너비를 추가하여 글꼴 검색을 세분화합니다.
글꼴 선택
필요에 따라 Google은 글꼴 선택에 도움이 되는 몇 가지 방법을 제공합니다. 올바른 글꼴을 선택하려면 다음을 고려하십시오.
빠른 접근 - 원하는 글꼴을 빠르게 확인하려면
팝 아웃 - 글꼴, 즉 기능 및 용도에 대해 자세히 알아보기 위해
모음 - 두 개 이상의 글꼴을 사용하려면 이 버튼을 클릭하세요. 한 페이지에 원하는 모든 글꼴을 추가합니다.
Google 글꼴 사용 방법
원하는 글꼴을 선택했으면 '사용' 탭을 클릭하여 실제 글꼴을 확인하십시오. 그런 다음 웹페이지에 일부 코드를 복사하여 붙여넣습니다. 다음 세 가지 옵션 중에서 선택할 수 있습니다.
표준 - 표준 스타일시트 링크입니다. HTML 파일의 헤드 부분에 배치합니다. 이미 있는 스타일시트에 상당히 추가할 때 @import 규칙을 추가하는 단계를 절약할 수 있습니다.
CSS - 헤더에서 자동 생성된 스타일시트에 연결하지 않으려는 경우 CSS @import 규칙을 사용하십시오 . 글꼴을 CSS에 통합하려면 아래 코드를 사용하십시오.
font-family: 'Henry Pigeous', serif;
글꼴 패밀리: '외교적'. 필기체;
JavaScript -Google 및 Typekit은 모두 웹 글꼴 로더의 일부로 여기에서 이 코드를 개발하여 사용자에게 글꼴 로드를 더 잘 제어할 수 있도록 합니다 .
HTML 스니펫을 가져와 다음과 같이 HTML 헤더 근처에 둡니다.
페이지 제목
CSS로 이동하고 다음을 따르십시오.
h1 {
글꼴: 400 45px/0.5 '외교', Arial, sans-serif;
}
피 {
글꼴: 400 14px/1.5 'Henry Pegasus', Times, serif;
}
저자 소개:
Catherrine Garcia는 Hosting Facts의 숙련된 웹 개발자이자 열정적인 블로거입니다. 그녀는 웹 개발 및 WordPress에 대한 기사를 통해 지식을 공유하는 것을 좋아합니다.