HTML, CSS, JS

구글 웹폰트 적용 하기

himzei 2022. 8. 30. 11:56

 

구글 웹폰트 사이트 접속

 

언어를 "Korean"으로 설정해주고 원하는 폰트를 찾는다. 

 

Styles 탭에서 내가 원하는 폰트를 추가시켜 주고, 오른쪽 상단에 "View Selected Families"를 선택

 

html 태그안에서 사용을 원하면 <link>를 선택하고 아래에 코드를 복사해서 html 파일의 <head>안에 넣어준다. 

"CSS rules to specify families" 에 있는 css 속성을 적용하고자 하는 선택자 안에 넣어준다. 

 

코드예시

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta
    name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 웹폰트 적용 -->
    <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=Gamja+Flower&display=swap" rel="stylesheet">
    <title>Document</title>

    <style>
      * {
        font-family: 'Gamja Flower', cursive;
      }
      .a {
        font-size: 32px;
      }
      .b {
        font-size: 2em;
      }
      .c {
        font-size: large;
      }
      .d {
        font-size: small;
      }
    </style>
  </head>
  <body>
    <h1>Lorem, ipsum dolor.</h1>
    <p class="a">Lorem ipsum dolor sit amet.</p>
    <p class="b">Lorem ipsum dolor sit amet.</p>
    <p class="c">Lorem ipsum dolor sit amet.</p>
    <p class="d">Lorem ipsum dolor sit amet.</p>
  </body>
</html>

화면구현