웹폰트 기초 / 웹폰트 변경하기 / 나오지 않는 언어가 있다면 폰트를 추가해보자.
포털 사이트에서 검색하면 이미 많은 폰트 변경 방법이 나와있지만 묘연 티스토리 스킨을 사용하시는 분을 위해 맞춤형 설명합니다. 응용하시면 제 스킨이 아니더라도, 티스토리 블로그가 아닌 웹사이트에도 적용이 가능합니다.
웹폰트를 사용하는 이유
우리가 일반적으로 사용하는 폰트는 TTF와 OTF 확장자를 가진 파일입니다.
이런 파일들은 우리의 웹페이지에 적용할 수 있으나 웹페이지에 접속하는 모든 사람의 PC나 휴대기기에 동일한 폰트파일이 설치되어 있어야 모든 사람에게 동일한 디자인의 웹페이지를 보여주게 됩니다.
그럼 이 파일들을 서버에 올려서 접속하는 모든 사람이 사용할 수 있게 하면 되지 않겠느냐!?
이 TTF, OTF 폰트 파일은 적게는 3mb 정도의 크기이고 많게는 10mb 이상의 파일도 존재합니다. 이렇게 용량이 큰 파일은 웹에서 사용하기에는 부적합하기 때문에 불필요한 부분을 제외하고 압축해서 웹에서 사용할 수 있도록 나온 게 웹폰트입니다.
물론 무조건 기본 폰트로만 적용하려면 웹폰트는 사용하지 않아도 됩니다.
웹폰트의 종류
eot, woff, woff2 확장자가 존재합니다.
현재 브라우저에서는 eot는 대부분 지원되지 않으며 woff만 지원됩니다.
간혹 웹폰트 URL에 CSS로 되어있는 경우도 있는데 해당 파일을 열어보면 대부분 woff나 woff2 파일에 대한 URL이 있을 거예요.
내 웹페이지에 적용할 웹폰트를 정하기
1. 내가 가진 TTF나 OTF 폰트 파일을 woff나 woff2 파일로 변환
가능은하지만 변환해도 되는 것인지, 서버에 올려도 되는 것인지 등 저작권 확인을 하나하나 직접 해야 합니다.
2. 이미 변환되어 있는 파일을 사용한다.
아래 사이트에 있는 웹폰트를 사용하면 저작권이 프리이거나, 쉽게 확인할 수 있도록 정리되어 있으며 많은 웹사이트에서 사용하기 때문에 만약 해당 웹폰트에 대해 캐시가 있는 PC라면 보다 빨리 웹폰트가 적용되어 보일 것입니다.
따라서 파일을 변환하는 것보다는 아래 사이트에서 원하는 폰트를 찾는 것을 추천합니다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
△ 전 세계 폰트
눈누
상업용 무료한글폰트 사이트
noonnu.cc
△ 한글 폰트
내 웹사이트에 적용하기
웹사이트에 적용하는 방법은 크게 2단계입니다.
- 웹폰트 url을 내 웹사이트에 삽입
- CSS를 통해 적용
Google Fonts 사용 방법
Google Fonts에서는 원하는 폰트를 클릭하고 들어가면 위 이미지와 같이 굵기가 다른 폰트가 여러 개 나열되어 있을 수도 있고 한 개의 폰트만 있을 수도 있습니다. 이는 폰트 제작자나 제작사에서 그렇게 제작을 한 것이라 인지하면 되고 원하는 폰트를 우측에 파란색으로 된 Select ???? + 를 클릭하면 됩니다.
그러면 우측에 창이 떠야 하는데 그렇지 않다면 우측 상단에 아이콘을 누르면 됩니다.
웹폰트 URL 삽입 방법
우측 창을 보면 내가 추가한 폰트가 나오고 아래 <link>와 @import 중 원하는 방식으로 선택하면 됩니다.
어떤 것을 선택해도 상관은 없으나 <link> 형식으로 사용하면 캐시가 남기 때문에 로딩에 약간의 이점이 있다고 합니다.
아래 3가지 방법의 예시를 참고하여 이 중 한 가지 방법으로 내 웹페이지에 웹폰트 url을 삽입합니다.
<link> html 삽입 예제
<!DOCTYPE html>
<html lang="ko">
<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">
<meta name="description" content="묘연 블로그 / 일상 / 덕질 / 티스토리 스킨 / 티스토리 스킨 커미션" />
<title>웹폰트 기초 / 웹폰트 변경하기 / 나오지 않는 언어가 있다면 폰트를 추가해보자.</title>
<link rel="shortcut icon" href="https://sweet-myo.tistory.com/favicon.ico" />
<link rel="preconnect" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
<link href="//fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./images/jquery-3.7.0.min.js"></script>
</head>
<body>
~
~
~
</body>
</html>
@import html 삽입 예제
<!DOCTYPE html>
<html lang="ko">
<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">
<meta name="description" content="묘연 블로그 / 일상 / 덕질 / 티스토리 스킨 / 티스토리 스킨 커미션" />
<title>웹폰트 기초 / 웹폰트 변경하기 / 나오지 않는 언어가 있다면 폰트를 추가해보자.</title>
<link rel="shortcut icon" href="https://sweet-myo.tistory.com/favicon.ico" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./images/jquery-3.7.0.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
</style>
</head>
<body>
~
~
~
</body>
</html>
@import CSS 삽입 예제
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
웹폰트 적용 방법
다시 Google Fonts의 우측 하단을 보면 font-family로 안내된 부분이 있습니다. 해당 부분의 복사 아이콘을 눌러 복사한 뒤 CSS에서 삽입하면 되는데 보통은 body가 있는 부분을 찾아서 붙여 넣기 하면 됩니다.
그러나 이미 font-family가 적용된 부분이 있다면 해당 부분을 교체해야 내가 적용하려는 웹폰트가 적용이 되며, 필요에 따라 body가 아닌 다른 부분에도 font-family가 적용되어 있는 부분이 있다면 하나하나 교체해줘야 합니다.
쉬운 방법은 body가 있는 코드에 이미 font-family가 있다면 해당 폰트 이름을 복사한 뒤 검색해서 동일한 폰트명을 모두 교체하면 됩니다.
일부 최신 묘연 스킨의 경우 CSS 상단의 :root에 --fontK, --fontE 등으로 설정된 스킨도 있으니 해당 스킨의 전용 페이지에서 안내를 참고하여 변경하면 일괄 변경 됩니다.
눈누 사용 방법
눈누에서도 마찬가지로 원하는 폰트를 클릭하면 굵기가 다른 폰트가 여러 개 나열되어 있을 수도 있고 한 개의 폰트만 있을 수도 있습니다. 이는 폰트 제작자나 제작사에서 그렇게 제작을 한 것이라 인지하면 되며, 우측에 기본 사이즈에 대한 코드가 나옵니다.
웹폰트 URL 삽입 방법
눈누에서 제공하는 웹폰트 URL은 @font-face 방식이며 이는 CSS에 삽입해야 합니다.
아래 예제를 참고해서 원하는 방식으로 삽입하면 됩니다.
html에 삽입
<!DOCTYPE html>
<html lang="ko">
<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">
<meta name="description" content="묘연 블로그 / 일상 / 덕질 / 티스토리 스킨 / 티스토리 스킨 커미션" />
<title>웹폰트 기초 / 웹폰트 변경하기 / 나오지 않는 언어가 있다면 폰트를 추가해보자.</title>
<link rel="shortcut icon" href="https://sweet-myo.tistory.com/favicon.ico" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./images/jquery-3.7.0.min.js"></script>
<style>
@font-face {
font-family: 'S-CoreDream-3Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
~
~
~
</body>
</html>
CSS에 삽입
@charset "utf-8";
@font-face {
font-family: 'S-CoreDream-3Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
그러나 눈누에서는 기본 폰트 한 가지에 대한 URL만 우측에 표기되어 있어서,
만약 다른 굵기의 폰트를 적용하고 싶다면 아래 방법을 따라 하면 됩니다.
1. 원하는 굵기의 폰트 예제에서 마우스 우클릭 > 검사 클릭
예를 들어 에스코어드림 600의 폰트를 원한다면 600이나 왼쪽의 예제에서 우클릭>검사 클릭
2. 브라우저의 아래나 오른쪽에 개발자툴이 나오면 element.style에 font-family가 있는데 여기서 해당 폰트 이름을 복사한 뒤
3. 위 html 코드 있는 곳에 한번 클릭 > 컨트롤+f > 붙여 넣기
하면 해당 굵기의 웹폰트 URL을 찾을 수 있고 필요한 부분만 복사해서 위 예제를 따라 html이나 CSS에 삽입하면 됩니다.
웹폰트 적용 방법
위 Google Fonts의 내용과 동일합니다.
여기까지 웹폰트를 추가, 변경하는 방법을 알아봤고요.
중국어, 일본어, 한문 등이 나오지 않는 경우에 대해 안내드릴게요
중국어, 일본어, 한문 등이 나오지 않는 경우
앞서 웹폰트 설명을 할 때 용량이 크기 때문에 불필요한 부분을 제외하고 압축한다고 했는데 그런 경우일 수도 있고, 원래 제작 자체가 다른 언어에 대한 폰트는 제작이 되지 않았을 수도 있습니다. 예를 들어 영문 폰트에는 한국어, 일본어 등이 필요하지 않으니 없는 게 당연하겠죠?
그럼 나오지 않는 언어에 대한 폰트를 추가하면 됩니다.
위에서 Google Fonts에 대해 안내드렸는데 똑같이 필요한 언어의 폰트를 선택하고 URL 삽입하면 되고요.
CSS에서 폰트를 적용할 때 어디에 적용하는지는 앞서 안내한 것과 같아요.
그러나 한 가지 다른 점이 있는데 아래 예제와 같이 한국어 폰트 뒤에 필요한 언어의 폰트를 추가하면 됩니다.
우리의 주 언어는 한국어니까 한국어가 앞에 있어야겠지요?
body {
font-family: 'Noto Sans KR', 'Noto Sans JP', sans-serif;
}
주의 사항
- 웹폰트 URL 삽입 시 CSS에 @import 방식으로 삽입했는데 적용이 되지 않는다면 @charset "utf-8";의 바로 아래에 추가되었는지 확인합니다.
@charset "utf-8"; 외 다른 코드의 아래에 위치할 경우 적용되지 않을 수 있습니다. - eot 확장자의 웹폰트는 이제 적용되지 않습니다. woff나 woff2 등의 웹폰트를 찾아보세요.
최종 정리
- 웹폰트 url 삽입은 <link>, @import, @font-face 등으로 할 수 있고 이 중 <link>는 html의 <head> 안에, @import와 @font-face는 html에서 <head> 안 <style>에 삽입하거나 CSS의 상단에 삽입한다.
- url을 정상적으로 삽입했다면 CSS의 body를 찾아 font-family: '폰트이름';을 삽입하거나 body에 font-family가 적용되어 있는 곳을 찾아 바꾼 폰트 이름으로 교체한다. body의 원래 폰트와 동일한 폰트를 찾아 모두 바꾸면 된다
일부 최신 묘연 티스토리 스킨은 css의 상단에 :root에서 일괄 변경할 수 있다. - 중국어, 일본어 등 표기되지 않는 언어가 있다면 해당 언어의 웹폰트 url을 삽입하고 CSS에서 한국어 폰트 뒤에 추가하면 된다.
![[CSS] 티스토리 플러그인 카테고리 글 더보기 색상 변경](http://i1.daumcdn.net/thumb/C300x300/?fname=https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVL6j8%2FbtrQWlSG2Ds%2F94XAGV23iGw9AlOtxkUagk%2Fimg.png)
