[CSS] Web font 적용 (with. Apple SD Gothic Neo)

Font Download 사이트 (추천)

---

눈누

Fonts - Apple Developer

 

적용하기

---

폰트 파일이 있다면 프로젝트에 넣고 해당 경로를 맞춰준 뒤 설정한 font-family 이름으로 적용할 요소에서 적용한 방식으로 사용하면 된다.

폰트 파일이 없다면, 웹폰트로 사용하면 되는데 추천 사이트인 눈누에서 마음에 드는 font의 상세페이지를 들어가면 우측에 경로가 보인다. 

@font-face {
    font-family: '폰트이름';
    src: url('폰트 url') format('woff');
    /* 
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); 
    or
    src: url('/fonts/Apple_Sd_Gothic_Neo/AppleSDGothicNeoM.ttf') format('truetype');
    */
    font-weight: normal;
    font-style: normal;
}

/* 적용할 요소 */
* {
	font-family: '폰트이름';
}

 

Font 굵기 설정

---

font-weight에 자동으로 매핑되는 부분은 아래와 같다.

100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

 

Example

---

/* font.css */
@font-face {
  font-family: 'appleNeo';
  src: url('/fonts/Apple_Sd_Gothic_Neo/AppleSDGothicNeoM.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'appleNeo';
  src: url('/fonts/Apple_Sd_Gothic_Neo/AppleSDGothicNeoL.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'appleNeo';
  src: url('/fonts/Apple_Sd_Gothic_Neo/AppleSDGothicNeoSB.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

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


/* main.css */
@import "font.css";

 

---

font-weight - CSS: Cascading Style Sheets | MDN