코딩 | 개념 정리/HTML & CSS
구글 웹 폰트 사용하기
PatienceLee
2020. 4. 24. 22:54
1. 구글 웹 폰트 사이트를 접속해서 원하는 폰트를 검색한다.
2. 원하는 폰트를 클릭해준뒤 'Select the font'를 클릭한다.
3. 우리는 url 주소를 가져갈 것이므로, 좌측 상단에 'embed'를 클릭해준다.
4. 하단에 링크를 복사해준다.
5. 복사한 링크를 활용하여 아래와 같이 HTML 문서를 작업해주면 완성~
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Google Font 사용하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
/* 구글 웹 폰트 */
.ng-font{
font-family:'Nanum Gothic', 돋움;
}
p{
font-size:30px; /* 글자 크기 */
}
</style>
</head>
<body>
<p>브라우저 기본 글꼴 사용</p>
<p class="ng-font">나눔고딕 웹 폰트 사용</p>
</body>
</html>6. 결과물
반응형