웹폰트 사용
html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webfont</title>
<link rel="stylesheet" href="css/webfont.css">
</head>
<body>
<div class="webfont0">
<h2>서시</h2>
<p>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼 없기를<br>
잎새에 이는 바람에도<br>
나는 괴로워 했다.<br>
별을 노래하는 마음으로<br>
모두 죽어가는 것을 사랑해야지<br>
그리고 나한테 주어진 길을 걸어가야겠다.<br>
<br>
오늘밤에도 별이 바람에 스치운다.
</p>
</div>
<div class="webfont1">
<h2>서시</h2>
<p>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼 없기를<br>
잎새에 이는 바람에도<br>
나는 괴로워 했다.<br>
별을 노래하는 마음으로<br>
모두 죽어가는 것을 사랑해야지<br>
그리고 나한테 주어진 길을 걸어가야겠다.<br>
<br>
오늘밤에도 별이 바람에 스치운다.
</p>
</div>
<div class="webfont2">
<h2>서시</h2>
<p>
죽는 날까지 하늘을 우러러<br>
한 점 부끄럼 없기를<br>
잎새에 이는 바람에도<br>
나는 괴로워 했다.<br>
별을 노래하는 마음으로<br>
모두 죽어가는 것을 사랑해야지<br>
그리고 나한테 주어진 길을 걸어가야겠다.<br>
<br>
오늘밤에도 별이 바람에 스치운다.
</p>
</div>
</body>
</html>
css
@charset "utf-8";
html,body{
margin:0;
}
.webfont0,
.webfont1,
.webfont2{
margin:auto;
width:50%;
}
@font-face{
font-family:noto;
src:url(fonts/NotoSansKR-Medium.woff) format("woff"),
url(fonts/NotoSansKR-Medium.otf) format("opentype");
}
@font-face{
font-family:sin;
src:url(fonts/SingleDay-Regular.woff) format("woff"),
url(fonts/SingleDay-Regular.ttf) format("truetype");
}
.webfont1{
font-family:noto;
}
.webfont2{
font-family:sin;
}