CSS 폰트 스타일: font-family, 웹 폰트(web font)

CSS 폰트 스타일: font-family, 웹 폰트(web font)

오늘은 글자 모양을 지정해주는 폰트 관련 스타일을 알아보겠습니다.

 

 

1. font-family

  - 글꼴을 지정해주기 위해서는 font-family 속성을 사용합니다.

  - 직역하면 '글꼴 가족'이지요. 해당 모양의 글자들을 한 가족으로 모아두었다는 뜻입니다.

  - font-family 속성은 아래와 같은 형식으로 사용합니다.

  - font-family { 글꼴 이름, 대체 글꼴 이름1, 대체 글꼴 이름2, ...  }

  - 위 예시를 통해 살펴보겠습니다.

  - 먼저 id를 "gul"로 지정한 p태그를 살펴보겠습니다.

  - #gul { font-family: 굴림; } 으로 되어있지요. id가 gul인 p태그는 글꼴을 '굴림'으로 지정한다는 뜻입니다. 이처럼 대체 글꼴은 쓰지 않을 수 있습니다.

  - 그다음 id를 "go"로 지정한 p태그를 살펴보겠습니다.

  - #go{ font-family: "맑은 고딕", 궁서, 돋움 } 으로 되어있지요. id가 go인 p태그는 글꼴을 '맑은 고딕'으로 지정한다는 뜻입니다.

  - 그 뒤에 나오는 '궁서'와, '돋움'은 뭘까요?

  - 컴퓨터 시스템마다 기본적으로 설치되어 있는 글꼴이 다릅니다. 따라서 '맑은 고딕'이 설치되어 있지 않은 컴퓨터가 있을 수 있습니다. '맑은 고딕'이 없는 컴퓨터는 '궁서'로 해당 텍스트가 표시됩니다. '궁서'도 없는 컴퓨터는 '돋움'으로 텍스트가 표시됩니다.

  - 글꼴 이름들은 쉼표(,)를 넣어 구분해줍니다. 

  - "맑은 고딕"처럼 속성 값은 주로 큰따옴표로 묶어 사용합니다.

  - 글꼴 중에서 대부분의 컴퓨터에 설치되어 있는 글꼴을 기본 글꼴(web-safe fonts)이라고 합니다.

  - 2020 Best HTML Web-safe fonts는 아래를 참고해주세요.

www.hostinger.com/tutorials/best-html-web-fonts

The 20 Best HTML Web Fonts To Use In 2020 – Hostinger Tutorials

 

 

2. 웹 폰트

  - 기본 글꼴만 사용하면 참 심심하겠지요?

  - 그렇다고 사용자가 어떤 글꼴이 설치되어 있을지도 모르는데 내가 원하는 폰트만 사용하기에는 부담이 있지요.

  - 웹 폰트는 이러한 문제를 깔끔하게 해결해줍니다.

  - 웹 폰트(web font)란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장하고, 사용자가 웹 문서에 접속하면 그 글꼴을 사용자 시스템으로 자동으로 다운로드 시키는 방법입니다.

  - 웹 폰트를 사용하는 가장 간편한 방법은 '구글 웹 폰트'를 사용하는 것입니다.

  - 구글에서 제공하는 무료 웹 폰트의 링크를 가져오는 방식입니다.

  - 사용 방법은 아래와 같습니다.

    ① https://fonts.google.com 접속하기

    ② 원하는 글꼴 선택하기

    ③ 'Select this style' 글릭하기

    ④ '@import' 클릭하기

    ⑤ @import로 시작하는 부분 복사하기

    ⑥ 복사한 것 style 태그에 붙여넣기

  - 그 다음은 font-family를 사용하는 방법과 유사합니다.

  - 위 예시에서는 id가 dok인 p태그에 'Dokdo'라는 웹 폰트를 적용하였습니다.