본문 바로가기

CSS/Font

System Font 설정 방법

글꼴에 특별히 연연할 필요가 없는 경우라면 system font를 쓰는 게 좋은 방법이다.

각 OS 마다 기본으로 설정된 font를 씀으로써 font를 다운 받지 않아 성능 개선에 도움이 되고

사용자에게 친숙하며

새로 나온 OS일수록 모던한 font를 기본으로 사용할 수 있게 된다.

 

적용하려면 VSCode에서 font-family에 -를 입력하고 나타나는 드롭 다운 메뉴 중 apple system을 고른다.

 

 

결과 값은 아래와 같다.

 

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 
    Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

 

apple system과 BlinkMacSystemFont는 맥,

Segoe UI는 윈도우,

Roboto는 안드로이드 OS의 기본 폰트다.