HTML&CSS

구글폰트사용해보기

yunajoe 2022. 10. 9. 16:41

https://fonts.google.com/  

 

Google Fonts

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

fonts.google.com

h1 태그에는 JetBrains 텍스트 스타일, monospace의 값 

h2 태그에는 Roboto 테스트 스타일, 없으면 sans-serif의 값

<!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">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&family=Roboto:wght@100&display=swap" rel="stylesheet">
    <style>
        h1{
            font-family: 'JetBrains Mono', monospace;  
        }
        h2{
            font-family: 'Roboto', sans-serif;
        }
       
    </style> 
</head>
<body>
    <h1>좋은아침!</h1>
    <h2>좋은저녁!</h2>
   
</body>
</html>

 

구글폰트에 정식으로 론칭되지는 않은 Beta 버전 

https://fonts.google.com/earlyaccess  

 

Google Fonts

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

fonts.google.com

korean을 검색하여 보았다

<!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">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/earlyaccess/notosansmyanmarui.css" rel="stylesheet">
    <style>
        h1{
            font-family: 'JetBrains Mono', monospace;  
        }
        h2{
            font-family: 'Roboto', sans-serif;
        }
        
        h3{
            font-family: 'Noto Sans Myanmar UI', sans-serif;
        }
       
    </style> 
</head>
<body>
    <h1>좋은아침!</h1>
    <h2>좋은저녁!</h2>
    <h3>한글폰트!</h3>    
</body>
</html>

 

실습

<!DOCTYPE html>
<html>
<head>
  <title>Fonts</title>
  <meta charset="utf-8">
  // 폰트 구글을 styles.css 위에다가 해줘야한당
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&family=Roboto:wght@100&family=Tangerine&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div id="serif">Serif</div>
  <div id="sans-serif">Sans-Serif</div>
  <div id="monospace">Monospace</div>
  <div id="cursive">Cursive</div>
  <div id="fantasy">Fantasy</div>
  <div id="google">Google</div>
</body>
</html>
#serif {
    font-family:"Times New Roman", serif;
    font-size:32px;
}

#sans-serif {
    font-family: Arial, sans-serif;
    font-size:32px;
}

#monospace {
    font-family: Courier, monospace;
    font-size:32px;
}

#cursive {
    font-family:"Comic Sans MS", cursive;
    font-size:32px;
}

#fantasy {
    font-family: Impact, fantasy;
    font-size:32px;
}

#google {
    font-family: 'Tangerine', cursive;
    font-size:32px;
}