폰트 파일을 적용하는 방법
폰트 파일 준비하기
우선 준비한 폰트 파일을 프로젝트 폴더 내에 원하는 경로에 넣어줍니다.
assets/fonts 와 같은 디렉토리명이 적절합니다.
준비한 폰트파일은 CSS 코드에서 경로를 통해 불러와 적용할 것입니다.
폰트 파일 확장자 종류
폰트 파일은 다양한 확장자를 가집니다. 확장자 별로 지원하는 브라우저가 다르고 그 내용은 다음과 같습니다.
- ttf/otf: IE9이상, 크롬, 파폭, 오페라, 사파리
- woff: IE9이상, 크롬, 파폭, 오페라, 사파리
- svg/svgz: 크롬, 오페라, 사파리
- woff2: 크롬, 파폭, 오페라
- eot: IE8이하
CSS에서 폰트 파일 불러와서 적용하기
@font-face {}를 통해 해당 폰트를 font-family 값으로 정의할 수 있습니다.
@font-face {
font-family: "NotoSansKR"; /* 사용하고 싶은 font-family명을 지정 */
src: url("../assets/fonts/Noto_Sans_KR/NotoSansKR-Regular.otf") format("opentype"); /* 폰트파일 불러오기 */
}
이제 불러온 폰트를 적용해보겠습니다. 모든 section내에 있는 p태그에 해당 폰트를 적용하는 CSS 코드는 다음과 같습니다.
section p {
font-family: "NotoSansKR";
}
반면 해당 폰트를 전역으로 적용하려면 다음과 같이 사용합니다.
* {
font-family: "NotoSansKR";
}
다양한 브라우저 지원을 위해 동일한 폰트에 대해 여러 확장자의 파일을 준비한 경우는 다음과 같이 @font-face에서 여러 리소스 경로를 명시해줍니다.
@font-face {
font-family: "NotoSansKR";
src: url("../assets/fonts/Noto_Sans_KR/NotoSansKR-Black.ttf") format("truetype"),
url("../assets/fonts/Noto_Sans_KR/NotoSansKR-Regular.otf") format("opentype");
}
각 리소스는 콤마(,)로 구분해줄 수 있습니다. 그리고 확장자별로 다른 format값을 명시해줘야 합니다. 그 값은 다음과 같습니다.
- ttf: truetype
- otf: opentype
- woff: woff
- svg: svg
- eot: embedded-opentype
구글 폰트에서 원하는 폰트 골라서 적용하는 방법
폰트파일을 따로 준비하지 않아도 구글 폰트에서 원하는 폰트를 골라 자신의 웹페이지에 적용할 수 있는 방법이 있습니다. 우선 구글 폰트 사이트에 접속합니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
그러면 다양한 폰트 종류를 볼 수 있는데요. 이 중에 원하는 폰트를 골라 클릭하여 상세페이지로 들어갑니다.
Styles라는 탭에서 원하는 문구를 타이핑하고 픽셀 값을 조절하여 폰트의 모양, 굵기, 크기를 한눈에 확인할 수 있습니다.
Thin 100, Thin100 italic 과 같이 쓰여있는 것은 CSS 코드상에서 font-weight와 font-style을 의미합니다. 이 폰트를 불러와서 적용한 후 CSS에서 font-weight 값을 100으로 주거나 font-style값을 italic으로 주는 경우 위에 표기된 것처럼 텍스트가 보이게 될 것입니다. 그런데 그전에 먼저 해당 스타일을 선택을 해줘야 합니다.
선택을 한 스타일만 import 해서 사용을 할 수 있습니다. 저는 모든 스타일을 다 선택하도록 하겠습니다. 그리고 페이지 상단에서 아래 이미지에서 동그라미표 한 아이콘을 클릭해줍니다. 그러면 오른쪽에 Selected family라고 쓰여있는 창이 뜰 것입니다.
Use on the web이라고 써있는 곳에서 <link>에 체크를 하고 해당 코드를 복사하여 자신이 만들고 있는 웹페이지의 head 태그 안에 붙여 넣습니다.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
</head>
이제 구글 폰트에서 원하는 폰트를 골라 불러오는 것에 성공했습니다. CSS 코드에서도 마찬가지로 Use on the web이라고 쓰여있는 곳에서 안내된 font-family 값을 사용하면 됩니다. 저는 전역에서 해당 폰트를 적용해보겠습니다. Use on the web에서 해당 코드를 복사해서 다음과 같이 스타일시트에 붙여 넣습니다.
* {
font-family: 'Lato', sans-serif;
{
아까 구글 폰트에서 모든 스타일을 선택해서 불러왔었는데, 만약 그중에 Thin 100 intalic을 사용하려면 다음과 같이 CSS 코드를 작성합니다.
.thin.italic {
font-weight: 100;
font-style: italic;
{
같은 방식으로 font-weight와 font-style값을 변경하면 선택해서 임포트한 스타일 중에 있다면 적용이 될 것입니다.
구글 폰트 라이선스에 관하여
구글 폰트는 기본적으로 무료로 이용이 가능합니다. 그리고 대부분 Open Font License인 것으로 보입니다. 하지만 간혹 다른 라이선스를 가진 폰트가 존재할 수도 있기 때문에 폰트의 상세페이지에서 꼭 라이센스를 확인을 하시고 사용을 하는 것이 좋겠습니다.
최근댓글