CSS - 웹 폰트(Web Font) 적용

웹 폰트(Web Font) 적용

 

방법 1 / 가져다가 쓴다.

 

- 구글 폰트

Google Fonts

 

다양한 웹폰트들이 제공되고 있다.

 

 

그냥 하라는대로

head에 link 붙여넣고

css에 font-family 붙여넣으면 끝!

 

Noto Serif Display 폰트 적용화면

computed로 본 결과는? (아래 rendered fonts)

 

 

방법 2 / 사용자에게 직접 제공한다.

 

우선, github에서 폰트 파일을 전부 다운받는다.

 

https://github.com/innks/NanumSquareRound

GitHub - innks/NanumSquareRound: 나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont.

 

그리고, At font-face를 사용해서

사용할 폰트를 설정하자.

 

@font-face {
  font-family: "thisisyjin";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/NanumSquareRoundR.eot");
  src: url("./assets/fonts/NanumSquareRoundR.eot?#iefix") format("embedded-opentype"),
    url("./assets/fonts/NanumSquareRoundR.woff2") format("woff2"), 
    url("./assets/fonts/NanumSquareRoundR.woff") format("woff"),
    url("./assets/fonts/NanumSquareRoundR.ttf") format("truetype");
}

/* font-family 명은 맘대로 지어도 됨. 대신, 다른곳에서 사용할때도 저 이름으로 써야함 */

 

여기서, 자주 사용하는 trick (브라우저별로 지원하는 파일명이 다르므로)

🔻

https://css-tricks.com/snippets/css/using-font-face-in-css/

How to use @font-face in CSS | CSS-Tricks

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

- 이런식으로 src에 여러가지를 작성해주자!

 

 

이건 지금 font-weight가 400인 Regular 에 대한 것이므로,

나머지 B, EB 등도 설정하자.

 

 

fonts.css

@font-face {
    font-family: "thisisyjin";
    font-style: normal;
    font-weight: 300;
    src: url("./assets/fonts/NanumSquareRoundL.eot");
    src: url("./assets/fonts/NanumSquareRoundL.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/NanumSquareRoundL.woff2") format("woff2"), 
      url("./assets/fonts/NanumSquareRoundL.woff") format("woff"),
      url("./assets/fonts/NanumSquareRoundL.ttf") format("truetype");
  }

@font-face {
  font-family: "thisisyjin";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/NanumSquareRoundR.eot");
  src: url("./assets/fonts/NanumSquareRoundR.eot?#iefix") format("embedded-opentype"),
    url("./assets/fonts/NanumSquareRoundR.woff2") format("woff2"), 
    url("./assets/fonts/NanumSquareRoundR.woff") format("woff"),
    url("./assets/fonts/NanumSquareRoundR.ttf") format("truetype");
}

@font-face {
    font-family: "thisisyjin";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/NanumSquareRoundB.eot");
    src: url("./assets/fonts/NanumSquareRoundB.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/NanumSquareRoundB.woff2") format("woff2"), 
      url("./assets/fonts/NanumSquareRoundB.woff") format("woff"),
      url("./assets/fonts/NanumSquareRoundB.ttf") format("truetype");
  }

  @font-face {
    font-family: "thisisyjin";
    font-style: normal;
    font-weight: 800;
    src: url("./assets/fonts/NanumSquareRoundEB.eot");
    src: url("./assets/fonts/NanumSquareRoundEB.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/NanumSquareRoundEB.woff2") format("woff2"), 
      url("./assets/fonts/NanumSquareRoundEB.woff") format("woff"),
      url("./assets/fonts/NanumSquareRoundEB.ttf") format("truetype");
  }

 

 

사용방법 1.

<link rel="stylesheet" href="fonts.css" />

html head 내에 link:css로.

 

 

사용방법 2.

 

<link rel="stylesheet" href="style.css" />

 

css에 import 해오기

 

style.css 🔻

@import url("./fonts.css");