본문 바로가기

프론트엔드/HTML&CSS

폰트 종류, Google fonts, Google fonts 적용하기

728x90
반응형
SMALL

 

이 외에도 여러 폰트가 있다.

컴퓨터에 이미 저장되어 있는 폰트 외의 폰트도, 직접 제공해 준 뒤 적용 가능하다.

 

아래는 폰트를 찾을 수 있는 사이트이다.

구글에서 제공하는 폰트들

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

적용법도 간단히 설명하자면..

 

먼저 사이트에 들어가서 원하는 폰트를 찾는다.

 

그 폰트를 클릭하면 다음과 같은 정보들이 나온다.

 

사진에서 표시된 저 link를 복사해서 붙여넣어주면 된다.

 

그리고 밑에 나와 있는 CSS rules를 참고해서 코드를 작성해주면 된다.

 

이 경우에는 이렇게 작성해주면 될 것이다.

실행된 모습을 확인해보자.

폰트가 잘 적용되었다!

 

 

위 사이트에는 한글 폰트가 많이 없다.

아래 사이트에서는 조금 다양하게 찾아볼 수 있다.

구글에서 제공하는 폰트들인데, 정식 출시 전인 베타테스트 중인 것들

 

(사이트에 들어가서 ctrl+f 누르면 검색창이 나온다! (윈도우 기준))

https://fonts.google.com/earlyaccess

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

728x90
LIST