font-family

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

font-family 는 폰트의 종류를 지정합니다.

예제 1
개요 - 폰트 적용해 보기 (윈도우 기본포함 영문 폰트)
보기
Welcome To CSS 공작소 !!
font-family :
background-clip : border-box
설명

- 폰트를 적용하는 간단한 예제입니다.
- font-family : 폰트이름  으로 사용하면 됩니다.
- 폰트이름에 띄어쓰기가 있는경우 ', " 의 따옴표로 묶어 주면됩니다.
- 위 예제에서는 따옴표 없이도 되네요 ^^;

예제 2
폰트 우선 순위
보기
font-family : "맑은 고딕", 나눔고딕, 궁서
font-family : 나눔고딕, '맑은 고딕', 궁서
font-family : 궁서, '맑은 고딕', 나눔고딕
소스
<style type="text/css">
    .css_test {
        font-size : 18pt !important;
        height : 80px;
        line-height : 80px;
        text-align : center;
    }
</style>

<div class="css_test" style="font-family:'맑은 고딕', 나눔고딕, 궁서;">
    font-family : "맑은 고딕", 나눔고딕, 궁서
</div>
<div class="css_test" style="font-family:나눔고딕, '맑은 고딕', 궁서;">
    font-family : 나눔고딕, '맑은 고딕', 궁서
</div>
<div class="css_test" style="font-family:궁서, '맑은 고딕', 나눔고딕;">
    font-family : 궁서, '맑은 고딕', 나눔고딕
</div>
사용된 CSS (클릭시 보기) : font-familyfont-sizeheightline-heighttext-align
설명
- ,(컴마) 로 구분하여 쭉 나열하면 앞의 폰트 부터 우선순위 입니다.
- 컴마를 기준으로 맨 앞의 폰트가 사용자에게 없다면 다음 폰트 그것도 없다면 다음 폰트 이런 우선순위로 폰트를 사용합니다.
연구 1
폰트가 없더라도 적용되는 웹폰트를 사용해 보자 !! (구글 영문 웹폰트)
보기
Welcome To CSS World !!
Welcome To CSS World !!
Welcome To CSS World !!
Welcome To CSS World !!
소스
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script|Courgette' rel='stylesheet' type='text/css'>

<style type="text/css">
    .css_test {
        background : linear-gradient(to bottom, #f6f6f6, #ccc);
        border-radius : 20px;
        font-size : 25pt !important;
        height : 70px;
        line-height : 70px;
        margin-bottom : 10px;
        text-align : center;
        text-shadow : 2px 2px 0 white;
    }
</style>

<div class="css_test" style="font-family: 'Lobster', cursive;">Welcome To CSS World !!</div>
<div class="css_test" style="font-family: 'Indie Flower', cursive;">Welcome To CSS World !!</div>
<div class="css_test" style="font-family: 'Dancing Script', cursive;">Welcome To CSS World !!</div>
<div class="css_test" style="font-family: 'Courgette', cursive;">Welcome To CSS World !!</div>
설명
웹폰트는 무엇인가요?

아무리 이쁜 폰트라도 사용자가 가지고 있지 않다면 기본 폰트로 보입니다.
그렇다고 사용자에게 폰트를 다운로드 받으라고 강요할 수도 없겠죠.

그런데 그것을 해결할 수 있다면 얼마나 좋을까요?

바로 웹에서 바로 다운받아서 해당 폰트를 표시해 주는 웹폰트 라는것이 있습니다.
즉, CSS 로 설정만 하면 폰트가 없는 환경이라도 그 폰트를 볼 수 있는것이죠.

구글에서도 사용할 수 있도록 지원해 주고있습니다. 아쉽게도 영문폰트만 입니다.
한글 폰트는 어머 이건! 써야해 급의 서비스는 없는것 같습니다(?)

사용법도 간단하고 쉽습니다. 위 예제를 보세요. 쉽네요 ㅎㅎ


- 구글에서 제공하는 무료 웹폰트(영문) http://www.google.com/fonts/

- 오래전... 싸이월드 미니홈피에서 가독성이 좀 떨어지는 한글폰트를 보신 기억이 난다면 그게 웹폰트 입니다.
연구 2
아닙니다 ! 있네요 구글 한글폰트 (아직 비공식)
보기
CSS 공작소에 오신것을 환영합니다 !!
CSS 공작소에 오신것을 환영합니다 !!
CSS 공작소에 오신것을 환영합니다 !!
CSS 공작소에 오신것을 환영합니다 !!
소스
<style type="text/css">

    @import url(http://fonts.googleapis.com/earlyaccess/hanna.css);/* 한라 */
    @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);/* 제주고딕 */
    @import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);/* 제주한라산 */
    @import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);/* 제주명조 */

    .css_test {
        background : linear-gradient(to bottom, #f6f6f6, #ccc);
        border-radius : 20px;
        font-size : 20pt !important;
        margin-bottom : 10px;
        padding : 20px 0;
        text-align : center;
        text-shadow : 2px 2px 0 white;
    }
</style>

<div class="css_test" style="font-family: 'Hanna', serif;">CSS 공작소에 오신것을 환영합니다 !!</div>
<div class="css_test" style="font-family: 'Jeju Gothic', serif;">CSS 공작소에 오신것을 환영합니다 !!</div>
<div class="css_test" style="font-family: 'Jeju Hallasan', serif;">CSS 공작소에 오신것을 환영합니다 !!</div>
<div class="css_test" style="font-family: 'Jeju Myeongjo', serif;">CSS 공작소에 오신것을 환영합니다 !!</div>
설명

http://www.google.com/fonts/earlyaccess

위 주소에서 korean 으로 페이지를 검색하시면 됩니다.
그런데 폰트 컨셉이 제주도 군요. ^^;

글 작성일 기준 (15.02.23) 4개의 한글 폰트가 있습니다.

연구 3
실습 - 한글웹폰트 직접 타이핑 해보기
보기
font-family :
font-family : border-box
font-size :
font-size : 15pt
연구 4
웹폰트의 용량문제
설명
- 영문 폰트는 특성상 용량이 작습니다.
- 예제에서 사용한 한글 웹폰트 "제주명조" 는 약 1.4MB 의 용량입니다. (예제 폰트중 제일 큰 용량)
- 좀 큰 용량인데요. 한글 폰트는 특성상 용량이 큽니다.
- 폰트 용량은 웹폰트 사용시 고려 대상이 됩니다.
- 사용자 환경이 느리거나 모바일이라면 부담 될 수 있습니다. (물론 사용자는 모를 가능성이.. ^^;)
+ 관련 CSS +