Web Site 화면에 폰트 적용 하기

1. 폰트 파일을 알맞은 경로에 넣어두고 프로젝트에 추가 한다.

 

2. 폰트 파일을 지정할 스타일시트(nanumSquareRound.css) 파일을 생성 한다.

@font-face {
    font-family: 'NanumSquareRound';
    src: url('fonts/NanumFontSetup_TTF_SQUARE_ROUND/NanumSquareRoundR.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NanumSquareRound';
    src: url('fonts/NanumFontSetup_TTF_SQUARE_ROUNDNanumSquareRoundB.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'NanumSquareRound';
    src: url('fonts/NanumFontSetup_TTF_SQUARE_ROUNDNanumSquareRoundL.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'NanumSquareRound';
    src: url('fonts/NanumFontSetup_TTF_SQUARE_ROUNDNanumSquareRoundEB.ttf') format('truetype');
    font-weight: 800; /* Extra Bold */
    font-style: normal;
}

 

3. Site에 적용 되는 스타일시트(Site.css)에 코딩

.regular {
    font-family: 'NanumSquareRound';
    font-weight: normal;
}

.bold {
    font-family: 'NanumSquareRound';
    font-weight: bold;
}

.light {
    font-family: 'NanumSquareRound';
    font-weight: 300;
}

.extra-bold {
    font-family: 'NanumSquareRound';
    font-weight: 800;
}

font-family는 같고 font-weight로 구분 합니다.

 

4. 헤더에 스타일시트 (nanumSquareRound.css, Site.css) 참조

 

5. 웹 화면에 적용

<div class="regular">Regular Text : 한글일때 확인</div>
<div class="bold">Bold Text : 한글일때 확인</div>
<div class="light">Light Text : 한글일때 확인</div>
<div class="extra-bold">Extra Bold Text : 한글일때 확인</div>