Framework/react
[react css] Pretendard 폰트 적용하기
딸기뚜왈기
2025. 3. 14. 18:32
@import로 폰트를 로드하는 부분은 CSS 파일에서 다른 스타일 규칙들보다 상단에 위치해야 제대로 적용됨.
@import url('https://cdn.jsdelivr.net/npm/pretendard@latest/css/preload.css');
@import
url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>네이버 레이아웃 따라하기</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Pretendard Variable', sans-serif;
}
header {
margin: auto;
width: 1000px;
display: flex;
height: 215px;
align-items: center;
position: relative;
}
.login_box >button {
width: 300px;
height: 50px;
background-color: #03cf5d;
border-color: #03cf5d;
}
.login_btn{
font-family: 'Pretendard Variable', sans-serif;
font-size: 17px;
font-weight: 900 !important;
}
.bold{
font-family: 'Pretendard Variable', sans-serif;
font-weight: 900 !important;
}
</style>
</head>
<form>
<div class="login_box">
<button class="login_btn" type="button">
<span class="bold">네이버</span>
<span class="light">로그인</span>
</button>
</div>
</form>