웹폰트란?

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

일반적인 css 적용

기본적으로 CSS나 HTML문서에 선언을 먼저 하셔야 됩니다.

@font-face {
  font-family: 'Nanum Gothic';
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);  /*IE9 호환성 보기*/
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'), /*IE 6-8*/
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'), /*WOFF 시험 버전*/
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'), /*표준 브라우저*/
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype'); /*IE를 제외한 대부분의 브라우저*/
}

이 코드는 브라우저 환경에 따라서 eot, woff, ttf 중 하나의 폰트파일을 받게되고 불필요한 파일을 받지 않음으로써 데이터의 부담은 줄고 모든 브라우저에 적용될 수 있는 최적의 코드입니다.

위의 코드중에 //fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot는 URL로 폰트가 있는 주소입니다.

또, 구글 폰트로 간단히 사용할수 있는 부분도 있습니다.

밑의 예는 Rozha One폰트를 가져화서 웹페이지에 넣는 방법입니다.

STANDARD

1	<link href="https://fonts.googleapis.com/css?family=Rozha+One" rel="stylesheet">

위의 것은 html파일에 <head>…</head> 사이에 넣으시면 됩니다.

CSS파일 안에

1	@import url('https://fonts.googleapis.com/css?family=Rozha+One');

위의 것은 css파일 안에 넣으시면 됩니다.
성언을 먼저 하셨다면 css란에

CSS파일 안에 - CSS 규칙을 사용

1	body {font-family: 'Rozha One', serif; }

Rozha One라는 폰트를 원하는 곳에 넣으시면 됩니다.

자주 쓰는 웹 폰트들

https://fonts.google.com/
http://deminoth.github.io/google-font-kor/
https://fonts.google.com/earlyaccess/

웹폰트 한글

Noto Sans KR – 본고딕 (노토산스)

1	@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

font-family: "Noto Sans KR", sans-serif;
가능 굵기 (font-weight) : 100,300,400,500,700,900

Nanum Gothic (Korean) - 나눔고딕

1	@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

font–family: ‘Nanum Gothic’, sans-serif ;
가능 굵기 (font-weight) : 400, 700, 800

Hanna (Korean) - 한나체

1	@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);

font-family: 'Hanna', sans-serif;
가능 굵기 (font-weight) : 400

Jeju Gothic (korean) - 제주 고딕

1	@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);

font-family: 'Jeju Gothic', sans-serif;
가능 굵기 (font-weight) : 400

Jeju Hallasan (korean) - 제주한라산

1	@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);

font-family: 'Jeju Hallasan', cursive;
가능 굵기 (font-weight) : 400

Jeju Myeongjo (korean) - 제주 명조

1	@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);

font-family: 'Jeju Myeongjo', serif;
가능 굵기 (font-weight) : 400

KoPub Batang (korean) - KoPub 바탕

1	@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);

font-family: 'KoPub Batang', serif;
가능 굵기 (font-weight) : 300, 400, 700

Nanum Brush Script (Korean) - 나눔손글씨 붓

1	@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

font-family: 'Nanum Brush Script', cursive;
가능 굵기 (font-weight) : 400

Nanum Gothic Coding (Korean) - 나눔 고딕 코딩

1	@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

font-family: 'Nanum Gothic Coding', monospace;
가능 굵기 (font-weight) : 400, 700

Nanum Myeongjo (Korean) - 나눔 명조

1	@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

font-family: 'Nanum Myeongjo', serif;
가능 굵기 (font-weight) : 400, 600, 700

Nanum Pen Script (Korean) - 나눔손글씨 펜

1	@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

font-family: 'Nanum Pen Script', cursive;
가능 굵기 (font-weight) : 400

이롭게 바탕체

http://font.iropke.com/batang/

1	@import url('//cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css');

font-family: 'Iropke Batang', serif;
가능 굵기 (font-weight) : 400

웹폰트 영어 300i 즉 뒤에 i가 있으면 300의 이탤릭제(italic)입니다.

영어는 원체 많아서 제가 자주 사용하는것만 적었습니다.

참고 - 사용예@import url('//fonts.googleapis.com/css?family=폰트이름:굵기1,굵기2');
@import url('//fonts.googleapis.com/css?family=폰트이름1|폰트이름2');
@import url('//fonts.googleapis.com/css?family=폰트이름&subset=언어종류');
300i 즉 뒤에 i가 있으면 300의 이탤릭제(italic)입니다.

Raleway 추천

1	@import url('https://fonts.googleapis.com/css?family=Raleway');

font-family: 'Raleway', sans-serif;
가능 굵기 (font-weight) : 100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i
추가 가능 언어: Latin(기본), Latin Extended
3.67 B

Montserrat 추천

1	@import url('https://fonts.googleapis.com/css?family=Montserrat');

font-family: 'Montserrat', sans-serif;
가능 굵기 (font-weight) : 100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i
추가 가능 언어: Latin(기본), Latin Extended, Cyrillic Extended, Cyrillic, Vietnamese
3.67 B

Open Sans

1	@import url('https://fonts.googleapis.com/css?family=Open+Sans');

font-family: 'Open Sans', sans-serif;
가능 굵기 (font-weight) : 300,300i,400,400i,600,600i,700,700i,800,800i
추가 가능 언어: Cyrillic, Cyrillic Extended, Greek, Latin(기본), Latin Extended, Vietnamese, Greek Extended
26.3 B

Source Code Pro

1	@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

font-family: 'Source Code Pro', monospace;
가능 굵기 (font-weight) : 200,300,400,500,600,700,900
추가 가능 언어:Latin Extended, Latin(기본)
87.1 M

Oswald

1	@import url('https://fonts.googleapis.com/css?family=Oswald');

font-family: 'Oswald', sans-serif;
가능 굵기 (font-weight) : 200,300,400,500,600,700
추가 가능 언어:Latin Extended, Latin(기본), Vietnamese, Cyrillic
3.73 B

Roboto

1	@import url('https://fonts.googleapis.com/css?family=Roboto');

font-family: 'Roboto', sans-serif;
가능 굵기 (font-weight) : 100,100i,300,300i,400,400i,500,500i,700,700i,900,900i
추가 가능 언어:Vietnamese, Greek, Cyrillic Extended, Latin(기본), Cyrillic, Latin Extended, Greek Extended
43.8 B

Saira Semi Condensed

1	@import url('https://fonts.googleapis.com/css?family=Saira+Semi+Condensed');

font-family: 'Saira Semi Condensed', sans-serif;
가능 굵기 (font-weight) : 100,200,300,400,500,600,700,800,900
추가 가능 언어: Latin(기본), Latin Extended, Vietnamese
7.80 M

Ubuntu

1	@import url('https://fonts.googleapis.com/css?family=Ubuntu');

font-family: 'Ubuntu', sans-serif;
가능 굵기 (font-weight) : 300,300i,400,400i,500,500i,700,700i
추가 가능 언어: Cyrillic, Cyrillic Extended, Greek, Greek Extended, Latin(기본), Latin Extended
1.17 B

Oxygen

1	@import url('https://fonts.googleapis.com/css?family=Oxygen');

font-family: 'Oxygen', sans-serif;
가능 굵기 (font-weight) : 300,400,700
추가 가능 언어: Latin(기본), Latin Extended
283 M

Dosis

1	@import url('https://fonts.googleapis.com/css?family=Dosis');

font-family: 'Dosis', sans-serif;
가능 굵기 (font-weight) : 200,300,400,500,600,700,800
추가 가능 언어:Latin Extended, Latin(기본)
336 M

웹 아이콘 폰트

특정 아이콘을 CDN을 이용하여 웹폰트 처럼 사용할수 있습니다. 그러나 폰트처럼 읽지만 폰트로는 사용할수 없고 태그를 이용하여 사용이 가능합니다.

FontAwesome

html파일에 <head>...</head> 사이

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

사용 예 : 
아이콘 모양: http://fontawesome.io/icons/

Simple Line Icons

html파일에 <head>...</head> 사이

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" />

사용 예 : 
아이콘 모양: http://simplelineicons.com/

마치며

웹 폰트들을 정리하면서 다시 한번 보게 되는군요. 내가 이런 폰트를 사용했구나. 하면서요. 많이 쓰면 로딩에 지장이 있지만 보기 좋은 웹페이지를 만들려면 약간의 양념도 필요하니까요. 앞으로 눈에 띄는 폰트가 있으면 추가 할 것입니다.