웹폰트는?

우리가 보는 웹사이트는 대부분 글(text)로 이루어져 있습니다. 사진이나 동영상을 통해 정보를 전달 받기도 하지만 아직 대부분의 글은 눈으로 읽는 과정을 통해 정보를 전달 또는 얻고 있습니다. 책이나 잡지같은 인쇄물에서도 글꼴(font)이 중요하듯이 웹사이트에서도 내용을 잘 전달하기 위해서 글꼴은 매우 중요합니다. 이러한 글꼴중에 로컬 컴퓨터에 설지 되어 있는 폰트와 웹에서만 쓰이는 폰트가 있습니다. 이 웹에서만 쓰이는 폰트를 웹폰트라고 하고 작동 원리는 웹서버에서 임시로 받아 웹페이지에 보여지는 폰트인 것 입니다. 나머지 자세한 부분은 인터넷에 많이 있는 부분이고, 여기서 적을 내용은 제가 사용을 많이 하고 또는 관심있게 보고 있는 폰트들을 적을려고 합니다.

나눔스퀘어라운드 웹폰트

인터넷 찾다가 없어서 제가 만들어 Github에 올리고 rawgit를 이용하여 사용하고 있습니다. 이번에 rawgit을 알게 되었네요.(그림이 스시네요)

나눔스퀘어라운드

나눔스퀘어 활자 가족으로 보기에 편한 라운드와 탈네모꼴의 모듈로 설계되어 젊고 경쾌한 인상을 가진 글꼴입니다. 글꼴을 설치하면 다양한 굵기와 크기로 쓸 수 있습니다. 나눔스퀘어 Light, Regular, Bold, Extra Bold / 한글 2,350자, 영문 94자, KS약물 986자.

http://hangeul.naver.com/2017/nanum

font-weigh

Regular(400), Bold(700), Extra Bold(800), Light(300) 지원됩니다.

웹폰트 적용하기

link 방식

<head>와 </head>사이에 넣어 주세요.

<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css">

import 방식

css파일이나 <style>와 </style>사이에 넣어 주세요

@import url('//cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');

<style>
@import url(‘//cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css’);
</style>

일반 cdn

https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css

최소 버전 cdn

https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css

css 적용방법

font-family: 'NanumSquareRound',sans-serif;

적용

Github : https://github.com/innks/NanumSquareRound

저작자표시