html-css

[Google Font] 구글폰트 사용 법 ( html 폰트 적용하기)

민돌v 2021. 10. 6. 11:34
728x90

1. 구글 폰트를 검색해 들어간 다음 마음에 드는 폰트를 선택한다

https://fonts.google.com/?subset=korean#standard-styles 

 

Google Fonts

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

fonts.google.com


 

 

2. 마음에 드는 폰트를 클릭하고, 쭉쭉 스크롤을 내리면 글짜 크기별로 폰트를 선택할 수 있다.

 

 

3. select style로 적용할 폰트를 선택할 수 있다.

내가 선택한 모든 폰트를 한번에 적용이 가능하다

 

 

4. link를 head 안에 복사해서 구글폰트를 사용할 수 있고

5. css 를 html style 태그 안에 삽입해서 사용한다.

ex

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">

    <style>
        *{
            font-family: 'Black Han Sans', sans-serif;
        }
    </style>

적용 전
적용 후

 

 

뾰로롱

반응형