주제와 관련된 더 많은 사진을 참조하십시오 HTML+CSS 9 : 구글 웹폰트 적용하기 – 전주코딩학원. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
HTML+CSS 9 : 구글 웹폰트 적용하기 – 전주코딩학원
주제에 대한 기사 평가 웹 폰트 적용
Author: 렛츠코딩앤플레이
Views: 조회수 3,273회
Likes: 좋아요 38개
Date Published: 2019. 11. 18.
Video Url link: https://www.youtube.com/watch?v=04tVAUWBGqs
[CSS][웹 폰트] google font, 눈누 적용하기
웹폰트
웹에서 폰트를 적용하기 위해서는 크게 두가지 방법이 있다. TTF, OTF파일과 같은 폰트 파일을 다운받은 뒤 서버에 저장을 시키고, 이 파일을 불러와서 적용하는 방식과 다운받는 것 없이 url을 이용해서 웹 폰트를 적용하는 방식이다. 이 두가지 방법 중에서 두번째 방법인 웹 폰트를 적용하는 방법에 대해서 알아보자.
웹 폰트 종류
가장 많이 사용하는 웹 폰트에는 구글 폰트와 눈누가 있다. 구글 폰트에는 영어, 한국어 모두 있고, 눈누에는 한국어 폰트가 주로 있다. 이 웹사이트에 가보면 많은 폰트가 있으니 만드는 웹사이트에 어울리는 폰트를 골라서 사용하면 된다.
구글 폰트 적용하기
구글 폰트 웹사이트 상단에 이름으로 폰트를 검색할 수 있고, 언어, 카테고리, properties들을 설정할 수 있다. 그렇게 해서 원하느 폰트를 찾아서 들어가면 된다.
원하는 폰트로 들어가면 font weight에 따른 글들이 나오는데 쓰고싶은 weight의 옆에 + Select this style을 누르면 된다. 꼭 한개가 아니더라도 여러 weight, 여러 폰트들에서 버튼을 눌러도 한번에 적용을 할 수 있다. 그 후에 구글폰트 오른쪽 상단에 있는 아이콘을 클릭하면 된다.
아이콘을 클릭하면 오른쪽에서 웹 폰트로 쓸 수 있는 코드가 나올 것이다. html에 적용시키기 위해서는 를 보면 되고, 이번에는 CSS에 적용을 시키기 위해서는 @import의 코드를 복사해서 붙이면 된다.
CSS 가장 위에 @import 로 된 부분을 붙이고 폰트를 적용하고 싶은 부분에 font-family에서 import한 폰트를 적용하면 된다. 웹사이트 전체에 노토산스 폰트를 적용하는 경우 아래와 같은 코드를 사용하면 된다.
* { font-family: ‘Noto Sans KR’, sans-serif; }
눈누 폰트 적용하기
눈누에서도 구글 폰트와 같이 폰트를 검색하고 볼 수 있다.
이 중에서 마음에 드는 폰트를 선택하면 아래와 같이 폰트를 미리볼 수 있는 공간과 웹 폰트로 사용하는 코드, 다운로드 링크가 있다. 폰트를 다운받아서 사용하고 싶으면 다운로드 링크에 들어가서 ttf나 otf와 같은 파일을 다운받아서 설정하면 된다.
웹 폰트로 적용하기 위해서는 @font-face부분을 복사하여서 CSS가장 위에 붙여넣어 준다. 그리고 사용하고 싶은 부분에 font-family를 font-face에 설정된 이름을 사용하면 된다. 전체에 해당 폰트를 사용하는 경우면 아래와 같은 코드를 적용하면 된다.
위 코드는 local(NanumSquareR) → local(NanumSquare) → url(NanumSquareR.eot) → url(NanumSquareR.woff) → url(NanumSquareR.ttf) 순으로 폰트를 찾습니다.
만약 나눔스퀘어 폰트가 설치되지 않은 PC 사용자가 크롬브라우저를 통해 웹 사이트에 접속하면 local(NanumSquareR) → local(NanumSquare) → url(NanumSquareR.eot) → url(NanumSquareR.woff) 순으로 이동하여 NanumSquareR.woff 파일이 적용 됩니다. 왜냐하면 크롬브라우저에서는 .eot파일을 지원해주지 않기 때문입니다. 참고
즉, 불필요한 다운로드가 일어나게 됩니다.
이러한 불필요한 다운로드를 막기 위해서 format 속성을 사용합니다. format 속성을 사용하면 브라우저에서 지원 가능한 파일만 다운로드 받을 수 있습니다.
위의 코드를 보면 웹폰트 패밀리명은 NanumSquareWeb으로 하나지만 font-weight를 이용하여 사용할 웹폰트를 다르게 선언하고 있습니다.(@font-face에 적용한 font-weight는 일반적으로 사용되는 굵기에 대응하는 값을 적어주는 것이 좋습니다. 참고)
font-weight가 300일 경우에는 NanumSquareL.woff,
font-weight가 400일 경우에는 NanumSquareR.woff,
font-weight가 700일 경우에는 NanumSquareB.woff,
font-weight가 800일 경우에는 NanumSquareEB.woff 가 적용됩니다.
font-weight 200, font-weight 600은 선언이 안되있는데 font-weight: 200과 font-weight:600일 경우 어떤 웹폰트가 적용될까요?
만약 정확히 주어진 font-weight를 사용할 수 없다면 실제로 렌더링 되는 font-weight를 결정하기 위해 다음과 같은 규칙 적용 됩니다. 참고
만약 font-weight가 600 이상이면, 가능한 큰 font-weight 중 가장 가까운 font-weight가 적용됩니다.(만약 없다면 작은 font-weight 중 가까운 font-weight)
만약 font-weight가 300 이하이면, 가능한 작은 font-weight 중 가장 가까운 font-weight가 적용됩니다(만약 없다면 큰 font-weight 중 가까운 font-weight)
만약 font-weight가 400이면, 500이 적용되고 500이 없으면 300 이하일 때 규칙이 적용됩니다.
만약 font-weight가 500이면, 400이 적용되고 400이 없으면 300 이하일 때 규칙이 적용됩니다.
위의 규칙에 따르면 font-weight: 200은 가능한 작은 font-weight 중 가까운 font-weight: 300이 적용되어 NanumSquareL 폰트가 적용되고, font-weight: 600은 가능한 큰 font-weight 중 가까운 font-weight: 700이 적용되어 NanumSquareB가 적용됩니다.
만약 나눔스퀘어체가 모든 언어를 포함하고 있을 때, 위의 코드처럼 작성하면 될 것 같지만 잘못된 코드입니다. 아랍어를 사용해도 NanumSquareR.woff(3MB) 파일을 다운로드 하고 캄보디아어를 사용해도 NanumSquareR.woff(3MB) 파일을 다운로드 하기 때문입니다. unicode-range를 사용하지 않는 것과 같습니다.
그래서 폰트 파일도 나누어야 합니다. 위의 코드를 보면 아랍어에 해당하는 유니코드에는 NanumSquareR-Arab.woff(14KB), 캄보디아어에 해당하는 유니코드에는 NanumSquareR-Cambodia.woff(7KB)를 url에 적용했습니다. 그래서 아랍어를 사용하는 곳에서는 NanumSquareR-Arab.woff(14KB)만 다운로드하고 캄보디아어를 사용하는 곳에서는 NanumSquareR-Cambodia.woff(7KB)만 다운로드 하게 됩니다.
NanumSquareR.woff(3MB)를 다운로드 하는 것 보다 많은 용량을 줄일 수 있습니다.
3. 브라우저별 대응 방법
위 그림을 보면 브라우저마다 지원하는 파일종류가 다르다는 것을 알 수 있습니다. EOT는 IE 브라우저만 지원을 하고 WOFF는 모든 브라우저에서 지원을 합니다. 그래서 모든 브라우저에서 웹폰트를 사용하려면 src 속성에 코드를 추가해야 합니다.
WOFF나 TTF 포맷을 지원하지 않던 몇몇 구 버전 모바일 웹 브라우저(예를들어 Safari 4.3 이하, Android 4.3 이하, Opera Mobile 10 이하 등)들을 위해 CSS2에서 폰트로 활용할 수 있도록 명시 된 SVG(Scalable Vector Graphics) 포맷을 이용하기도 합니다.
SVG 포맷의 서체는 하나의 파일 안에 여러 서체를 넣고 ID(ex. #NanumGothicRegular)를 부여하여 개별적으로 호출 할 수 있고, SVG Viewer가 탑재된 모든 기기에서 표현 할 수 있는 장점이 있지만, 서체에 대한 폰트 힌팅 정보가 없기 때문에 작은 글씨를 표현할 때 가독성이 떨어지는 단점도 있습니다.
@font-face { font-family: NanumSquareWeb; src: url(NanumSquareR.eot); /* IE 호환성 보기 */ src: url(NanumSquareR.eot#iefix) format(’embedded-opentype’), /* IE 6 ~ 8 */ url(NanumSquareR.woff) format(‘woff’), /* 모던 브라우저 */ url(NanumSquareR.ttf) format(‘truetype’), url(NanumSquareR.svg#NanumSquareR) format(‘svg’); /* 구 모바일 브라우저 */ }
힌팅이란?
윤관선 글자 정보에 약간의 힌트(hint)를 주어 폰트를 비트맵으로 변환할 때 그 힌트를 이용하여 글자의 변형이나 왜곡 없이 더 나은 출력 결과를 얻게 만든다는 의미에서 붙여진 용어 입니다. 즉, 모니터상에서 글씨가 보다 뚜렷하게 보이게끔 글자 스스로 약간 글모양을 변형시키는 기술 입니다.
첫번째 줄 ‘활’은 힌팅이 적용되지 않은 폰트인데 확대했을 때 깨져 보이는 부분이 있지만 두번째 줄 ‘활’은 힌팅이 적용되어있고 확대 했을 때 깨짐이 덜합니다.
3-4. WOFF2 지원 브라우저
WOFF1 버전에 비해 평균 30%정도 압축 형식을 제공(경우에 따라 최대 50%)하는 WOFF2를 추가합니다.
@font-face { font-family: NanumSquareWeb; src: url(NanumSquareR.eot); /* IE 호환성 보기 */ src: url(NanumSquareR.eot#iefix) format(’embedded-opentype’), /* IE 6 ~ 8 */ url(NanumSquareR.woff2) format(‘woff2’), /* WOFF2 지원 브라우저 */ url(NanumSquareR.woff) format(‘woff’), /* 모던 브라우저 */ url(NanumSquareR.ttf) format(‘truetype’), url(NanumSquareR.svg#NanumSquareR) format(‘svg’); /* 구 모바일 브라우저 */ }
3-5. 정리
현재 뮤직 서비스에서 사용하고 있는 코드 입니다.(구버전 모바일 브라우저 대응을 위한 SVG는 삭제되었습니다)
IE 6~8 로 접근하면 NanumSquareR.eot? 가 다운로드 됩니다. IE 호환성 보기 로 접근하면 NanumSquareR.eot 가 다운로드 됩니다. IE 9이상 으로 접근하면 NanumSquareR.eot? 가 다운로드 됩니다. 만약 url(../webfont/NanumSquare/NanumSquareR.eot?#iefix) format(’embedded-opentype’) 부분을 local(“☺”) 로 바꾸면 NanumSquareR.woff가 다운로드 됩니다. Safari 로 접근할 때는 NanumSquareR.woff가 다운로드 됩니다. Chrome, firefox, opera 로 접근할 때는 NanumSquareR.woff2가 다운로드 됩니다.
아래의 코드는 모든 브라우저를 대응하고 IE에서 eot 파일이 아닌 woff 파일을 로드받을 수 있게 하는 코드입니다.
서버에 직접 업로드하는 경우는 css에 @font-face를 직접 선언해 주어야 합니다. 폰트의 종류가 많을 수록 @font-face를 많이 선언해야 해서 복잡하지만 기준브라우저에 따라 코드를 추가, 삭제 할 수 있습니다. 그리고 다른 CDN을 이용하는 것 보다 속도가 빠르고 안전합니다.
구글 CDN을 이용하면 별도의 @font-face를 정의하지 않아도 되기 때문에 편리하지만 서버에 직접 업로드하는 것보다 속도가 느리고 구글 CDN 서버가 제대로 동작하지 않을 때는 웹폰트를 제공받지 못 할 수 있습니다. 구글 CDN의 경우 @font-face에 WOFF와 WOFF2만 지원하므로 IE 6~8, IE 호환성 보기 모드에서는 웹폰트를 사용할 수 없습니다.
그래서 서버가 있으면 직접 서버에 업로드하여 사용하는 것이 좋습니다.
4-3. 로컬 서버 vs 구글 웹폰트 로드 차이
예상했던 대로 로컬서버에서 파일을 로드하는게 더 빠릅니다.
로컬서버에서 불러올 때:
구글에서 불러올 때:
하지만 티스토리와 같이 폰트를 서버에서 올릴 수 없을 경우 구글 웹폰트를 로드해서 사용할 수 있습니다.
5. 웹폰트를 사용하지 않는 이유
웹폰트를 사용하지 않는 이유는 두 가지가 있습니다. 첫번째는 IE 브라우저에서 폰트 로드가 완료되면 깜빡거리는 현상인 FOUT 때문이고 두번째는 웹폰트 용량에 따른 성능 문제입니다.
FOUT현상과 함께 IE 외 다른 브라우저(Chrome, Safari 등)에서 나타나는 현상인 FOIT, 스크립트로 임의로 만든 FOFT 현상을 같이 알아보고 FOUT현상을 다른 현상으로 바꾸는 방법을 알아보겠습니다.
5-1. FOUT / FOIT / FOFT
5-1-1. FOUT(Flash of Unstyled Text)
FOUT란? 웹 폰트 파일이 로드되기 전 까지 기본서체가 노출되다가 웹 폰트 로드가 완료되면 웹폰트로 바뀌면서 깜빡이는 현상 입니다. FOUC(Flash of Unstyled Content)라고 불리기도 합니다. IE 브라우저에서 발생합니다.
5-1-2. FOIT(Flash of Invisible Text)
FOIT란? 웹 폰트 파일이 로드되기 전 까지 웹 페이지를 로드하지 않고 웹폰트 로드가 완료되면 웹 페이지를 로드하기 때문에 로드가 완료되기 전 까지 텍스트가 안보이는 현상 입니다. IE 브라우저를 제외한 나머지 브라우저(Chrome, Safari 등)에서 발생합니다.
5-1-3. FOFT(Flash of Faux Text)
FOFT란? 웹 폰트 파일에 font-weight, font-style과 관련된 서체가 있을 시 로드 전 브라우저에서 임의로 서체의 굵기와 스타일을 생성하여 노출하고 웹폰트 로드가 완료되면 웹 폰트로 바뀌는 현상입니다. 이는 스크립트로 만들어진 현상으로 시스템글꼴 → 웹 폰트 Regular → 웹 폰트 Bold 순으로 바뀝니다.
언뜻보면 화면이 두번 깜빡이기 때문에 FOUT보다 안 좋아 보입니다. 그런데 왜 FOFT라는 현상을 스크립트로 만들었을까요? 그 이유는 웹 폰트의 종류가 많을 경우 첫 폰트를 빠르게 보여주기 위해서 입니다.
FOUT와 FOIT는 나눔스퀘어 Regular와 나눔스퀘어 Bold 웹 폰트를 사용할 때 두 웹 폰트를 동시에 다운로드 하게 됩니다. 두 폰트가 동시에 다운로드 되기 때문에 다운로드가 완료되어 웹 폰트 적용 시점은 30초 이후입니다.
하지만 FOFT는 나눔스퀘어 Regular와 나눔스퀘어 Bold 웹 폰트를 사용할 때 나눔스퀘어 Regular 먼저 다운로드 하고 나눔스퀘어 Bold를 다운로드 합니다. 그래서 나눔스퀘어가 Regular가 23초 쯤에 다운로드가 완료되어 먼저 적용되고 나눔스퀘어 Bold는 30초 이후에 적용됩니다.
5-1-4. Google Webfont Loader
구글에서 제공하는 Google Webfont Loader를 사용하면 위 3가지 현상을 자유롭게 바꿀 수 있습니다.
위의 스크립트를 적용하면 해당 웹 폰트를 추적하면서 자동으로 html 에 아래의 클래스가 적용됩니다.
폰트패밀리는 @font-face에서 선언한 폰트 패밀리명이고 스타일 굵기는 알파벳 n에 @font-face에서 선언한 font-weight 의 백의자리 수를 합친 값 입니다.
wf-loading: 1개 이상 폰트가 로딩 중
wf-active: 1개 이상 폰트 사용 가능
wf-inactive: 모든 폰트 사용 불가능
wf-폰트패밀리-스타일굵기-loading: 특정 폰트 로딩 중
wf-폰트패밀리-스타일굵기-active: 특정 폰트 사용 가능
wf-폰트패밀리-스타일굵기-inactive: 특정 폰트 사용 불가능
예를 들어, 나눔스퀘어 Regular와 나눔스퀘어 Bold 웹 폰트를 Google Webfont Loader를 통해 적용했다고 하면 wf-active wf-nanumsquare-n4-active wf-nanumsquare-n7-active 클래스가 html 에 추가 될 것 입니다.
실제로 이미지 폰트를 많이 사용하지 않는 경우에는 웹 폰트를 사용하는 것보다 이미지 폰트를 사용하는 것이 좋습니다.
이미지폰트 적용 페이지: 이미지 용량 136KB
웹폰트 적용 페이지: 웹폰트 용량 273KB
웹 폰트를 적용했을 때 137KB정도 용량이 더 크지만, 웹 폰트, 이미지 폰트 모두 사이트에 한 번 접속하면 캐시에 저장되고 이후에 접속할 때 마다 캐시에서 불러와 사용합니다. 그러므로 이미지폰트를 여러 페이지에 사용할 경우 이미지 폰트보다 웹 폰트를 사용하는 것이 효율적입니다.
예를 들어 아래 동선과 같이 여러 페이지를 이동한다고 가정했을 때를 비교해보겠습니다.
뮤직홈 → 이용권 구매 → 알뜰 이용권 자세히 보기
웹 폰트 적용환경 사용자A는 뮤직홈에 처음 접속했을 때 웹폰트가 다운받아지고 캐시에 저장됩니다. 이 후 이용권 구매, 알뜰 이용권 자세히 보기 페이지에서는 캐시에 저장된 웹폰트를 불러 사용합니다.
이미지 폰트 적용환경 사용자B는 뮤직홈, 이용권 구매, 알뜰 이용권 자세히 보기 에서 이미지파일 136KB를 받기 때문에 총 408KB를 다운받게 됩니다.
이미지 폰트도 캐시를 이용하지만 각 페이지에서 사용한 이미지가 모두 다른 파일이기 때문입니다.(모두 같은 이미지 파일에 저장하게되면 이미지 용량이 너무 커지게 됩니다.)
6. 웹폰트를 빠르게 로드하는 방법
6-1. data-uri
폰트도 이미지 처럼 URI로 표현할 수 있습니다. 윈도우 사용자 분들은 Webfont Generator, MAC OS 사용자 분들은 터미널에서 base64 폰트.woff -b 0 > 폰트.base64.txt 명령어를 통해 쉽게 만들 수 있습니다.
파일이 하나이다보니 HTTP 헤더정보나 TCP 패킷 크기가 맞지 않아서 발생하는 오버헤드가 발생하지 않습니다.
용량이 작을 때 리퀘스트 수를 줄여서 빠르게 전송할 수 있습니다.
단점
캐싱을 하지 않아 별도의 캐싱 정책을 주어야 합니다.
IE7 이하에서는 data-uri를 지원하지 않고 IE8 이하에서는 어느정도 크기 이상이면 로드하지 못합니다.
큰 데이터를 data-uri로 사용하면 오히려 더 느려집니다.
6-1-3. data-uri vs url
웹 폰트를 uri 값으로 적용했을 때와 url로 적용했을 때 파일크기와 다운로드 완료 시간을 비교 해 보았습니다.
(Droid Sans는 영문 폰트, 나눔스퀘어는 한글 2,350자, 나눔바른고딕은 한글 11,172자, 본고딕은 모든 한글이 다 들어있는 폰트입니다.)
파일크기는 영문, 한글 폰트 모두 url로 적용했을 경우 더 작았고 다운로드 완료 시간은 영문 폰트일 경우에는 uri가 빨랐고 한글 폰트일 경우 url이 더 빨랐습니다. 웹 폰트로 영문 폰트를 사용할 경우에는 uri로 적용해 보는 것도 좋을 것 같습니다.
6-2. preload
브라우저에게 리소스가 필요할 것이라고 알려주는 힌트입니다. 하지만 리소스를 로드하는것이 좋을지 안 좋을지는 브라우저가 결정합니다.
6-2-1. 사용방법
속성중에서 as와 crossorigin이 있는데 preload를 사용할 경우에는 반드시 사용해 주어야 합니다. 만약 사용하지 않으면 같은 파일을 두번 요청하게 됩니다.
* prefetch와 preload는 다른 속성입니다. preload는 현재 페이지에서 사용되어질 가능성이 높은 리소스(웹 폰트, 주요 이미지)를 필요로 할 때 사용하고 prefetch는 향후 이동에서 사용할 리소스(css)를 필요로 할 때 사용합니다. 그러므로 웹 폰트를 사용할 때에는 preload를 사용하셔야 합니다.
6-2-2. 지원범위
Chrome, Opera, Android에서만 사용할 수 있습니다.
6-3. 서브셋
원하는 문자만 사용해서 폰트 크기를 줄이는 방법 입니다. 왼쪽은 한글 11,172자인 나눔바른고딕이고 오른쪽은 서브셋을 통해 한글 2,350자로 줄인 나눔바른고딕입니다. 갃, 갅, 갆 등과 같은 문자는 사용할 수 없지만 용량이 약 2MB 정도 줄었습니다.
6-3-1. 사용방법
서브셋 폰트 메이커를 이용하여 쉽게 만들 수 있습니다.
PC에서 폰트 파일을 선택합니다. 서브셋이 완료된 폰트를 저장할 경로를 선택합니다. 사용 할 문자를 적습니다. 폰트패밀리명을 적습니다. WOFF 컨버터를 실행할지 선택합니다. WOFF 컨버터를 실행하지 않으려면 체크를 해제해도 됩니다. 변환합니다.
7. 구글 웹폰트를 빠르게 로드하는 팁
HEAD 파일에서 CSS보다 더 빠르게 로드 해야 합니다.
참조링크를 사용합니다.
– 가져다 사용하는 경우는 css내에서 @import방법, 참조링크를 사용하는 방법, 자바스크립트를 이용하는방법 3가지가 있는데 참조링크를 이용하면 HTML의 최상위에 코드를 넣을 수 있으며, CSS 파일보다 더 빠르게 로드될 수 있습니다. @import 코드는 CSS 파일안에 넣어야 하는데 이는 스타일 되지 않은 텍스트가 번쩍거리는 현상을 일으킬 수 있습니다.(flash of unstyled text:FOUT)
적은 폰트를 로드 해야 합니다.
표제를 위한 볼드타입과 기사를 위한 가독성이 좋은 폰트(최대 2개의 폰트)를 선정하는 것이 좋습니다.
– 폰트는 많을 수록 로딩 시간이 더 길어집니다.
폰트 로드 코드를 결합해서 사용합니다.
– 코드 한 줄에 여러 구글 폰트를 로드할 수 있습니다. 로드하려는 각 폰트마다 한 줄 코드를 넣을 필요가 없습니다. Open Sans와 Oswald 폰트를 사용하고 싶으면 아래 처럼 한 줄에 적으면 좋습니다.
Google Fonts 사이트에서 바로 폰트파일과 CSS 정의부분을 링크할 수 있으니까요.
fonts.google.com
저 사이트에서 원하는 폰트를 고르신 다음
HTML에 첨부하고 싶다면 로 시작되는 부분을 복붙하시면 되고,
CSS에 첨부하고 싶다면 @import 로 시작되는 부분을 CSS 맨 위에 복붙하시면 됩니다.
구글이 호스팅해주는 폰트가 미리 정의된 CSS 파일을 가져다 쓰는 것이라
내 사이트의 트래픽을 절약할 수 있다는게 장점이고
크롬브라우저는 이미 방문한 사이트는 캐싱해주기 때문에 많은 사람들이 이용할 수록 더 빠르게 폰트를 이용할 수 있습니다.
폰트 Anti-aliasing 에 대해
여러분 맥으로 웹개발하시면 폰트 뭘 쓰든 이쁘게 보일겁니다.
심지어 굴림, 돋움 같은 기본 폰트도 앤티앨리어싱이 되어서 부드럽게 나옵니다.
앤티앨리어싱이 뭐냐면 그 픽셀의 각진 부분을 스무스하게 바꿔주는건데
▲ 오른쪽이 안티앨리어싱 적용했을 때의 선입니다. 훨씬 부드러워보이죠?
맥 OS쓰시면 저렇게 알아서 해주지만 윈도우는 전혀 아닙니다.
윈도우에서 돋움, 굴림 폰트를 매우 작게 축소하거나 아니면 매우 크게 확대했을 때 매우 각져보입니다.
돋움, 굴림 뿐만 아니라 대부분의 폰트가 저런 현상이 일어납니다.
디자인 잘하는 사람 입장에선 매우 거슬리는 문제인데
이 문제를 해결하고 싶다면 웹상의 글자를 살짝 돌려보십시오.
transform : rotate(0.04deg);
CSS파일에다가 이거 쓰라는겁니다.
transform 어쩌구는 나중에 배울텐데 요소를 살짝 회전시키는 스타일입니다.
글자를 정말 매우 살짝 회전시키면 윈도우에선 안티앨리어싱 된 듯한 느낌을 줍니다. 부드러워짐
웹사이트에 구글 웹폰트 적용하기
반응형
예전에 비해 근래는 무료 웹폰트를 적용하기에 좋은 시절입니다. 예전에는 웹폰트 하나 적용하려면 지식도 많이 필요했고 폰트라이선스도 구매했었어야 했습니다.
하지만 지금은 무료로 제공되는 웹폰트도 많고 구글에서도 무료 웹폰트를 온라인으로 서비스하고 있어서 쉽게 적용 할 수 있습니다.
구글폰트에서 웹폰트 확인 및 코드 획득하기
먼저 구글 폰트 웹사이트에 접속합니다.
구글폰트 웹사이트에 접속합니다. 한글 폰트를 적용하기 위해서 Language 선택에서 Korean 을 선택합니다.
폰트리스트 중 사용하기 원하는 폰트를 선택합니다. 선택된 폰트는 우하단에 저장됩니다. + 버튼을 클릭하면 장바구니에 저장됩니다.
폰트 용량 자체가 크기 떄문에 폰트 굵기 종류가 1개 추가 될 때마다 용량이 많이 증가하기 떄문에 꼭 필요한 폰트만 선택해야 합니다.
상단 탭에서 CUSTOMIZE을 선택합니다. 선택된 2개의 폰트 중 Nanum Myeongjo에 대해서 폰트 굵기에 대해서 선택합니다. 선택된 2개의 폰트 중 Nanum Gothic에 대해서 폰트 굵기에 대해서 선택합니다. Korean 폰트를 선택합니다.
이제 웹사이트에 적용하기 위한 코드를 확인 합니다.
EMBED 탭을 선택합니다. STANDARD 탭을 선택하면… STANDARD : HTML의
영역에 형태로 적용하기 위한 코드를 제공합니다. @IMPORT 탭을 선택하면… @IMPORT : Style 영역에 @import url() 형태로 적용하기 위한 코드를 제공합니다. 실제로 적용하고자 하는 곳에 작성 할 font-family 코드를 제공해 줍니다.
구글폰트 웹사이트에서 획득할 수 있는 정보는 여기까지 이고 이제 내 웹사이트에 적용하는 방법을 설명하도록 하겠습니다.
내 웹사이트에 적용하기
내 웹사이트에는 과 2가지 종류의 파일이 있을 것입니다.
적용하는 방법은 에 적용하는 방법과 Style(CSS) 에 적용하는 방법이 있습니다.
HTML에 적용하기
첫번째 인 STANDARD로 적용하는 방법은 HTML의
영역에 형태로 적용하는 방법입니다.
CSS
역사를 되려니와, 천하를 인간은 따뜻한 넣는 이상의 그들의 있는 봄바람이다. 무엇을 일월과 위하여, 힘있다. 희망의 투명하되 같은 찾아다녀도, 있는 피에 꽃 스며들어 황금시대다. 가치를 그들은 인간이 아니더면, 영원히 것이다. 무엇을 능히 힘차게 철환하였는가? 소리다.이것은 곳으로 같은 것은 봄날의 되려니와, 들어 불어 오아이스도 있으랴? 있음으로써 지혜는 힘차게 뛰노는 곳이 피부가 봄바람이다. 할지라도 많이 행복스럽고 얼음 보배를 물방아 것이다. 봄날의 옷을 얼마나 그들은 것이다.
위 의 코드처럼..
를
영역 안에 적용합니다.
그리고 해당 폰트를 적용하고 싶은 Style에 font-family: “Nanum Gothic”, sans-serif; 이렇게 적용을 하면 됩니다.
CSS에 적용하기
보통 웹사이트를 디자인 할 떄 style 을 css 파일로 별도로 분리하여 저장하고 HTML 에서 불러와 사용하는 경우가 많습니다.
CSS
역사를 되려니와, 천하를 인간은 따뜻한 넣는 이상의 그들의 있는 봄바람이다. 무엇을 일월과 위하여, 힘있다. 희망의 투명하되 같은 찾아다녀도, 있는 피에 꽃 스며들어 황금시대다. 가치를 그들은 인간이 아니더면, 영원히 것이다. 무엇을 능히 힘차게 철환하였는가? 소리다.이것은 곳으로 같은 것은 봄날의 되려니와, 들어 불어 오아이스도 있으랴? 있음으로써 지혜는 힘차게 뛰노는 곳이 피부가 봄바람이다. 할지라도 많이 행복스럽고 얼음 보배를 물방아 것이다. 봄날의 옷을 얼마나 그들은 것이다.
CSS를 별로로 운영하기 위해 style파일을 link로 연결을 시켜놓습니다.
./style.css 파일
아래는 style.css 파일의 내용입니다.
@import url(‘https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo&display=swap&subset=korean’); body { font-family: ‘Nanum Myeongjo’, serif; } p { font-family: ‘Nanum Gothic’, sans-serif; }
나머지 적용하는 것은 HTML에 적용하는 것과 마찬가지로 font-family: “Nanum Gothic”, sans-serif; 이렇게 적용을 하면 됩니다.
적용확인하기
이제 브라우저로 적용된 화면을 보시면 됩니다.
에 적용한 명조체인 ‘Nanum Myeongjo’, serif; 가 반영된 것을 확인 할 수 있습니다.
728×90
Web Club :: Web Font
Font(서체)의 사용
좀 더 흥미진진한 웹 사이트를 만들고 싶을 때 첫 번째로 고려하게 되는 것은, 표제어나 단락 등, 페이지를 구성하는 각 요소에 서로 다른 서체를 지정하는 것입니다.
최근의 모든 브라우저들은 웹 서체(Web Font)라는 것을 지원하며 사이트를 볼 때 다운되는 서체를 웹 폰트라고 합니다.
웹 폰트 또한 font-family 속성을 사용하지만, @font-face 지시어(directive)라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드할 것을 알리면서 사용할 수 있습니다.
사용자는 이미 검증된 서체만 사용하는 방법을 택할 수도 있고(대부분의 컴퓨터에 설체된 기본 서체만 사용하는 방법), 아니면 웹 폰트를 사용해 더 많은 폰트 가운데 하나를 골라 쓰는 방법을 택할 수도 있습니다.(일은 더 많아지겠지만..)
이 가운데 어떠한 한 방법에 얽매일 필요는 없습니다. 일반적으로 두 방법을 함께 사용하고 있으며 어떤 경우에는 표준 폰트들을 사용(페이지의 주된 텍스트가 들어가는 부분)하고, 어떤 부분에는 웹 폰트(가령, 시선을 끄는 표제어를 만들어야 하는 경우)를 사용하는 것입니다.
우리 나라의 한글 폰트는 아쉽게도 글자 수가 많아 웹 폰트 도입이 활발하지는 않지만 외국에서는 Google Web Fonts 서비스와 Typekit, Cufon 등과 같은 관련 서비스가 활성화 되어 있습니다.
그리고 국내에선 모빌리스 웹폰트가 가장 많은 글꼴 서비스를 하는 것 같습니다.
font-family
font-family 속성을 사용해 서체를 지정하더라도, 방문자가 반드시 지정한 서체로 표시되는 페이지를 보게 되리라는 보장은 없습니다. 해당 폰트는 방문자의 컴퓨터에 이미 설치된 상태이거나, 웹 폰트의 경우라면 사이트의 방문과 함께 임시로 다운된 상태여야 합니다.
그래서 일반적으로 웹 폰트를 사용할 때는 웹 사이트의 서버에 올려놓고 사용하는 경우가 많습니다.
아무튼 여러분이 선호하는 서체를 방문자가 사용할 수 있으라는 보장이 없기 때문에, 주요 서체가 없을 경우 사용할 대안 폰트까지 명시하는 것이 일반적인 관습입니다.
font-family 에 명시한 첫 번째 서체가 컴퓨터에 없는 경우, 브라우저는 사용 가능한 서체를 발견할 때 까지 font-family 에 지정된 폰트 목록을 훑어 나갑니다. 따라서 대부분의 운영체제에 기본 설치되는 유사 서체 목록을 다음과 같이 지정해서 사용하곤 합니다.
css
body { font-family: ‘Times New Roman’, Times, Arial, Helvetica, sans-serif; }
위의 코드와 같은 경우는 웹 브라우저의 Times New Roman 폰트가 설치되어 있는지 살피고 있는 경우에는 해당 폰트를 사용한다. 설치되어 있지 않다면 그 다음 폰트, 그 다음 폰트를 훑어 나가게 됩니다.
또한 Time New Roman 폰트와 같이 서체 이름이 하나 이상의 단어로 구성되어 있다면 따옴표로 둘러 싸야 합니다.
웹 폰트(Web Font)의 사용
CSS에서 폰트를 사용하는 전통적인 방식은 직관적입니다.
웹 폰트를 위해 사용하는 CSS 코드는 매우 간단하며, 두 개의 CSS 명령어만이 필요합니다.
@font-face 지시어는 웹 브라우저에게 서체 이름과 다운받을 위치를 알려줍니다. 이 명령어의 동작 방식은 뒤에서 살펴봅니다.
지시어는 웹 브라우저에게 서체 이름과 다운받을 위치를 알려줍니다. 이 명령어의 동작 방식은 뒤에서 살펴봅니다. font-family 속성의 사용법은 위에서 언급한 일반 폰트의 사용법과 같습니다. 일단 @font-face 를 사용해 브라우저에게 서체를 다운받으라 알린 다음에는, 어느 CSS에서도 일반 폰트와 동일하게 font-family를 통해 사용할 수 있게 됩니다.
Font Type(폰트 파일 유형)
믿거나 말거나지만, IE는 웹 폰트를 IE5 시절부터 지원해 왔습니다. 하지만 불행히도, 독특하고 까다로운 방법을 동원해 서체와 서식을 지정해야 합니다.
즉, 해당 폰트를 EOT(Embedded Open Type) 파일로 변환해야 합니다.(IE8에 이르러서도, 여전히 그렇다..)
웹 폰트에 사용되는 파일 타입은 이것 이외에도 다양하고 그 중 몇몇은 지원되는 브라우저의 제한이 있습니다.
아래에 폰트 파일 유형(타입)과 지원 브라우저 정보를 요약하였습니다.
EOT(Embedd ed Open Type) : IE에서만 통용됩니다. 일반 폰트 파일을 EOT로 변환하려면 특별한 도구가 필요합니다.
: IE에서만 통용됩니다. 일반 폰트 파일을 EOT로 변환하려면 특별한 도구가 필요합니다. TrueType과 OpenType : 컴퓨터의 Fonts 폴더를 열어보면 . ttf (TrueType format)와 . otf (OpenType format) 서체 파일들이 보일 것입니다. 대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식입니다. 웹 페이지 뿐만 아니라, 워드 프로세싱이나 전자출판에도 사용할 수 있습니다. 이런 유형의 서체 파일은 대부분의 브라우저가 지원하며 IE9를 포함한 최신 버전의 IE, 크롬, 파이어폭스, 사파리, 오페라, iOS 사파리(4.2+), 그리고 블랙베리 브라우저 등이 여기에 해당합니다.
: 컴퓨터의 Fonts 폴더를 열어보면 . (TrueType format)와 . (OpenType format) 서체 파일들이 보일 것입니다. 대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식입니다. 웹 페이지 뿐만 아니라, 워드 프로세싱이나 전자출판에도 사용할 수 있습니다. 이런 유형의 서체 파일은 대부분의 브라우저가 지원하며 IE9를 포함한 최신 버전의 IE, 크롬, 파이어폭스, 사파리, 오페라, iOS 사파리(4.2+), 그리고 블랙베리 브라우저 등이 여기에 해당합니다. WOFF(Web Open Font Format) : 이 파일은 웹을 주된 대상으로 설계된 파일 형식입니다. WOFF 서체는 기본적으로 TrueType이나 OpenType 서체를 압축한 것이기 때문에 일반적으로 파일 크기가 작아서, 다른 서체보다 신속히 다운로드됩니다. WOFF 파일은 다양한 브라우저 제조사의 지지도 받고 있어서 IE9 를 비롯한 모던 브라우저와 iOS 사파리(5+)에서 지원하고 있습니다. 하지만 안드로이드 진영에서 이 파일을 지원하지 않고 있어서 안드로이드 기기나 IE8 사용자는 서체를 다운받거나 표시할 수 없습니다.
: 이 파일은 웹을 주된 대상으로 설계된 파일 형식입니다. WOFF 서체는 기본적으로 TrueType이나 OpenType 서체를 압축한 것이기 때문에 일반적으로 파일 크기가 작아서, 다른 서체보다 신속히 다운로드됩니다. WOFF 파일은 다양한 브라우저 제조사의 지지도 받고 있어서 IE9 를 비롯한 모던 브라우저와 iOS 사파리(5+)에서 지원하고 있습니다. 하지만 안드로이드 진영에서 이 파일을 지원하지 않고 있어서 안드로이드 기기나 IE8 사용자는 서체를 다운받거나 표시할 수 없습니다. SVG(Scalable Vector Graphic) : 이 파일은 사실 서체 파일은 아닙니다. SVG는 사실 벡터 그래픽(확대해도 품질이 유지되는 이미지를 만드는 기술)을 위한 파일입니다. SVG 폰트를 지원하는 브라우저는 매우 제한적으로 IE, FF는 지원하지 않는다. SVG의 또 한가지 문제는 파일 크기가 TrueType의 거의 두 배, WOFF 파일의 거의 세 배에 달한다는 것입니다. SVG를 사용해 얻을 수 있는 진정한 이득은, iOS 사파라 4.1 이전 버전에서 인식하는 유일한 웹 폰트 타입이라는 것입니다.
다양한 폰트 파일 생성(변환)하기
가능한 한 많은 브라우저가 사용할 수 있도록 폰트를 제공하려면 사용자는 적어도 EOT, WOFF 그리고 Truetype 서체는 제공해야 합니다.
Font Squirrel 사이트에는 원하는 서체 파일을 만들 수 있도록 웹 기반 도구가 있습니다.
이 사이트의 메뉴 중 Generator 가 있는데, 이 도구를 사용하면 서체 파일 뿐 아니라 HTML 파일 예제와 기본적인 CSS 스타일시트도 만들 수 있습니다.
@font-face Generator 사용 방법
.ttf 서체나 .otf 의 사용하고자 하는 웹 폰트(웹 서체로 사용해도 좋다라는 라이센스를 가진)를 찾는다. 위 사이트의 Generator 메뉴에서 UPLOAD FONTS를 클릭 후 사용하고자 하는 서체 파일을 업로드한다. Coversion option
Basic : 서체를 EOT, WOFF, SVG 타입으로 변환한다.
Optimal : 파일 변환뿐만 아니라 서체의 성능과 속도를 향상시키는 개선 작업도 하기 때문에 좋은 옵션 항목이다.
Expert : 변환에 관계된 모든 세부사항을 조정할 수 있도록 하는 옵션. 서체의 일부만을 변환할 수도 있다.(즉, 선택한 글자만 포함되도록 할 수 있다) 다시 말해서 사용하지 않는 글자들(가령, 세미콜론 기호나 느낌표, Q같은 일반 문자까지도)이 있다면, 서체 파일에서 생략할 수 있다.
모든 글자를 다 사용할 것 같다면 Optimal을 선택하는 것이 가장 좋습니다.
웹 폰트에 관한 법적 문제들
웹 서체를 사용하려면 법적인 문제도 해결해야 합니다. 소프트웨어와 마찬가지로 다양한 개인과 법인 사업자가 서페를 만들어 판매하고 있으며 웹 서버에 TrueType 서체를 올려서 방문자가 페이지를 볼 때 이용할 수 있도록 할 때에는 누구라도 해당 서체를 다운받아 자기 웹 사이트나 워드 프로세싱 프로그램에서 활용할 수 있음을 기억해야 합니다.
대부분의 폰트 제조업체들은 웹에서 사용을 금지하는 라이센스 정책을 취하고 있기 때문에 Adobe로부터 구매한 서체라 하더라도 아무런 조치 없이 웹에서 사용할 수는 없습니다. 그러려면 다른 종류의 라이센스를 다른 가격에 구매해야 합니다.
컴퓨터에 설치되는 프로그램에 사용하는 것은 혀용되지만, 해당 폰트를 웹 서버에 올려 웹 폰트로 사용하는 것은 허용되지 않을 수도 있습니다.
웹에서 사용하는 것이 허용되는지 모르겠다면, 사용을 포기하고 웹에서 쓸 수 있는 서체를 찾아보는 것이 좋습니다.
서체에 관한 법적 문제를 피하려면 Google Fonts 같은 서체 서비스나 TypeKit 같은 Adobe의 상업적 웹 폰트 서비스를 이용하는 것이 좋습니다. 폰트 서비스는 상단 링크를 참조하세요.
@font-face 지시어의 사용 방법
필요한 서체 파일을 다운로드했다면 이제 실제로 사용해 볼 순서입니다.
우선, 여러분의 컴퓨터에 웹 사이트 파일을 보관하고 있는 위치로 파일들을 옮겨서 사아트 최상단 폴더 아래에 fonts라는 이름의 폴더(_fonts, webfonts 라는 이름도 많이 사용함)를 만듭니다.
원한다면 여러분이 CSS파일을 두는 폴더 안에 폰트 파일을 두어도 됩니다. 사실 폰트 파일을 여러분의 사이트 어디에 두느냐는 그다지 중요하지 않고 정리정돈을 잘 해두면 좋습니다.
/* IE 9 does not support @font-face within @media */ @media all and (min-width:768px) { @font-face{ font-family:ng; src:url(NanumGothic.eot); src:local(※), url(NanumGothic.woff) format(‘woff’) } body { font-family: 나눔고딕, NanumGothic, ng; } }
IE 6~8 브라우저는 미디어쿼리를 지원하지 않기때문에 Polyfill의 일종인 respond.js와 같은 라이브러리를 필요로 합니다.
jaehee's webclub
구글 웹폰트 적용하기 (HTML/CSS)
반응형
웹 폰트를 사용하면 웹 페이지에 접속하는 사람들에게 의도한대로 텍스트를 표시할 수 있게 합니다.
접속한 사용자들이 폰트가 없어도 웹 폰트가 적용되어있으면 폰트가 적용 된 텍스트를 볼 수 있게 합니다.
웹 사이트에 폰트를 적용할때 구글 웹 폰트에서 제공하는 무료 웹 폰트를 사용하면 별도의 다운로드 작업 없이 임포트 하여 사용할 수 있습니다.
구글 웹 폰트를 사용하려면 먼저 구글 폰트 페이지에서 원하는 폰트를 선택해야합니다.
구글 웹 폰트 HTML/CSS 적용하기
[먼저 구글 폰트 페이지로 이동합니다] → https://fonts.google.com/
[상단의 메뉴바 중에서 표시한 부분을 누르면 Korean 버튼으로 한글 폰트만 보이게 정리 할 수 있습니다] - 표시 되는 폰트 중에서 사용하고 싶은 폰트를 선택해서 들어가주세요
[선택 한 폰트를 확인하고 오른쪽에 표시한 "Select this style" 버튼을 눌러주세요] - 폰트의 상세 내용을 확인하고 우측 버튼을 누르면 오른쪽에 추가적인 창이 뜨게 됩니다. - 어떤 폰트들은 하나의 폰트 안에 여러가지의 스타일이 있을 수 있습니다. 그 중에서 사용하고 싶은 스타일을 고르면 됩니다.
[오른쪽에 추가적인 창이 뜨면 아래쪽에 @improt 체크박스에 체크하세요] - 체크 이후 아래에 나오는 코드를 그대로 복사하시면 됩니다.
