웹폰트 속성에 대해 알아보자

웹폰트 속성에 대해 알아보자

웹폰트(Web Fonts)는 웹사이트에서 특정 폰트를 사용하기 위해 사용되는 기술입니다. 기본 시스템 폰트 이외의 다양한 폰트를 웹사이트에 적용할 수 있도록 해줍니다. 웹폰트를 사용하려면 몇 가지 속성을 알아야 합니다.

웹폰트 사용시 CSS상에서 font-family 속성값 설정 팁.

font-family: "폰트네임", 속성값;

속성값 예제

  • serif : 삐침 있는 명조계열의 글꼴
  • sans-serif : 삐침 없고 굵기가 일정한 고딕계열의 글꼴
  • monospace : 글자 폭과 간격이 일정한 글꼴
  • cursive : 손으로 쓴 것 같은 필기계열의 글꼴
  • fantasy : 화려한 글꼴
font-family: 부모 요소의 속성값을 가져 올때

ex)
font-family: initial;  /*기본값*/
font-family: inherit; /*부모요소의 속성값을 상속받음.*/
  1. @font-face 규칙: @font-face 규칙은 웹폰트를 정의하는 데 사용됩니다. 이 규칙은 웹폰트 파일의 경로와 이름, 파일 형식을 지정합니다. 예를 들어:

 

@font-face {
  font-family: 'Noto Sans';
  src: url('noto-sans.woff2') format('woff2'),
       url('noto-sans.woff') format('woff');
}

위의 예시에서는 ‘Noto Sans’라는 폰트 이름으로 웹폰트를 정의하고, src 속성을 사용하여 웹폰트 파일의 경로를 지정합니다. 여기서는 .woff2.woff 형식의 웹폰트 파일을 사용하고 있습니다.

  1. font-family 속성: font-family 속성은 웹폰트를 사용할 때 폰트의 이름을 지정합니다. @font-face 규칙에서 정의한 폰트 이름을 사용하면 됩니다. 예를 들어:
body {
  font-family: 'Noto Sans', sans-serif;
}

위의 예시에서는 ‘Noto Sans’ 웹폰트를 body 요소의 폰트로 지정하고 있습니다. 웹폰트를 사용할 수 없는 경우에는 대체 폰트로 sans-serif를 사용합니다.

  1. font-weight 및 font-style 속성: font-weight와 font-style 속성을 사용하여 웹폰트의 굵기와 스타일을 지정할 수 있습니다. 예를 들어:

 

h1 {
  font-family: 'Noto Sans', sans-serif;
  font-weight: bold;
  font-style: italic;
}

위의 예시에서는 ‘Noto Sans’ 웹폰트를 굵은 글꼴(bold)과 이탤릭체(italic)로 표시되는 h1 요소의 폰트로 지정하고 있습니다.

위의 속성들은 웹폰트를 적용하는 데 가장 일반적으로 사용되는 속성들입니다. 웹폰트를 사용할 때는 폰트 파일의 경로와 형식을 올바르게 지정하고, @font-face 규칙을 사용하여 웹폰트를 정의한 후, 해당 폰트를 원하는 요소에 적용하는 방식으로 웹폰트를 사용할 수 있습니다.