해당 포스트는 웹에서
@font-face를 이용해 폰트 및 굵기 적용 방법에 대한 포스트입니다.
폰트는 시작하는 시점에 메인, 서브, 특수 폰트 세 가지 정도를 정하고 사용하는 것이 좋은 것 같습니다.
개발 도중에 적용하면 레이아웃이 달라지거나 굵기가 원하는 대로 적용이 안 되는 경우가 발생합니다 🥲
❓ 작성 이유
최근에 blegram라는 개인 프로젝트는 하는 도중에 폰트를 적용하게 되었습니다.
Google Fonts만 사용하다가 눈누라는 사이트를 알게 되었고 폰트를 적용하면서 굵기가 적용이 안되는 문제가 있어서 원인을 찾아보다가 알게 되어서 기록하는 포스트입니다.
🗜️ 폰트 적용 방법
눈누에서 원하는 폰트에 들어가서 우측 상단에 있는 웹폰트로 사용부분을 복사해서 css에 붙여넣기를 하면 됩니다.
아래처럼 사용하면 굵기가 normal인 하나의 폰트만 다운받아서 사용하는 것입니다.
따라서 다른 굵기를 사용해도 변화가 없이 기본 굵기만 적용됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@font-face {
/* 사용한 폰트 이름 */
font-family: "BMJUA";
/* 적용할/다운받을 폰트 경로 및 타입 */
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff") format("woff");
/* 사용할 폰트 굵기 ( 기본 값 ) */
font-weight: normal;
/* 사용할 폰트 스타일 ( 기본 값 ) */
font-style: normal;
}
body {
/* 폰트는 상속되기 때문에 상위에서 선언해주면 모두 적용됨 */
font-family: "BMJUA", "Noto Sans KR", sans-serif;
}
🩺 굵기 별 폰트 적용 방법
폰트를 굵기 별로 적용하려면 @font-face를 여러 번 사용하면 됩니다.
아래는 더잠실체를 적용한 예시입니다.
.ttf 파일을 다운받아서 정적 폴더에 넣고 해당 src: url("")의 경로에 작성해주면 됩니다.
각 굵기 별로 font-weight를 명시해주면 사용하는 곳에서 굵기에 따라서 다른 .ttf를 사용하기 때문에 굵기 단위로 폰트를 적용할 수 있게 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
* https://noonnu.cc/font_page/1127
* https://company.lottemart.com/company/font_jamsil.asp
*/
@font-face {
font-family: "TheJamsil5";
font-style: normal;
font-weight: 100;
src: url("/fonts/The Jamsil 1 Thin.ttf") format("woff2");
}
@font-face {
font-family: "TheJamsil5";
font-style: normal;
font-weight: 300;
src: url("/fonts/The Jamsil 2 Light.ttf") format("woff2");
}
@font-face {
font-family: "TheJamsil5";
font-style: normal;
font-weight: 400;
src: url("/fonts/The Jamsil 3 Regular.ttf") format("woff2");
}
@font-face {
font-family: "TheJamsil5";
font-style: normal;
font-weight: 500;
src: url("/fonts/The Jamsil 4 Medium.ttf") format("woff2");
}
@font-face {
font-family: "TheJamsil5";
font-style: normal;
font-weight: 700;
src: url("/fonts/The Jamsil 5 Bold.ttf") format("woff2");
}
@font-face {
font-family: "TheJamsil5";
font-style: normal;
font-weight: 800;
src: url("/fonts/The Jamsil 6 ExtraBold.ttf") format("woff2");
}
body {
/* 폰트는 상속되기 때문에 상위에서 선언해주면 모두 적용됨 */
font-family: "TheJamsil5", "Noto Sans KR", sans-serif;
}