-
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; }
'HTML&CSS' 카테고리의 다른 글
Span태그 (0) 2022.10.12 Web폰트가 아닌, 직접 가지고 있는 폰트 사용하기 (0) 2022.10.09 text스타일링 (0) 2022.10.02 div태그 (0) 2022.10.02 class & Id (0) 2022.09.26