HTML에 'SUITE' 폰트 삽입 및 Bold체 설정방법

 

HTML에서 SUITE 폰트 적용하는 방법

HTML에서 SUITE 폰트를 적용하는 방법을 알아보겠습니다.

1. 링크 방식

가장 간단한 방법은 <link> 태그를 사용하는 것입니다.

<https://cdn.jsdelivr.net/gh/sun-typeface/SUITE@2/fonts/static/woff2/SUITE.css" rel="stylesheet">
<style>
    body { font-family: 'SUITE', sans-serif; }
</style>

 

위 링크를 열어보면 아래와 같이 CSS안에 @font-face 가 서체별로 굵기에 맞게 적용되어 있음을 알 수 있습니다.

@font-face {
	font-family: 'SUITE';
	font-weight: 300;
	src: url('./SUITE-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 400;
	src: url('./SUITE-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 500;
	src: url('./SUITE-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 600;
	src: url('./SUITE-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 700;
	src: url('./SUITE-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 800;
	src: url('./SUITE-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 900;
	src: url('./SUITE-Heavy.woff2') format('woff2');
}

 

※출처: https://sun.fo/suite/

 

반응형

 

2. font-weight 값으로 확장폰트(Bold체) 설정방법

확장폰트(Bold체) 적용 방법은 위 내용을 참조로해서 font-weight값으로 설정해줄 수 있습니다..

body { 
    font-family: 'SUITE', sans-serif;
    font-weight:600; /*SUIT-SemiBold 적용*/
}

3. CSS에서 @import 방식

CSS 파일에서 @import를 사용하여 폰트를 불러올 수도 있습니다.

@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUITE@2/fonts/static/woff2/SUITE.css');

body {
    font-family: 'SUITE', sans-serif;
}

4. 폰트 파일 직접 다운로드

SUITE 폰트를 직접 다운로드하여 사용할 수도 있습니다.

1. SUITE 폰트 다운로드
2. 다운로드한 폰트 파일을 작업중인 폴더에 업로드한 후 경로를 맞춰줍니다.
3. CSS에서 @font-face로 적용

@font-face {
	font-family: 'SUITE';
	font-weight: 300;
	src: url('./SUITE-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 400;
	src: url('./SUITE-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 500;
	src: url('./SUITE-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 600;
	src: url('./SUITE-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 700;
	src: url('./SUITE-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 800;
	src: url('./SUITE-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUITE';
	font-weight: 900;
	src: url('./SUITE-Heavy.woff2') format('woff2');
}

body {
    font-family: 'SUITE', sans-serif;
}

5. 폰트 라이선스

SUITE―스위트는 Open Source입니다. SIL OFL에 따라 상업적인 목적을 포함하여 자유롭게 사용할 수 있습니다.또한 향후 License 변경으로 인한 분쟁의 가능성이 없습니다.