본문 바로가기
notion/Other_info

구글 무료 폰트 사용해보기

by 서수이 서수이 2021. 2. 25.
반응형

무료폰트사용해보기.

많은 개발자, 디자이너들은 가끔 폰트, 이미지, 음원, 라이브러리 등 저작권 때문에 여간 피곤한게 아니다.

특히 폰트, 이미지, 라이브러리, 음원 등 같은 창작물 같은 경우에는 저작권으로 소송까지 이어져 꽤 책임이 무거운 편이다.

이런 문제 때문에, 네이버, 아아한 형제들, 야놀자 등 다양한 폰트를 제공해주고 있으며, 나 또한 네이버 나눔체는 자주 사용한다.

하지만 이것만으로는 너무 부족하고 불편했다.

찾아보니.. 우리 갓구글께서 Google Fonts 서비스를 하고 계셨다.

물론 개발을 할 수 있게 다운로드부터 cdn까지 지원을 해주었다.

특히 css에서 쓰기 너무 좋았다!

Google Fonts의 경우에는 라이센스로부터 꽤 자유로워서 폰트로 장사만 하지 않는다면 따로 저작권라이센스에 제약이 없다고 생각하면 된다.

사이트 내부도 워낙 깔끔하고 인터페이스 자체도 쉬워서 찾아보기 쉽고, 다양하게 비교를 해볼 수 있다.

나는 이 사이트를 이용하면서 좋았던 부분들은 아래 리스트와 같다.

  1. 라이센스
  2. cdn
  3. 방대한 폰트종류

라이센스도 라이센스지만 CDN 지원이 확실하다.

원하는 폰트를 눌러서 들어가서 보면 폰트 스타일이 전부 보이고, 각 라인에 Select this style 버튼이 있다.

버튼을 클릭을 하면 폰트를 link 방식과 import 방식으로 연결할 수 있게 해준다.

링크 방식

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

임포트 방식

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
</style>

사용시 family 이름

font-family: 'Roboto', sans-serif;

위 처럼 지원을 해주니 그냥 폰트 설치도 할 필요 없이 front 작업시 붙여넣기만으로도 설정을 할 수 있다.

또한 제일 하단에 보면 라이센스와 관련된 문구가 있으니 혹시 찜찜하면 확인하면 좋다.


About Roboto
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

This is the regular family, which can be used alongside the Roboto Condensed family and the Roboto Slab family.

To contribute, see github.com/google/roboto

Designer

내가 이 사이트를 보면서 느낀 부분이 있다.
프론트 개발시에 폰트와 색상, 라이브러리 출처를 넣는 부분을 별도로 관리를 하려고 생각중이다.

물론 어떻게 관리를 해야될지는 모르겠지만 출처를 항상 남기는 것 자체가 귀찮으니 한 문서에서 편하게 관리를 할 수 있도록 하면 개발시에 너무 편리할 것 같다.

반응형

댓글0