CSS 눈누 웹 폰트 사용하기, 티스토리 적용 방법

웹 폰트를 자체적으로 만들어서 사용할 수 있지만 인터넷에서 무료로 제공하는 웹 폰트를 간단히 링크를 통해서 사용할 수 있습니다. 이전 포스트에 구글에서 제공하는 웹 폰트를 사용하는 방법과 동일하게 눈누 사이트에서 제공하는 무료 웹 폰트를 사용하는 방법에 대해서 알아보고 티스토리 블로그에 웹 폰트를 적용하는 방법에 대해서도 알아보죠.

▶ 이전 게시글 : CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법

눈누 사이트에서 제공하는 무료 웹 폰트 사용하기

☞ 눈누는 상업적 이용 가능한 무료 한글 폰트 사이트입니다.

1. “눈누” 사이트 [접속] 합니다.

https://noonnu.cc/

2. 원하는 폰트를 찾아 [선택] 합니다

→ 예시로 인기가 많은 “Gmarket Sans” 폰트 기준으로 설명합니다.

3. [웹폰트로 사용] 부분에 코드를 [복사]합니다.

→ 라이선스 본문 내용을 확인합니다.

4. 적용할 웹 페이지에 코드를 [붙여 넣기]합니다.

▼ 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>눈누 웹 폰트(Gmarket Sans)</title>
<style>
@font-face {
     font-family: 'GmarketSansMedium';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
body {
     font-family: 'GmarketSansMedium', sans-serif;
     font-size: 1.5em;
}
</style>
</head>
<body>
     <div>눈누 웹 폰트(Gmarket Sans)</div>
     <div>BlueShare 블로그</div>
</body>
</html>

5. 적용이 되었는지 확인합니다.