본문 바로가기
유용한사이트

구글 폰트- 구글 웹폰트 사용방법, (저작권) 디자인 무료폰트

by lionbum 2020. 7. 25.

 

디자인 할 때 사용 가능한 무료 폰트 찾기 

구글 폰트 : 웹폰트 적용도 가능하고, 디자인 하기위해 다운로드도 가능한 무료 폰트

 

디자인 하다가 늘 염두에 두는것 중에 하나가 폰트 

저작권 부분에서 가장 안전하고 두께 종류도 다양한 Noto Sans 주로 사용하지만,,

종종 꾸밈이 필요한 폰트를 사용해야할때, 애용하는 폰트 사이트 이다.   

 

저작권 관련 해서는 아래와 같이 이야기 하고 있다. 

 

 

 

번역기 돌려보면... 대충 아래와 같은 말인데 중요한건 모든 글꼴은 무료이며 공개 소스 라는 것! 

멋진 타이포그래피를 통해 웹을 더욱 아름답고 빠르며 개방적으로 만듭니다.
웹 사이트와 제품에 개성과 성능을 제공하는 가장 좋은 방법은 훌륭한 디자인과 기술을 이용하는 것입니다. 우리의 목표는 직관적이고 강력한 오픈 소스 디자이너 웹 글꼴 모음을 제공하여 프로세스를 간단하게 만드는 것입니다. 광범위한 카탈로그를 사용하면 전세계 어디에서든 타이포그래피를 모든 디자인 프로젝트에 완벽하게 공유하고 통합 할 수 있습니다.

 

 

장점

테스트로 써 보고 미리 폰트 모양 확인 가능

사용하려고 하는 문구가 어떤 모양으로 나올지 바로 확인

(아무리 확대해도 깨지지 않는다는 장점도 있어서 종종  급할때는 글씨 쓰고 캡쳐해서 사용하기도,ㅎ)   

 

사용방법 

사용방법은 크게 두가지로

1. 디자인 용도 : 다운로드 해서 설치후 사용

2. 코딩 용도 : 웹 폰트 경로를  추가해서 사용 

 

 

1. 디자인 용도

다운로드 후에 설치, 사용하기 

 

2. 코딩용도 

- 원하는 폰트 종류 선택하기 

- 선택된 폰트 확인하기

- 임베디드 소스 확인하고 붙여넣기 

 

 

마크업 소스에 넣을때 

<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?
    family=Noto+Sans+KR:wght@100;300;400;500;900&display=swap" rel="stylesheet">
    <style>
      body {
        font-family: 'Noto Sans KR', sans-serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

 

css 소스에 넣을 때 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;900&display=swap');
 
body{
font-family: 'Noto Sans KR', sans-serif;
}

 

 

 

 

 

728x90
반응형

댓글