CSS 폰트

• font-family 속성

  body {
    font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
  }
  

  • 위의 코드와 같은 경우에는 순서대로 폰트가 설치되어 있는지 살피고, 있는 경우에는 해당 폰트를 사용한다. 설치되어 있지 않은 경우엔 그 다음 폰트들을 훑어나가게 된다.

  • Sans-serif VS Serif VS Cursive

    산세리프는 전체적으로 폰트가 곧게 뻗어져 있음. 반면에 세리프와 커시브는 궁서체/바탕체처럼 구불거리는 모양의 폰트.

• CSS 폰트의 한계

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

웹 폰트

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

• 👉 구글 폰트
• 👉 눈누 (상업용 무료 한글폰트)

적용 방식

1. 웹 폰트 제공 서비스의 서버에서 그대로 가져와 사용한다.

   • CSS 파일에 @import 사용

     @import url('<https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@300;400&display=swap>');
     
     body {
       font-family: "Black Han Sans", sans-serif;
       font-weight: 400;
       font-style: normal;
     }
     
     

   • html 파일의 head 태그 내부에 link 태그를 사용하여 삽입

     <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=Black+Han+Sans&family=Noto+Sans+KR:wght@300;400&display=swap>" rel="stylesheet">
     
     

2. 서체를 자체 서버에 탑재하여 사용한다.

   • @font-face 지시어란?

     이 명령어는 사용할 폰트의 이름 및 해당 폰트를 다운받을 수 있는 위치를 브라우저에게 알리는 명령어다.

   • 현 폴더 내부에 폰트 저장 후 CSS 파일에

     @font-face를 사용하여 font-family 변수에 이름 저장한다.

     src 속성에 원격 폰트 파일의 위치를 나타내는 url 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트 명을 local 형식으로 지정한다.

   • font-weight 속성을 사용하여 굵기가 다르게 디자인된 폰트를 저장할 수 있다.

     • 굵기를 따로 설정하여 설정해 두지 않으면 브라우저 자체적으로 굵기를 조절하여 웹에 띄우는데, 직접 디자인된 폰트보다 굵기가 확연히 다르게 설정되지 않음. 맥은 폰트 깨짐의 우려.

   body{
         padding: 8px 24px;
         font-size: 1.4rem;
   
         font-family: 'MyNotoSans', 'sans-serif';
       }
   
   @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);
   }