티스토리 뷰

CSS

CSS 셋팅 - 폰트 font 설정

Gayeong's 2022. 4. 17. 17:04

사용할 폰트 설정해두기

 

아래는 예시

/* 넥슨고딕 Lv1 */
@font-face {
    font-family: 'NexonLv1Gothic';
    font-weight: 300;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.ttf>') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.ttf>') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'NexonLv1Gothic';
    font-weight: 700;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.ttf>') format("truetype");
    font-display: swap;
}
/* 넥슨고딕 Lv2*/
@font-face {
    font-family: 'NexonLv2Gothic';
    font-weight: 300;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicLight.ttf>') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'NexonLv2Gothic';
    font-weight: 400;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicRegular.ttf>') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'NexonLv2Gothic';
    font-weight: 500;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicMedium.ttf>') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'NexonLv2Gothic';
    font-weight: 700;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/NexonLv2Gothic/NexonLv2GothicBold.ttf>') format("truetype");
    font-display: swap;
}
/* 지마켓산스 */
@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.ttf>') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.ttf>') format("truetype");
    font-display: swap;
} 
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-style: normal;
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot>');
    src: url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot?#iefix>') format('embedded-opentype'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2>') format('woff2'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff>') format('woff'),
         url('<https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf>') format("truetype");
    font-display: swap;
}

 

사용시 

font-family: '';

font-weight: ;

에 해당 폰트의 이름과 굵기를 입력

'CSS' 카테고리의 다른 글

[여기] 팝업 만들기  (0) 2022.04.17
탭메뉴 있는 [팝업] : 맥 CSS 만들기  (0) 2022.04.17
CSS 셋팅 - reset 설정 : 태그의 기본값 초기화  (0) 2022.04.17
CSS 셋팅 - 공통 common 설정  (0) 2022.04.17
CSS 선택자 공부할 때 추천 - [게임] CSS Speedrun  (0) 2022.02.06

UP NEXT : CSS

댓글
© 2018 webstoryboy