😎 구글 폰트를 사용해 내가 원하는 폰트로 바꿔봅시다!
크롬 브라우저에서 google fonts를 검색합니다!
구글 폰트 링크 -> https://fonts.google.com/?subset=korean
-
Filters를 클릭하여, language를
korean으로 변경해 줍니다!
-
원하는 폰트를
클릭!
-
화면 오른쪽 상단
Get font버튼을 클릭합니다!
-
화면 오른쪽의
<> Get embed code버튼을 클릭합니다!
-
오른쪽의 Web 탭에서
import버튼을 클릭합니다!
-
<style> </style>태그 안에 묶인 코드만 복사해서style태그 안에 넣습니다!
-
CSS class탭의 코드를 복사한 후, 전체 적용(*{})을 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" /> <title>Document</title> <style> @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap'); * { font-family: 'Gowun Dodum', sans-serif; } .mytitle { background-color: green; width: 300px; height: 200px; border-radius: 10px; color: white; text-align: center; padding: 30px 0px 0px 0px; background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg'); background-position: center; background-size: cover; } .wrap { width: 300px; margin: 50px auto 0px auto; } </style> </head> <body> <div class="wrap"> <div class="mytitle"> <h1>로그인 페이지</h1> <h5>아이디, 비밀번호를 입력하세요</h5> </div> <p>ID : <input type="text" /></p> <p>PW : <input type="text" /></p> <button>로그인하기</button> </div> </body> </html>
추가된 부분:
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
style 태그 안에 @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
를 넣고, *{} 전체 적용 안에 font-family: 'Gowun Dodum', sans-serif; 를 넣었다.
✏️ 적용 전
✏️ 적용 후
