사이트를 만들 때 다양한 폰트를 사용하여 꾸미고 싶을 텐데요. 하지만 다른 사람의 pc에 화면상으로 다양한 폰트를 보이게 하려면 그 pc에도 폰트가 있거나 깔아야 합니다.
그러면 용량이나 화면에 출력되는 시간이 지체되는데, 웹폰트를 이용하면 폰트를 다운로드하지 않아도 화면에 출력되게 할 수 있습니다.
웹폰트를 사용하려면 2가지 방법이 있는데, 그중에 쉬운 한 가지 방법을 알려드리겠습니다~
공개된 웹폰트 소스를 이용하는 방법이 있는데요. 한 사이트를 소개해드릴게요
눈누 - 상업용 무료한글폰트 사이트
상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누
noonnu.cc
이곳에 보시면 폰트 다운로드 및 웹폰트를 제공해 주는데요, 라이선스 사용 범위도 알아보기 쉽게 되어 있으니 잘 확인하시고 쓰시면 됩니다.ㅎ(개인적으로 사용하는 게 아니라면, 사용범위를 넘어서는 용도로 쓰면 안 돼요~)
마음에 드는 폰트를 클릭하면 상세페이지가 나오는데, 위의 사진의 빨간 동그라미 부분을 클릭해서 웹폰트 코드를 복사해서 사용하면 됩니다.ㅎㅎ
웹폰트 사용법은 제가 짠 코드로 설명해 드리겠습니다.
<!DOCTYPE html>
<html lang ="ko">
<head>
<meta charset="UTF-8">
<title>test1</title>
<link href = "layoucss3.css" rel="stylesheet" type="text/css">
</head>
<body>
웹폰트를 사용해보겠습니다.(티몬 몬소리체)
</body>
</html>html 코드입니다. 이 상태론 웹폰트 적용이 안됩니다.
css를 이용해서 웹폰트를 적용해야 하는데요, html 안에 css 스타일을 넣을 수도 있지만, 실무에서는 html 과 css 스타일을 분리해서 사용하기 때문에 저는 css 파일에 코드를 따로 작성해 보겠습니다.
<link href = "layoucss3.css" rel="stylesheet" type="text/css">↑ 위의 코드로 작성해야 할 css를 링크를 걸었습니다. layoucss3.css는 우리가 이제 작성해야 할 css 파일 이름입니다. 연결하려는 css 파일 이름하고 같아야 합니다. 저는 따로 파일 위치를 정하지 않았기 때문에 html 파일이랑 css 파일이 같은 폴더 안에 있어야 돼요~
@font-face {
font-family: 'TmonMonsori';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{
font-family: 'TmonMonsori';
font-size : 50px;
}CSS 코드입니다. 복잡해 보이지만 알고 보면 엄청 간단합니다.ㅎㅎ
@font-face { font-family: 'TmonMonsori'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff'); font-weight: normal; font-style: normal; }
이건 아까 사이트에서 복사한 웹폰트 코드입니다. 복사한 코드를 새로 작성한 CSS 파일 안에 그냥 붙여놓기만 한 것입니다.
body{
font-family: 'TmonMonsori';
font-size : 50px;
}이 부분이 중요합니다! 이건 직접 작성해야 합니다.
코드의 body 부분은 아까 작성한 html 파일 안에 body 부분에 { }안의 내용을 적용시키겠다고 하는 것입니다.
font-family: 'TmonMonsori';는 그 위의 font-family: 'TmonMonsori';부분과 같게 해줍니다(틀리면 적용이 안돼요) 그냥 맘 편하게 복사 붙혀놓기 해줍시다.
font-size : 50px; 이 부분은 폰트의 크기입니다.
크기가 너무 작아서 50px로 키웠습니다. 더 크게 하고 싶으면 더 높은 숫자를 쓰면 되요ㅎ
이제 코드를 적용한 결과물을 확인해 보겠습니다.
웹폰트가 무사히 적용되었네요ㅎㅎ
다양한 폰트들이 많으니 마음에 드는 폰트 이것저것 사용해 보세요~
이상 html 웹폰트 사용법이었습니다. 안녕~
'HTML5&웹디자인' 카테고리의 다른 글
| [HTML5] 간단한 상단메뉴 만드는 방법 (0) | 2021.10.27 |
|---|---|
| [HTML5]html lang ="ko" 작성하는 이유 (0) | 2021.10.24 |
| margin(마진)과 padding(패딩)의 차이점 (0) | 2021.10.18 |
| HTML5 기초-시맨틱 태그 사용하는 이유 & 종류 (0) | 2021.09.26 |
| HTML5 기초 -HTML5의 기본 구조 (0) | 2021.09.25 |
댓글