CDN을 통한 글꼴 요청으로 제한되는 것에 지쳤습니까? 더 이상 보지 마십시오.

특정 글꼴에 대한 기업 라이선스 구매부터 가용성 문제에 이르기까지, 또는 CDN(Content Delivery Network)을 통해 좋아하는 글꼴을 사용할 수 없기 때문에 글꼴을 가져와야 할 수도 있습니다.

개발자로 일하기 시작한 이후로 글꼴이 호스팅될 수 있는 CDN에 연결하는 대신 웹 글꼴을 직접 가져오는 방법을 배웠습니다. 어디서부터 시작해야 할지 몰랐기 때문에 React 앱에서 CSS를 작성하는 가장 좋아하는 방법인 스타일 구성 요소 버전 4를 사용하여 React 설정에서 이 작업을 수행하는 방법을 보여주기 위해 이 빠른 자습서를 작성해야 한다고 생각했습니다.

본론으로 들어가자

먼저 가져올 글꼴을 선택하고 woff 및 woff2 형식으로 다운로드해야 합니다. Woff(및 이후 Woff2)는 Web Open Font Format의 약자이며 W3C(World Wide Web Consortium)에서 권장하는 글꼴 형식입니다. 형식별 압축은 모든 브라우저에서 성능을 보장하고 CDN에서 글꼴을 요청하는 것과 달리 웹 글꼴 대기 시간을 줄입니다.

이를 다운로드할 수 있는 몇 가지 사이트가 있습니다. 예를 들면 다음과 같습니다.

https://www.onlinewebfonts.com

당신이 좋아하는 무엇이든 선택!
W3C에서 권장하고 모든 브라우저에서 널리 지원되는 woff 및 woff2의 두 가지 글꼴 형식 이상을 가져오는 것이 좋습니다.

React 프로젝트에서 src 폴더에 폴더를 만들고 이름을 'fonts'로 지정합니다. 이 폴더에서 fonts.js라는 파일을 만듭니다. 여기에는 글꼴에 대한 가져오기가 포함되며 나중에 나머지 앱에서 사용할 수 있습니다.

이제 동일한 폴더에 방금 다운로드한 두 개의 글꼴 파일을 배치합니다. 이렇게 하면 앱에서 올바르게 가져올 수 있도록 액세스할 수 있습니다. 이 작업을 수행한 후 파일 구조는 다음과 유사해야 합니다.

src
|__fonts
    |__fonts.js
    |__nameOfYourFont.woff2
    |__nameOfYourFont.woff

이제 실제로 '스타일이 지정된 구성 요소'가 전역 글꼴로 가져올 수 있도록 fonts.js 파일에 코드를 작성해 보겠습니다.

fonts.js 파일의 'styled-components'에서 { createGlobalStyle }을 가져옵니다. 이것은 앱에서 전역 CSS 스타일을 처리하는 편리한 작은 도우미입니다. 다이빙을 원하시면 createGlobalStyle on the styled components documentation 을 방문하십시오. 그런 다음 글꼴을 파일로 가져와서 글꼴 선언에서 선언해야 합니다.

import { createGlobalStyle } from 'styled-components';

import NameOfYourFontWoff from './nameOfYourFont.woff';
import NameOfYourFontWoff2 from './nameOfYourFont.woff2';

export default createGlobalStyle`
    @font-face {
        font-family: 'Font Name';
        src: local('Font Name'), local('FontName'),
        url(${NameOfYourFontWoff2}) format('woff2'),
        url(${NameOfYourFontWoff}) format('woff');
        font-weight: 300;
        font-style: normal;
    }
`;

이렇게 하면 선택한 글꼴을 woff 및 woff2 형식으로 가져오고 글꼴 파일을 통해 액세스할 수 있습니다.

그러나 그것은 전투의 절반에 불과합니다.

특정 글꼴을 가져왔지만 아직 앱에서 실제로 가져오지는 않았습니다.

App.js 파일 상단에 React 임포트 후 다음과 같이 작성합니다.

import GlobalFonts from './fonts/fonts';

// assuming you places fonts in your src folder as described above.

일반적으로 사이트 레이아웃 또는 이와 유사한 것을 포함하고 글꼴 스타일이 필요하지 않은 일반 스타일 구성 요소 바로 아래 App.js 파일의 어딘가에 GlobalFonts 구성 요소를 렌더링 반환에 배치합니다.

render() {
    return (
        <Wrapper> 
            <GlobalFonts />
    // ...
        </Wrapper>
    );
}

이 작업을 수행한 후에는 원하는 대로 스타일의 어디에서나 글꼴을 자유롭게 사용할 수 있습니다. 스타일이 지정된 구성 요소 파일에서 다음을 선언합니다(예:

const AwesomeHeadline = styled.h1`
    font-family: 'Font Name';
`;

export default AwesomeHeadline;

짜잔, 방금 웹 글꼴을 가져와 헤드라인에 사용했습니다!

이것이 업무용이든 개인적인 터치가 포함된 멋진 개인 프로젝트이든 앞으로 글꼴을 가져오는 데 도움이 되기를 바랍니다!