[CSS] font-family 사용법

 

 

 font-family

 

CSS 속성 중 하나로, 요소에 적용되는 폰트의 종류를 지정합니다.

이 속성을 사용하여 웹페이지의 텍스트에 사용할 폰트를 선택할 수 있습니다.

웹 브라우저는 이 속성을 사용하여 지정된 폰트를 찾고 사용자에게 표시합니다.

 

font-family 사용법

 

글꼴의 이름이나 일반적으로 사용되는 웹 글꼴 형식인 url() 함수를 사용할 수 있습니다.

그러나 url() 함수에는 실제 글꼴 파일의 경로를 지정해야 합니다.

따라서 올바른 방법은 웹 폰트를 다운로드하고, 해당 폰트 파일의 경로를 url() 함수 안에 지정하는 것입니다. 

 

 

로컬 폰트 파일 사용

웹 폰트를 직접 다운로드하고, 해당 폰트 파일을 프로젝트 내부에 저장하여 경로를 지정하는 방법입니다.

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

 

 

외부 웹 폰트 사용

웹 폰트 제공업체에서 제공하는 CSS 링크를 사용하여 외부 웹 폰트를 로드하는 방법입니다.

@import url('<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>');

body {
  font-family: 'Roboto', sans-serif;
}

 

그러나 웹 폰트를 사용하려면 폰트 제공업체의 제공하는 URL이 아닌, 실제 폰트 파일의 경로를 사용해야 합니다.