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>
     
      * {
        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>

 

 

before after