어떻게 다음 웹 디자인 프로젝트에서 Google Fonts를 사용할까?

안녕하세요!
Early adopter입니다. 제 번역 블로그를 자주 찾아 주셔서 감사드립니다. 이번에 페이스북에 [DTF] 디자인 번역 공장 - Design Translation Factory라는 공개 그룹을 만들어 보았습니다.
저를 위해서 시작한 블로그였는데 1년 넘게 하다 보니 욕심이 생기게 되었습니다. 해외 디자인 관련 좋은 콘텐츠를(영어 포함 다양한 언어) 가능한 한 모두 번역해보자!라는 목표를 새워보았습니다. 많이 도와주세요^^
그리고 페이스북 친구도 거의 없습니다. ㅠㅠ 친구 맺어주시고 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다. 아직은 너무 부족하지만 함께 좋은 방향으로 발전할 수 있기를 기대합니다.
다시 한번 제 블로그를 방문해 주셔서 진심으로 감사드립니다.



How to use Google Fonts in your next web design project
Google은 당신이 다음 프로젝트에서 사용할 수백 가지의 무료 웹 Font가 준비 되어 있다고 들었을 것입니다. 어떻게 당신의 웹 사이트에서 어떻게 사용을 할까요? 이 글은 당신의 웹 사이트에서 실행되도록하기위한 방법을 안내합니다. 이것은 10분 미만의 시간만 투자하면 됩니다.

Google Fonts란 무엇입니까?

"Google Fonts는 2010년에 웹을 앞당겨 더 빠르게 움직일 수 있는 엔지니어링 이니셔티브로 시작되었습니다."- Google Design
2010년에 출시된 Google Fonts는 인터넷에서 무료로 제공되는 가장 큰 무료 오픈 소스 글꼴이 되었습니다. 모든 Google Fonts은 상업적 또는 개인적 용도로 무료입니다. Google Fonts 웹 사이트를 사용하면 누구나 자신의 디자인 요구에 맞는 다양한 글꼴을 신속하게 선택하고 활용할 수 있습니다.

누가 Google Fonts를 사용합니까?

모두가 그러 하듯! 그래픽 디자이너, UX 디자이너, 연구원, 개발자, 웹 디자이너, 블로거, 소셜 미디어 관리자, 기업가, 예술가, 학생, 교사, 사진 작가 등 빌보드, 포스터, 프리젠 테이션 데크, 청첩장, 웹 사이트 및 서적에 사용 된 Google Fonts를 보았습니다.
presentation
모든사람들과 그들의 어머니는 Google Fonts를 사용합니다.

누가 Fonts를 생성합니까?

Google Fonts는 전세계의 서체 디자이너, 서체 주조소 및 디자인 커뮤니티와 협력합니다. 이 사람들과 조직들은 Google Fonts에서 볼 수있는 글꼴을 디자인합니다. 예를 들어, Łukasz Dziedzic은 인기있는 서체 인 Lato를 디자인한 독립적인 서체 디자이너입니다. ParaType이라는 이름의 글꼴 서체는 서체 PT Serif를 디자인했습니다.

Google은 글꼴을 왜 신경 쓰나요?

웹 사이트의 모든 Google Fonts API 링크를 통해 Google은 더 많은 데이터 마이닝을 수행할 수 있습니다. 구글이 좀 심한가요? 예, 그렇지만 Google 글꼴 사용을 중단해야 한다고 생각하지는 않습니다.
구글이 글꼴에 관심을 가진 또 다른 좀더 낳은 이유는 오픈 소스 웹 글꼴을 통해 다양한 곳에 쉽게 연결되기 때문이다. 그들은 더 빠르고 더 아름답고 탐색하기 쉬운 웹을 만들기를 원합니다. 그들은 또한 이와 같은 서비스가 많이 필요할 때 Google Fonts를 2010년에 시작했습니다. 그래서 우리는 인터넷에서 또 다른 문제를 해결했습니다. #dontbeevil
presentation
출처 - fonts.google.com/about

왜 내가 그들을 사용해야합니까?

무료이기 때문에 다음 웹 디자인 프로젝트에서 Google 글꼴 사용을 고려해야합니다. 왜냐하면 ...
  • 글꼴은 웹 사이트에서 쉽게 구현할 수 있습니다.
  • 선택할 수있는 850가지 이상의 글꼴이 있습니다.
  • 글꼴의 전반적인 품질이 계속해서 증가합니다.
  • Google글꼴은 인쇄용으로도 다운로드 할 수 있습니다.
이제 어떻게 사용하는지에 대해 알아보겠습니다.

Google 글꼴 사용 방법 - 단계별

1) Google Fonts website로 이동하십시오.

853가지 글꼴 중에서 선택할 수있는 Google Fonts 웹 사이트를 방문하십시오! 이 웹 사이트에서는 글꼴 스타일, 언어, 인기도 및 무게로 결과를 필터링 할 수 있습니다. Google Fonts는 "추천"페이지를 방문하면 새로운 글꼴을 사용합니다.
presentation
fonts.google.com

2) 원하는 글꼴 검색

원하는 폰트 패밀리 이름이 있다면 찾을 수 있습니다.
presentation

3)사용할 준비가 되면"+"를 클릭합니다.

폰트 패밀리 모음마다 오른쪽 위 모서리에 +버튼이 있습니다. + 버튼을 클릭하여 글꼴 패밀리를 화면 하단에 나타나는 "Seletion drawer"에 추가됩니다.
presentation

4)하나 이상의 글꼴을 사용하려면 1~3단계를 반복합니다.

5)"selection drawer"를 클릭하면 선택한 글꼴을 모두 보여줍니다.

“selection drawer”는 추가 한 모든 글꼴을 볼 수 있는 곳입니다. 웹 사이트에 추가 할 코드를 찾을 수 있는 곳입니다. 글꼴을 바탕 화면에 다운로드 할 수도 있습니다.
presentation

6)“selection drawer”는 웹 사이트 HTML과 CSS코드들에 사용할 copy/paste할 코드를 확보할 수 있는 곳이다.

“selection drawer”에서 HTML 및 CSS로 붙여 넣을 코드를 복사합니다. Google 글꼴이 웹 사이트에서 작동하려면 글꼴 패밀리가 Google Fonts API (HTML)에 링크되어 있고 font family가 CSS에 지정되어 있어야합니다.
presentation

7) "customize"Tab을 클릭하여 원하는 경우 다른 font weights 및 Styles 추가

이것은 font families에 다른 font weights and styles을 추가하여 웹 사이트에 추가 할 수있는 마지막 기회입니다. 글꼴을 많이 추가할수록 사이트에 로드되는 속도가 느려지기 때문에 필요한 font weights and styles만 추가하십시오.
presentation

8) HTML 코드를 복사하여 웹 사이트의 <head>에 붙여 넣기

이제 HTML과 CSS 코드를 복사하여 웹 사이트에 붙여 넣기 만하면됩니다. 먼저 HTML 링크를 HTML 문서의 head에 복사합니다.
presentation

presentation

9) CSS rule을 복사하여 웹 사이트의 CSS 파일에 붙여 넣습니다.

마지막으로 CSS rules을 복사하여 CSS 파일에 붙여 넣어야합니다. 웹 사이트에 하나의 Google 글꼴을 추가하는 경우 body 태그에 CSS font family rules을 추가 할 수 있습니다. 그렇지 않으면 CSS 파일의 올바른 요소에 추가해야합니다.
presentation

presentation

10) 두 파일 (HTML 및 CSS)을 모두 저장 한 다음 웹 사이트를 새로고침하고 새 글꼴을 봅니다.

저장하고 새로고침하는 것을 잊지 마십시오!
presentation
로컬 파일을 새로 고치면 새로운 글꼴 모음이 표시됩니다.이 경우 Lato라는 Google 글꼴입니다.
웹 사이트에서 첫 번째 Google 글꼴을 성공적으로 구현했습니다.
presentation

More reading

  • “Reimagining Google Fonts” by Yuin Chien (Google Design)
  • “6 Tips for Better Font Pairing” by Hayden Mills (Font Pair)
  • “Choosing Web Fonts: A Beginners Guide” by Google Fonts


번역글 추천(신청) 받습니다.

PS. 안녕하세요. 일 년 조금 넘게 제가 공부 좀 해보려고 블로깅을 처음 시작했는데, 생각보다 많은 분들께서 제 번역 글들을 보시고 계셔서 놀라기도 하고 좋기도 했습니다.
읽고 싶은 좋은 디자인 관련 해외 글들이 있다면 리뷰에 링크를 달아 주세요. 가능하면 번역해보려고 합니다.
기간은 보통 원작자 허락 구하는데 3일정도 그리고 번역은 1일 정도입니다. 신청하시면 가능한 1주일 내에는 충분히 볼 수 있지 않을까 생각됩니다.

이 글은 번역글입니다.
원본링크 입니다.