1. font-family 속성

👉 MDN에서 font-family 관련 상세 정보 보기

body {

font-family: A,B,C,D,sans-serif

}

A가 없으면 B CD가 보임.

※ sans-serif , serif, cursive

CSS 폰트의 한계

사용자의 컴퓨터에 있는 폰트만 실질 적용 가능
맥 사용자, 윈도우 사용자간 탑재 폰트 차이
일관성 유지 어려움

2. 웹 폰트

서버에 저장된 서체를 사용자의 컴퓨터에서 사용할 수 있도록 함

ex)

@font-face {
  font-family: "MyNotoSans";
  src: url(./fonts/NotoSansKR-Regular.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 100;
  src: url(./fonts/NotoSansKR-Thin.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 300;
  src: url(./fonts/NotoSansKR-Light.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 500;
  src: url(./fonts/NotoSansKR-Medium.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 700;
  src: url(./fonts/NotoSansKR-Bold.otf);
}

@font-face {
  font-family: "MyNotoSans";
  font-weight: 900;
  src: url(./fonts/NotoSansKR-Black.otf);
}

단, 라이선스 요약표 참고하기