font-family: ;

로컬 폰트

• 폰트 파일 필요.
• 정확한 서체명 작성(띄어쓰기, 인용부호, 대소문자 구별)
• 사용자들의 컴퓨터에 서체가 없는 경우를 대비해 3~4개의 서체를 추가 작성(fallback fonts)
• 바탕체 종류로 끝날 경우 마지막은 serif로 작성
  돋움(고딕)체 종류로 끝날 경우 마지막은 sans-serif로 작성

  ex)
  font-family: '나눔고딕', Arial, Helvetica, sans-serif;
  font-family 'Gowun Batang', 'Times New Roman', Times, serif;

서체가 제대로 적용 되었는지 확인하려면 크롬 개발자도구-Computed-Rendered Fonts 부분을 확인해보면 된다.

웹 폰트

• 폰트 파일 필요.
• 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 폰트를 사용할 수 있다.
• font-family에 원하는 이름 지정(누구나 알아볼 수 있게 작성하자)
• url('폰트 파일 경로')
• format('파일 형식')

@font-face{
			/* 필수 작성 */
            font-family: 'spoqa'; 
            src: url(./fonts/SpoqaHanSansNeo-Regular.woff2) format('woff2');
            
            /* 추가 작성 */
            font-display: swap; < FOUT 방식. 로딩되는 동안 기본 서체로 보이고, 완료되면 웹폰트 적용. 항상 텍스트가 보임.
            		      auto; < 브라우저 기본값.
    					  block; < FOIT 방식. 웹폰트가 로딩되지 않으면 텍스트가 렌더링 되지 않음. 로딩 완료 후 텍스트가 보임.
        }

🐰구글 폰트 사용법

• 폰트 파일 필요x.
• https://fonts.google.com/ 에서 원하는 폰트를 선택 후 HTML에 작성하고 싶으면 <link>부분을 복사해 head 안에 넣어주면 되고, CSS에 작성하고 싶으면 @import 부분을 복사해 CSS문서에 넣어주면 된다.
• 이후 style안에 font-family를 작성.