LINE Seed
LINE의 첫번째 글꼴인 LINE Seed를 만나보세요.
seed.line.me
라인의 무료 폰트를 다운받아 사용하려는데 html에 적용하는 방법이 적혀있지않아 적어본다.
우선 폰트를 다운받는다.
나는 라라벨 프로젝트이지만 적용 방법은 다 같을것 이기에 알아서 참고하길 바란다.
public에 css/fonts에 넣어줬다.
그리고base.css는 전체적으로 쓰일 css인데 *{margin:0} 같은 전체적인 부분을 사용하는 css라고 보면된다.
-base.css-
@font-face{
font-family:'LINESeedKR-Bd';
src:url('./fonts/LINE_SeedKR/Web/eot/LINESeedKR-Bd.eot') format('eot');
}
@font-face{
font-family:'LINESeedKR-Rg';
src:url('./fonts/LINE_SeedKR/Web/eot/LINESeedKR-Rg.eot') format('eot');
}
@font-face{
font-family:'LINESeedKR-Th';
src:url('./fonts/LINE_SeedKR/Web/eot/LINESeedKR-Th.eot') format('eot');
}
@font-face{
font-family:'LINESeedKR-Bd';
src:url('./fonts/LINE_SeedKR/Web/woff/LINESeedKR-Bd.woff') format('woff');
}
@font-face{
font-family:'LINESeedKR-Rg';
src:url('./fonts/LINE_SeedKR/Web/woff/LINESeedKR-Rg.woff') format('woff');
}
@font-face{
font-family:'LINESeedKR-Th';
src:url('./fonts/LINE_SeedKR/Web/woff/LINESeedKR-Th.woff') format('woff');
}
@font-face{
font-family:'LINESeedKR-Bd';
src:url('./fonts/LINE_SeedKR/Web/woff2/LINESeedKR-Bd.woff2') format('woff2');
}
@font-face{
font-family:'LINESeedKR-Rg';
src:url('./fonts/LINE_SeedKR/Web/woff2/LINESeedKR-Rg.woff2') format('woff2');
}
@font-face{
font-family:'LINESeedKR-Th';
src:url('./fonts/LINE_SeedKR/Web/woff2/LINESeedKR-Th.woff2') format('woff2');
}사용할 폰트의 이름과 위치를 저장한다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="{{ asset('css/base.css') }}">
<style>
body {
font-family: 'LINESeedKR-Rg', sans-serif;
}
</style>
</head>그리고 사용할 페이지에서 base.css를 불러오고 font-family에 저장한 폰트 이름을 사용하면 된다.
'Web' 카테고리의 다른 글
| window에서 nginx사용하기 (0) | 2024.05.12 |
|---|---|
| Windows의 네트워크 설정을 조작하는 netsh 도구를 사용하여 포트포워딩 (0) | 2024.05.12 |
| HTTP 메서드 (0) | 2023.06.24 |
| [vercel]배포 ERESOLVE could not resolve error (0) | 2023.04.16 |
| CORS(Cross-Origin Resource Sharing) 출처가 다른 자원들을 공유 (0) | 2023.04.11 |
