React에서 Adobe Fonts를 사용하고 싶습니다!

입문

React에서 AdobeFonts를 사용하기 위해 요약했습니다.
결국 이렇게 될 거야.

말하자면 Adobe Fonts?

https://fonts.adobe.com/
풍부한 글꼴에서 좋아하는 글꼴을 빠르게 찾을 수 있어 쉽게 적용할 수 있는 좋은 인터넷 글꼴 서비스다.

개발 환경

VsCode
npm 6.12.1

설치하다

Adobe 계정 만들기

https://fonts.adobe.com/
상술한 사이트를 방문하여 계정을 만드세요.

AdobeFonts에서 원하는 글꼴을 찾아 프로젝트에 추가

다음은 우리가 좋아하는 글씨체를 찾자.
찾으면 아래 그림에 표시된 코드 아이콘을 누르십시오.

창이 나왔습니다. 새 항목, 저장 단추를 누르십시오.

그리고 웹 사이트에서 글꼴을 가져오는 데 사용할 링크 탭과 Css를 표시합니다.
그러면 AdobeFonts 측의 준비가 완료됩니다.

React 항목에서 글꼴을 가져오고 적용합니다.

방금 확인한 링크 태그를 구성 요소 return() 에 배치합니다.
ShopPage.js

import React from "react";
import "./ShopPage.css";

export function ShopPage() {
  return (
    <div className="ShopPage">
      <link rel="stylesheet" href="https://use.typekit.net/wrq6syh.css"></link>
      <div className="top-title-background w-screen bg-red-800 text-white p-4">
        <div className="flex">
          <div className="w-1/2">
            <p className="-mb-8">Shop</p>
            <p className="-mb-8">Sample</p>
            <p className="-mb-8">Page</p>
          </div>
          <div className="discription w-1/2 h-auto">
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
            <p>some discription some discription some discription</p>
          </div>
        </div>
      </div>
      <div className="intro">
        <h1>Introduction</h1>
      </div>
    </div>
  );
}

그리고 Css를 적용합니다.
ShopPage.css

.top-title-background {
  height: 25rem;
  font-family: bungee, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 6rem;
}

.discription {
    font-family: fira-sans,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
}

body{
    background-color: #e7e7b8;
}

h1{
  font-family: bungee, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 2.5rem;
}

동작 확인

이게 완성이야.
서버를 만들어서 확인해 보세요.

이런 느낌이 들 거예요.

끝날 때

웹 글씨체는 정말 편리하다.
다만 로컬에서 개발할 때 네트워크 환경이 없으면 글꼴을 읽을 수 없는 병목이다.