CSS 텍스트 스타일링 및 구글 폰트 사용하여 적용하는 방법 알아보기
텍스트 폰트 지정 font-family 속성
HTML 웹페이지에서 사용하는 기본 글꼴 외에 다른 글꼴을 사용해서 표현하고 싶다면 CSS의 font-family 속성을 사용하면 됩니다.
font-family 속성 안에 지정한 글꼴은 클라이언트 즉 웹페이지를 사용하는 사용자의 PC에 해당 글꼴이 설치되어 있어야지만, 정상적으로 지정한 글꼴이 나타나게 되며 그렇지 않은 경우에는 기본 글꼴로 표현이 됩니다.
이런 경우를 방지하기 위해 font-family 속성 안에 여러 개의 글꼴을 순서대로 작성하여, 첫 번째 지정한 글꼴이 없을 경우 두 번째 지정한 글꼴이 표현될 수 있도록 해야 합니다.
font-family 속성을 body 태그에 적용할 경우 문서 전체의 폰트에 적용됩니다.
body {
font-family: "견고딕", "견명조", "돋움";
}
※ 위와 같이 지정할 경우 견고딕 폰트가 없을 경우 견명조로 표현되게 되고 견명조 폰트가 없다면 돋움 폰트가 지정됩니다.
구글폰트 사용하여 웹폰트 적용하는 방법
앞서 살펴본 폰트 지정 방법은 사용자의 시스템에 해당 폰트가 있는 경우에만 정상적으로 폰트가 표현되는데, 폰트가 없는 경우 기본 글꼴로 표현이 됩니다.
이런 경우를 방지하기 위해, 웹상의 폰트를 지정하여 인터넷만 연결이 되어 있다면 아무 문제 없이 폰트가 적용되도록 할 수 있습니다.
1. 구글 폰트 사이트에서 사용할 폰트 검색
fonts.google.com에 접속하면 구글에서 제공하는 여러 폰트를 검색할 수 있습니다. 한글 지원 폰트를 찾을 경우에는 검색 필터 Language에서 Korean을 선택하면 됩니다.
 |
| 구글 폰트에 접속 후 Language에서 언어를 선택해서 해당 언어 지원 폰트를 필터링할 수 있다. |
2. import 문과 font-family 속성 삽입
사용할 폰트를 찾았다면 폰트를 클릭 후 하단 리스트에서 사용할 폰트 굵기에서 우측의 Select 버튼을 클릭하시면 우측에 사용할 import문과 CSS font-family 속성이 나타나게 됩니다.
 |
| 폰트 굴기에 따라 선택이 가능하고, 선택시 우측에 import문과 font-family 속성이 나타난다. |
import 문의 경우에는 HTML 문서의 head 태그 안에 붙여넣고, font-family 속성은 CSS 파일에 정의해주시면 됩니다.
구글 폰트 import문과 font-family 속성 사용 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- *구글 폰트 import 문 -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap');
</style>
<link rel="stylesheet" href="test.css">
<title>Document</title>
</head>
<body>
<h1>이건 테스트</h1>
</body>
</html>
body {
font-family: 'Noto Sans KR', sans-serif;
}
@font-face 속성 사용하여 웹폰트 업로드하여 글꼴 변경
구글 폰트는 웹상에 있는 폰트를 링크를 이용하여 사용하는 방법이고 서버에 있는 폰트를 사용자에게 다운로드하게 하여 사용하는 방법도 있습니다.
@font-face 안의 font-family 속성에 사용할 폰트 이름을 지정합니다.
일반적으로 글꼴 파일 이름과 동일하게 지정합니다.
local 문안에는 해당 폰트가 사용자 시스템에 있는지 확인 작업을 거치기 위해 글꼴 이름을 적어줍니다.
url에는 해당 폰트의 경로를 적어주고 format에는 폰트의 포맷을 적어줍니다.
@font-face 사용예제
/* 예제 */
@font-face {
font-family : '사용할글꼴이름 지정';
src : local('사용자 시스템 글꼴이 있는지 확인하기 위한 글꼴 이름작성'),
url('폰트 경로 지정') format('글꼴 타입')
}
/* 실제 선언 */
@font-face {
font-family : '내가만든폰트';
src : local('내가만든폰트'),
url('font/내만만든폰트.woff') format('woff')
url('font/내만만든폰트.ttf') format('truetype')
}
/* CSS에서 사용 */
body {
font-family : '내가만든폰트', sans-serif
}