💅🏻 css

웹폰트

(｡θᗨθ｡) 2022. 3. 11. 15:28
  • 나눔스퀘어AC
  <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">

//font-weight로 굵기 조절하기 위해서,, 폰트 페이스 정리

@font-face {
  font-family: 'NanumSquareAC';
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acL.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acL.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acL.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acL.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
}


@font-face {
  font-family: 'NanumSquareAC';
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acR.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acR.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acR.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acR.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquareAC';
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acB.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acB.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acB.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acB.ttf) format("truetype");

  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquareAC';
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acEB.eot);
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acEB.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acEB.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquare/NanumSquare_acEB.ttf) format("truetype");

  font-weight: 800;
  font-style: normal;
}

font-family: 'NanumSquareAC', 'Pretendard', sans-serif;
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">

/*
font-family: 'NanumSquareLight';
font-family: 'NanumSquare';
font-family: 'NanumSquareBold';
font-family: 'NanumSquareExtraBold';
font-family: 'NanumSquareAcb';
font-family: 'NanumSquareAceb';
font-family: 'NanumSquareAcl';
font-family: 'NanumSquareAcr';
*/

 

  • Titillium
/* font-family: 'Titillium Web', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700;900&display=swap');

 

  • 노토산스
/* 요즘 임포트 적용 안될때 있었음,, */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* font-family: 'Noto Sans KR', sans-serif; */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

 

 

  • 이사만루
/* font-family: 'GongGothic', sans-serif; */
/* Bold */
@font-face {
  font-family: 'GongGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
/* Medium */
@font-face {
  font-family: 'GongGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* Light */
@font-face {
  font-family: 'GongGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
  • 지마켓
/* font-family: 'GmarketSans', sans-serif; */
/* font-family: 'GmarketSansBold'; */
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
/* font-family: 'GmarketSansMedium'; */
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
/* font-family: 'GmarketSansLight'; */
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

 

  • 민국
/* font-family: 'Minguk', sans-serif; */
/* font-family: 'Minguk-Bold'; */
@font-face {
    font-family: 'Minguk';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Minguk-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
/* font-family: 'Minguk-Regular'; */
@font-face {
    font-family: 'Minguk';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Minguk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

  • 레페리
/* LeferiPoint-BlackA */
@font-face {
  font-family: "Leferi";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-BlackA.woff")
    format("woff");
  font-weight: 900;
  font-style: normal;
}
/* LeferiBaseType-BoldA */
@font-face {
  font-family: "Leferi";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiBaseType-BoldA.woff")
    format("woff");
  font-weight: 700;
  font-style: normal;
}
/* LeferiBaseType-RegularA */
@font-face {
  font-family: "Leferi";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiBaseType-RegularA.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}
/* LeferiPoint-SpecialA */
@font-face {
  font-family: "Leferi";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-SpecialA.woff")
    format("woff");
  font-weight: 300;
  font-style: normal;
}
/* LeferiPoint-WhiteA */
@font-face {
  font-family: "Leferi";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteA.woff")
    format("woff");
  font-weight: 100;
  font-style: normal;
}

 

  • 프리텐다드

html ver.

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />

 

css font-face ver.

/* Pretendard-Thin */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff")
    format("woff");
  font-weight: 100;
  font-style: normal;
}
/* Pretendard-ExtraLight */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff")
    format("woff");
  font-weight: 200;
  font-style: normal;
}
/* Pretendard-Light */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff")
    format("woff");
  font-weight: 300;
  font-style: normal;
}
/* Pretendard-Regular */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}
/* Pretendard-Medium */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff")
    format("woff");
  font-weight: 500;
  font-style: normal;
}
/* Pretendard-SemiBold */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff")
    format("woff");
  font-weight: 600;
  font-style: normal;
}
/* Pretendard-Bold */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff")
    format("woff");
  font-weight: 700;
  font-style: normal;
}
/* Pretendard-ExtraBold */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff")
    format("woff");
  font-weight: 800;
  font-style: normal;
}
/* Pretendard-Black */
@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff")
    format("woff");
  font-weight: 900;
  font-style: normal;
}

 

 

 

  • 에스코어드림
/* font-family: 'S-CoreDream-9Black' */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* font-family: 'S-CoreDream-8Heavy'; */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
/* font-family: 'S-CoreDream-7ExtraBold'; */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
/* font-family: 'S-CoreDream-6Bold'; */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
/* font-family: 'S-CoreDream-5Medium'; */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
/* font-family: 'S-CoreDream-4Regular'; */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* font-family: 'S-CoreDream-3Light'; */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
/* font-family: 'S-CoreDream-2ExtraLight'; */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
/* font-family: 'S-CoreDream-1Thin'; */
@font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
728x90

'💅🏻 css'의 다른글

  • 현재글웹폰트

관련글

댓글

티스토리툴바