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. 결과물
반응형
'코딩 | 개념 정리 > HTML & CSS' 카테고리의 다른 글
| WebFX Colorpicker 사이트 이용하기 (0) | 2020.04.26 |
|---|---|
| W3C CSS 검사기 (0) | 2020.04.26 |
| Web 코딩 간 기본 상식 (0) | 2020.04.24 |
| CSS3와 브라우저 접두사(prefix) (0) | 2020.04.24 |
| [HTML] SVG 파일을 지원하지 않는 브라우저를 위해 (0) | 2020.04.23 |
