구글과 어도비의 합작품인 Noto Sans 폰트를 알아보자.
이미 알 사람들은 알겠지만 이 폰트가 전세계 언어를 (아직은 안나온 것은 추후할 예정) 무료로 배포할 예정이라서 관심을 많이 가지고 있었다.
Adobe Typekit Blog (한글)
Google Developers Korea
구글
- 전반적 방향 설정
- 글꼴 사양 및 요건 지정
- 언어별 지역별 테스팅 리소스 제공
- 비용부담
어도비
- 오랜 경험에서 우러나온 잘 알려진 글꼴 디자인 전문성
- 일본 가나 디자인
- 유니코드 한자 디자인 원형 제공
- 프로젝트 조율 및 한중일 글꼴 전문 업체 협력
- 글꼴 파일 생성 및 테스트 자동화
샘플 이미지
폰트 설치하기
Install에 가면 설치 하는 방법을 알 수 있다.
설치방법은 윈도우와 맥만 설명하고 리눅스는 링크 타고 가서 보고 하면 될거 같다.
Windows
- 폰트 패키지(.zip)를 다운로드 한다.
- 패키지 압축 푼다.
- 시작메뉴에서 “글꼴(fonts)”을 검색하거나 시작 → 제어판 → 글꼴로 이동
- 모든 폰트를 선택하고 글꼴 폴더로 끌어다 놓습니다.
macOS
- 폰트 패키지(.zip)를 다운로드 한다.
- 패키지를 더블클릭하여 압축 푼다.
- 서체표 열기 (Finder → 응용 프로그램 → 서체 목록으로 이동)
- 모든 글꼴 파일을 선택하고 글꼴 책의 글꼴 열 (즉, 두 번째 열)으로 끈다.
이용방법
Examples
font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
/* 한국어 */
:lang(ko) {
font-family: 'Noto Sans KR', sans-serif;
}
/* 일본어 */
:lang(ja) {
font-family: 'Noto Sans JP', sans-serif;
}
/* 중국어 (간체) */
:lang(zh-Hans) {
font-family: 'Noto Sans SC', sans-serif;
}
<div lang="ko"> ... 한국어 콘텐츠</div>
<div lang="ja"> ... 일본어 콘텐츠</div>
<div lang="zh-Hans"> ... 중국어 간체 콘텐츠</div>
폰트가 굵기가 다양하게 있어서 다른 폰트보다는 스타일 맞게 적용 할 수 있을 것 같다.
그외 한글 무료 웹폰트들
구글에서 제공하는 무료 웹폰트들도 알아주면 좋을 거 같아서 추가해본다.
※ ealry access 폰트들은 이름만 추가해서는 동작하지 않으므로 소스경로까지 import 해야만 한다.
-
하나체
URL: @import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
적용: font-family: ‘Hanna’, serif;
-
제주고딕
URL: @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
적용: font-family: ‘Jeju Gothic’, serif;
-
제주한라산
URL: @import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);
적용: font-family: ‘Jeju Hallasan’, serif;
-
제주명조
URL: @import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
적용: font-family: ‘Jeju Myeongjo’, serif;
-
KoPub 바탕체
URL: @import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);
적용: font-family: ‘KoPub Batang’, serif;
-
나눔 Brush
URL: @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
적용: font-family: ‘Nanum Brush Script’, serif;
-
나눔 고딕체
URL: @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
적용: font-family: ‘Nanum Gothic’, serif;
-
나눔 고딕 코딩
URL: @import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
적용: font-family: ‘Nanum Gothic Coding’, serif;
-
나눔 명조체
URL: @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
적용: font-family: ‘Nanum Myeongjo’, serif;
-
나눔 Pen Script
URL: @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
적용: font-family: ‘Nanum Pen Script’, serif;
답글 남기기