💡 폰트란? (Font)
폰트란, 활자가 같은 크기, 같은 형상을 가질 수 있도록 기억 모체에 기록한 정보라고 한다. 컴퓨터에 사용되는 폰트는 디지털 폰트이며 현재에는 주로 디지털 폰트를 가르키는 말로 폰트를 사용하고 있다.
📌 로컬 폰트와 웹 폰트
로컬 폰트
로컬 폰트는 사용자의 컴퓨터 또는 장치에 이미 설치되어 있는 폰트이다. 웹 페이지를 불러올 때 서버에서 폰트 파일을 가져오는 것이 아니라 대신 로컬에 있는 폰트 파일을 사용해 글꼴을 렌더링한다. 사용자의 컴퓨터에 미리 설치가 되어 있어야 해서 사용자가 해당하는 폰트를 사전에 설치를 해야하는 문제점이 있다. 운영 체제에 기본적으로 설치되어 있는 파일이라면 활용하기 쉽다.
► 참고: 운영체제가 기본으로 가지고 있는 영어 폰트들
- Arial (Arial, Helvetica, sans-serif)
- Times New Roman (Times, serif)
- Courier New (Courier, monospace)
- Verdana (Verdana, Geneva, sans-serif)
- Georgia (Georgia, serif)
- Tahoma (Tahoma, Geneva, sans-serif)
- Trebuchet MS (Trebuchet MS, sans-serif)
- Impact (Impact, Charcoal, sans-serif)
이 외에도 운영체제마다 가지고 있는 다양한 폰트들이 있고 우리는 사용자가 어떤 환경에서 접속을 하는지 상관없이 일관성이 있는 웹 페이지를 제공할 필요가 있다. 그래서 필요한 것이 웹 폰트이다.
웹 폰트
웹 폰트란 웹 서버에 호스팅되어 웹 페이지를 불러올 때 웹 브라우저가 폰트 파일을 다운로드해 사용하는 폰트를 의미한다. 웹 폰트를 사용하면 사용자의 장치에 폰트가 미리 설치될 필요가 없으므로 개발자가 원하는 폰트를 제약없이 자유롭게 사용할 수 있다.
웹 폰트는 다양한 폰트 패밀리와 스타일을 지원하며 대표적인 폰트 서비스로는 Google Fonts, Adobe Fonts가 있다. 그리고 개인적으로 좋아하는 우리나라 사이트인 눈누가 있다.
폰트 패밀리는 서로 다른 글꼴 스타일(Regular, Bold, Italic 등)을 포함하는 하나의 폰트 그룹이면서, 웹 페이지나 문서에서 텍스트를 표시할 때 사용되는 폰트들의 그룹을 말한다.
한 번에 여러 개의 폰트를 지정해 사용자의 운영 체제 또는 브라우저에서 사용 가능한 폰트 중에서 최선의 선택을 할 수 있도록 한다.
(폰트 패밀리에 여러 개의 폰트를 작성한 경우, 브라우저는 제일 앞에 있는 폰트부터 사용 가능한 폰트를 사용한다.)
이 세 사이트에 올라온 폰트는 무료로 상업적 용도에도 사용 가능하다고 알고있지만, 꼭 사용 전에 저작권을 확인해보길 바란다.
📌 웹 폰트 사용하기
웹 폰트를 사용하는 방법은 어렵지 않다. 대표적인 두 가지 방법, <link>를 이용하는 방법과 css에 @font-face 태그를 사용하는 방법을 소개하겠다.
아래 페이지를<link>로는 영어 폰트를,@font-face 로는 한글 폰트를 바꿔보겠다.
link 연결하기
위에서 소개한 Google Font 사이트에서 <link>를 이용해 Pacifico이라는 폰트를 적용해보겠다. 원하는 폰트를 html 파일에 <link>으로 불러오는 방식이다.
-
Google Fonts에 접속한 후 적용하고 싶은 폰트를 정했다면 클릭해서 상세 페이지로 들어간다.
-
노란 영역을 클릭해 폰트 정보가 들어있는 창을 열고, 빨간 네모 안 내용을 복사한 후, html 파일의
<head>영역에 붙여 넣는다. -
파란 네모 안 css 스타일을 복사해서 해당 태그에 속성을 부여한다.
<head>
<title>폰트</title>
<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=Pacifico&display=swap" rel="stylesheet">
<style>
h1, p {
font-family: 'Pacifico', cursive;
}
</style>
</head>편의상 <head>에 스타일링을 했는데 이런식으로 붙여넣기만 하면 간단하게 잘 적용된다. 아래 사진에서 영어 부분에 폰트가 바뀐 것을 확인할 수 있다.
@font-face 사용하기
웹 페이지에서 로컬 또는 원격에 있는 폰트 파일을 불러와 웹 폰트를 적용하는 방법이다.(보통 cdn링크로 가져오기때문에 따로 폰트를 저장할 필요는 없다.) 폰트 파일을 서버에 업로드하고, CSS에서 @font-face를 사용하여 폰트를 선언한 후 사용할 수 있다.
나는 눈누 사이트를 이용했다.
1. 원하는 폰트를 고른 후 빨간 네모 안 내용을 복사해서 css 파일에 붙여넣는다. 주의할 점은 <link>로 속성을 줬을 때와는 다르게 font-face를 태그 안 속성으로 넣으면 안 된다.
@font-face는 웹 폰트를 위한 웹 표준 방법으로 웹 페이지에서 사용할 폰트 파일을 서버에서 불러와 사용할 수 있도록 하는 CSS 규칙이다.
- 폰트를 바꾸고 싶은 태그에 font-family 속성을 준다. 보통 맨 첫줄에 font-family 내용이 있다.
두 가지 방법으로 폰트를 바꾼 결과물이다. 썩 예쁘진 않지만 폰트가 잘 적용된 걸 볼 수 있다!
💡 폰트의 Preload
<link>로 폰트를 불러왔을 때, <link>를 <head> 안에 넣었다. 왜 <body>가 아니라 <head>에 넣었을까? 이것은 폰트의 Preload와 관련이 있다. 웹 브라우저는 파일을 읽을 때 위에서부터 순서대로 읽어가는데 폰트를 먼저 읽어서 적용하기 위해 <head> 영역 안에 넣는 것이다. 파일이 커지다보면 <head> 영역에도 너무 많은 <link>들이 생길 수 있는데 그 때, 적절한 속성을 주면 폰트가 먼저 로딩 될 수 있도록 해준다. rel: preload;와 as: font; 속성을 <link>에 넣어주면 되는데, css에 속성으로 아래와 같이 넣어도 된다.
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
rel: preload; /* preload 속성 추가 */
as: font; /* 리소스의 타입을 지정 */
}📌 Preload 가 필요한 이유
왜 폰트를 미리 로딩하는 걸까? 몇 가지 문제점이 생길 수 있기 때문이다. 폰트가 너무 늦게 로딩된다면 개발자가 의도한 폰트 대신 브라우저의 기본 폰트가 적용된 후에 원래 적용하고자 했던 폰트가 적용될 수도 있고 폰트의 크기나 스타일을 정확하게 알 수 없어서 레이아웃이 변경될 수도 있다. 이런 문제점은 사용자의 경험에 불편을 줄 수 있기 때문에 폰트가 먼저 로딩되도록 하는 것이 좋다.
💡 마치며
웹 폰트와 로컬 폰트에 대해 알고 있었지만 직접 글을 작성하기 위해 한 번 더 테스트해 보고 공부하고 나니 좀 더 명확하게 머릿속에 내용이 남았다. Preload 하는 방법에도 자바스크립트나 웹 폰트 로딩 라이브러리를 이용하는 방법도 있다고 하는데 자바스크립트는 아직 기본적인 내용만 알고 있어서 더 작성하지 못한 것이 아쉽다.
cs는 역사가 길지 않지만 엄청나게 발전해온 만큼 배우면 배울수록 더 공부할 것들이 생기는 것 같다...! 부지런히 공부해야겠다고 또 한 번 느낀다.
