Tailwind CSS에서 .ttf 글꼴을 사용하는 방법

프론트엔드 개발자라면 훌륭하고 독특한 글꼴을 검색하는 동안 몇 가지 문제에 직면할 수 있습니다. Google fonts에서 사용할 수 없지만 .ttf 또는 .woff 또는 이와 유사한 다른 형식에서 사용할 수 있는 일부 특수 글꼴을 사용하려는 경우. 그런 다음 Tailwind CSS와 함께 사용하는 방법을 보여 드리겠습니다.

그에 대한 단계별 과정을 보여드리겠습니다. 나는 NextJs에 빈 프로젝트를 초기화 했으므로 NextJs 폴더 구조를 참조하여 이야기할 것이지만 모든 프레임워크 또는 바닐라 JS 프로젝트에 대해 동일한 프로세스를 따를 수 있습니다.

1단계. 스타일 폴더 안에 폴더 글꼴(어떤 이름이든 사용할 수 있음)을 만듭니다.
1단계. 글꼴 폴더 안에 .ttf 또는 .woff 글꼴을 추가합니다.
3단계. 글꼴 폴더 안에 새 CSS 파일을 만듭니다. 저는 stylesheet.css를 만들고 있습니다.
4단계. 이제 @font-face CSS 규칙을 사용하여 CSS에서 자체 글꼴을 가져올 수 있습니다.

@font-face{
    font-family: 'Pixellari'; // Write the name of your custom font.


    // Below you need to give the path of the font, If you have only one format no problem
    // but if you have more then one format, you can add all those, you just need to
    // separate these with commas.
    src: url('Pixellari.woff2') format('woff2'), url('Pixellari.woff') format('woff');
}

5단계. 이제 글로벌 CSS에서 이전 CSS 파일을 가져와야 합니다. 제 경우에는 stylesheet.css를 내 globals.css로 가져와야 합니다.

@import url('./fonts/stylesheet.css');

6단계. 이제 마지막으로 tailwind CSS에 글꼴 모음을 확장해야 함을 알려야 합니다. 이를 위해 tailwind.config.js에 몇 줄을 추가해야 합니다.

module.exports = {
    //.... All the initial code
    theme: {
        extend: {
            fontFamily: {
                'pixellari' : ['Pixellari', 'sans-serif'],  // after you font, add some fonts separated by commas to handle fallback.
            }
        }
    }
    //.... All the initial code
}

이제 갈 수 있습니다. 이제 html class 또는 jsx className 에서 font-pixellari 속성을 사용할 수 있습니다.

시간 내 줘서 고마워

이 블로그가 마음에 드셨기를 바라며 귀하의 기술에 약간의 가치를 추가하십시오. 또는 에서 언제든지 저에게 연락해 주세요.