Pretendard Lite

가볍고 빠른 프리텐다드 폰트 패키지입니다.

설치

npm install pretendard-lite

사용 방법

JavaScript/TypeScript

// ESM
import 'pretendard-lite/style.css';

// CommonJS
require('pretendard-lite/style.css');

스타일 라이브러리별 사용법

Tailwind CSS

// 1. 먼저 CSS를 import 합니다
// src/styles/globals.css 또는 main CSS 파일
@import 'pretendard-lite/style.css';

// 2. Tailwind 설정에 폰트를 추가합니다
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Pretendard', 'system-ui', 'sans-serif'],
      },
    },
  },
};

// 3. 사용 예시
// className="font-sans"로 적용됩니다

Styled Components

// globalStyle.js
import { createGlobalStyle } from 'styled-components';
import 'pretendard-lite/style.css';

export const GlobalStyle = createGlobalStyle`
  body {
    font-family: var(--font-sans);
  }
`;

// App.js
import { GlobalStyle } from './globalStyle';

function App() {
  return (
    <>
      <GlobalStyle />
      {/* 나머지 컴포넌트들 */}
    </>
  );
}

Emotion

// globalStyles.js
import { Global, css } from '@emotion/react';
import 'pretendard-lite/style.css';

export const globalStyles = (
  <Global
    styles={css`
      body {
        font-family: var(--font-sans);
      }
    `}
  />
);

// App.js
import { globalStyles } from './globalStyles';

function App() {
  return (
    <>
      {globalStyles}
      {/* 나머지 컴포넌트들 */}
    </>
  );
}

Next.js

// pages/_app.js 또는 pages/_app.tsx
import 'pretendard-lite/style.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Vue.js

// main.js
import 'pretendard-lite/style.css';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Angular

/* styles.css */
@import 'pretendard-lite/style.css';

:root {
  --font-sans: 'Pretendard', system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
}

CSS

body {
  font-family: var(--font-sans);
}

/* 폰트 웨이트 사용 예시 */
.light-text {
  font-weight: 300;
}

.regular-text {
  font-weight: 400;
}

.bold-text {
  font-weight: 700;
}

특징

• Light(300), Regular(400), Bold(700) 웨이트 지원
• woff2 포맷 사용으로 최적화된 로딩
• CSS 변수를 통한 쉬운 적용
• 모든 주요 프레임워크 지원 (React, Vue, Angular 등)

라이선스

MIT License