<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@font-face</title>
<style type="text/css">
/* font-family: 'Dancing Script', cursive; */
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
/*
font-family: 'Roboto Condensed', sans-serif ;
*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
/*
font-family: 'Roboto Slab', serif;
*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
/*font-family: 'Noto Sans KR', sans-serif;*/
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face{
font-family: nagothic;
src:url(fonts/NanumGothic.eot);
src:url(fonts/NanumGothic.eot?#iefix) format('embedded-opentype'),
url(fonts/NanumGothic.woff) format('woff'),
url(fonts/NanumGothic.ttf) format('truetype')
}
/* body,th,td{
font-family: NGothic,'돋움',Dotum,Helvetica,sans-serif;
}*/
.lead{
font-size: 30px;
font-family: 'Dancing Script', cursive;
}
.lead{
font-family: 'Roboto Slab', serif;
}
.nanum{
font-family: nagothic, sans-serif;
}
h1{
font-family: 'Roboto Condensed', sans-serif;
}
.noto1{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 100;
}
.noto2{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 200;
}
.noto3{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 300;
}
.noto4{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 400;
}
.noto5{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 500;
}
.noto6{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 600;
}
.noto7{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 700;
}
.noto8{
font-family: 'Noto Sans KR', sans-serif;
font-weight: 800;
}
</style>
</head>
<body>
<p class="lead2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus dolorum vitae consequuntur quis accusamus, animi aliquid nemo iste obcaecati aliquam iure nesciunt, tenetur? Deleniti aperiam a, deserunt dicta temporibus explicabo modi architecto illo, voluptas asperiores culpa corrupti saepe id reiciendis, nostrum, accusamus. Repellat, numquam quis ipsam aut itaque voluptatum saepe.</p>
<!-- 폰트 파일이 다운로드 하는데 오래 걸리기 때문에 구글 폰트를 쓰는 것이 좋다. -->
<!-- 트래픽 발생하여 운영하는데 부담이 될 수 있다. -->
<!-- 구글폰트: 구글 웹서버에 트래픽이 발생 -->
<!-- webfonts 구글에서 검색 -->
<!-- https://fonts.google.com/ -->
<!-- 한국어 관련 -->
<!-- https://fonts.google.com/earlyaccess -->
<!-- nanum, noto sans kr -->
<h1>@font-face</h1>
<p class="noto1">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p class="noto2">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p class="noto3">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p class="noto4">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p class="noto5">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p class="noto6">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p class="noto7">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p class="noto8">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p class="noto9">서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, tempora. Veniam ex non unde, nam ipsa cumque. Odio iusto neque cumque ducimus officiis saepe velit consequatur est maiores. Totam, architecto.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus dolorum vitae consequuntur quis accusamus, animi aliquid nemo iste obcaecati aliquam iure nesciunt, tenetur? Deleniti aperiam a, deserunt dicta temporibus explicabo modi architecto illo, voluptas asperiores culpa corrupti saepe id reiciendis, nostrum, accusamus. Repellat, numquam quis ipsam aut itaque voluptatum saepe.</p>
<p class="nanum">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus dolorum vitae consequuntur quis accusamus, animi aliquid nemo iste obcaecati aliquam iure nesciunt, tenetur? Deleniti aperiam a, deserunt dicta temporibus explicabo modi architecto illo, voluptas asperiores culpa corrupti saepe id reiciendis, nostrum, accusamus. Repellat, numquam quis ipsam aut itaque voluptatum saepe.</p>
<p>
서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.
해당 서체가 없는 경우에 그 서체를 서버에 올려서 @font-face 에 경로를 지정하면 해당 서체를 표현할 수 있음.
단, 서체의 용량이 작지 않으므로 최소한의 서체만 연결하고 대부분은 기본 서체를 지원하는 것이 좋음.
서체를 지원하는 브라우저가 각기 다른 확장자를 지원하므로 최소 두가지의 확장자를 지원해야 문제가 없음.
</p>
<p class="nanum">
서체는 그 웹페이지를 보는 사람의 디바이스에 해당 서체가 있어야 제대로 표현 됨.
해당 서체가 없는 경우에 그 서체를 서버에 올려서 @font-face 에 경로를 지정하면 해당 서체를 표현할 수 있음.
단, 서체의 용량이 작지 않으므로 최소한의 서체만 연결하고 대부분은 기본 서체를 지원하는 것이 좋음.
서체를 지원하는 브라우저가 각기 다른 확장자를 지원하므로 최소 두가지의 확장자를 지원해야 문제가 없음.
</p>
</body>
</html>
hi