고정 헤더 영역
상세 컨텐츠
본문
오늘은 어여쁜 타이포그라피를 위해
너무나도 유용한~~
구글폰트 사이트를 소개해 드리고자 합니다.
구글폰트는 무료폰트이면서
상업적으로 이용 가능한 폰트들을
한데 모아 제공하고 있기에
라이센스 고민없이 바로 사용만 하면 된답니다.
구글폰트의 장점을 말씀드리자면,
다양한 언어별, 유형별로 사용할 폰트를 검색 하고
웹상에서 원하는 텍스트로 미리보기 하고
맥이나 윈도우즈에서 사용할 수 있도록 다운로드하거나
웹폰트로 사용할 수 있는 모든 리소스를 무료로 제공합니다.
그럼 이용방법에 대해서 하나하나 알아보겠습니다.
접속부터 해볼까요?
첫페이지가 뙇... 영어네요.
인내심을 가지고 소개페이지를 열어보도록 하겠습니다.
하... 영어울렁증이 더 심해지기 전에
서둘러 구글 번역기 작동!
대략.. 오픈 소스로 제공하니까
자유롭게 사용해도 된다.
라고 결론지어 봅니다.
덩어리가 큰 폰트가 많을 텐데
빠른 웹폰트 제공에 구글의 기술력이 있나봅니다.
이만 번역기는 다시 원위치하고
폰트검색을 시작해 보겠습니다.
1. 폰트검색
고딕체의 한글폰트를 원한다면
다음과 같이 선택하면 됩니다.
(물론 폰트명을 안다면
검색 창에 입력해서 찾으면 되겠지요~)
아래화면은 검색 결과입니다.
한글폰트는 많이 없을 줄 알았는데 꽤 많이 나오네요~
2. 미리보기
위에서 검색된 화면에서
내가 원하는 텍스트를 입력해서
미리보기를 해보겠습니다.
"백성을 하늘처럼 섬기는 왕,
진정 그것이 그대가 꿈꾸는 왕이라면
그 꿈 내가 이뤄드리리다"
입력한 텍스트로 한순간에 변환이 되어 보여집니다.
넘나 편한 것..
본격적인 선거운동이 시작된 지금 딱 생각난
영화 ‘광해’의 명대사
선거철은 왜이리 자주 찾아오나요...
3. 다운로드
원하는 폰트를 찾으셨다면 이제
다운로드를 해보겠습니다.
검색된 폰트명 옆에 보이는
+ 버튼을 누르시면 선택이 됩니다.
여러 개 선택 ok~
그럼 페이지 오른쪽 하단에
선택된 폰트들이 보여지며
클릭하면 다운로드 할 수 있는 탭이 열립니다.
다운로드 버튼 보이시나요?
클릭하면 바로 다운로드!
넘나 좋은 것♡
4. 웹폰트로 사용하기 (CSS)
간단한 사용 예를 만들어 보겠습니다.
저는 나눔고딕과 노토산스 두개를 선택해서 적용해 보겠습니다.
폰트를 선택하면 웹에서 사용할 수 있도록 소스를 제공하는데요,
기본 외에 다른 스타일을 선택하거나
한글을 사용하려면 CUSTOMIZE를 클릭합니다.
EMBED 부분에서 소스를 복사해서
<link>태그는 <head>태그 사이에,
font-famaily 부분은 css에 넣으면 됩니다.
코딩하여 웹페이지로 열어서 확인해 보겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="euc-kr">
<title>구글폰트 적용예</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,800|Noto+Sans+KR:300,900&display=swap&subset=korean" rel="stylesheet">
<style>
p {
font-size: 24px;
text-align: center;
}
p.nanum1 {
font-family: "Nanum Gothic", sans-serif;
font-weight: 400;
}
p.nanum2 {
font-family: "Nanum Gothic", sans-serif;
font-weight: 800;
}
p.noto1 {
font-family: "Noto Sans KR", sans-serif;
font-weight: 300;
}
p.noto2 {
font-family: "Noto Sans KR", sans-serif;
font-weight: 900;
}
</style>
</head>
<body>
<p class="nanum1">나눔고딕 regular 400</p>
<p class="nanum2">나눔고딕 extra-bold 800</p>
<p class="noto1">노토산스 light 300</p>
<p class="noto2">노토산스 black 900</p>
</body>
</html>
이상 너무나 유용하고 쉬운
구글폰트 사용법에 대해 알아보았습니다.
실무에서 잘 활용하시길 바래요~
'폰트' 카테고리의 다른 글
| 무료폰트 Gmarket Sans(G마켓 고딕) (0) | 2020.04.14 |
|---|---|
| 무료폰트 a스타일리쉬 (0) | 2020.04.13 |
| 무료폰트 Black Han Sans(검은고딕) (0) | 2020.04.02 |