[JS]HTML 구글 폰트 사용하기

CSS 문법을 이용해 폰트를 바꿔볼려고 한다.

 

우선 폰트 사이트에 접속한다.

링크:https://fonts.google.com/?subset=korean

Browse Fonts - Google Fonts

 

 

1. Filters 를 클릭하고, Language를 korean 으로 바꾼다.

.

2.원하는 폰트 클릭

 

3.Get font 버튼 클릭

 

4. <>Get embed code 클릭

 

5.오른쪽의 Web 탭에서 import 버튼을 클릭

 

6. <style></style> 태그 안에 묶인 코드만 복사해서 style 태그 안에 넣기

 

 

7. CSS class 탭의 코드를 복사한 후,  전체 적용(*{})을 css에 넣기

 

 

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap')
        
        * {
	      font-family: "Gowun Dodum", sans-serif;
          }
​

        .mytitle {
            width:300px;   /* 가로넓이 */
            height:200px;  /* 새로넓이 */
            background-color: green;

            color:white;
            text-align:center;

            padding-top:30px;    /* 위쪽 여백 */
            border-radius:8px;   /* 테두리 둥글기 */

            background-image:url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position:center; 
            background-size:cover;
        }
    </style>

 

위의 코드는 구글 폰트를 적용시켜본 <style> 태그 부분이다.