จะใช้ Google Fonts ใน React.js ได้อย่างไร?

ผมได้สร้างเว็บไซต์ที่มีReact.jsและwebpack

ฉันต้องการใช้แบบอักษรของ Googleในหน้าเว็บดังนั้นฉันจึงใส่ลิงค์ในส่วนนี้

Google Fonts

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

และตั้งค่า CSS

body{
    font-family: 'Bungee Inline', cursive;
}

อย่างไรก็ตามมันไม่ได้ผล

ฉันจะแก้ปัญหานี้ได้อย่างไร?

ในไฟล์ CSS หลักหรือไฟล์แรกที่โหลดเพียงทำ:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

คุณไม่จำเป็นต้องใส่ @ font-face ใด ๆ เป็นต้นคำตอบที่คุณได้รับกลับมาจาก API ของ Google ก็พร้อมใช้งานและให้คุณใช้ตระกูลฟอนต์ได้เหมือนปกติ

จากนั้นใน React app หลักของคุณ JavaScript ที่ด้านบนให้ใส่สิ่งที่ต้องการ:

import './assets/css/fonts.css';

สิ่งที่ฉันทำจริง ๆ แล้วคือapp.cssการนำเข้าที่fonts.cssมีการนำเข้าแบบอักษรไม่กี่ตัว สำหรับองค์กร (ตอนนี้ฉันรู้แล้วว่าฟอนต์ทั้งหมดอยู่ที่ไหน) สิ่งสำคัญที่ต้องจำไว้คือคุณนำเข้าแบบอักษรก่อน

โปรดทราบว่าควรนำเข้าส่วนประกอบใด ๆ ที่คุณนำเข้าสู่แอป React ของคุณหลังจากการนำเข้าสไตล์ โดยเฉพาะอย่างยิ่งถ้าส่วนประกอบเหล่านั้นนำเข้าสไตล์ของตัวเองด้วย ด้วยวิธีนี้คุณจะมั่นใจได้ถึงลำดับรูปแบบ นี่คือเหตุผลที่ดีที่สุดที่จะนำเข้าแบบอักษรที่ด้านบนของไฟล์หลักของคุณ (อย่าลืมตรวจสอบไฟล์ CSS สุดท้ายที่รวมไว้เพื่อตรวจสอบอีกครั้งว่าคุณประสบปัญหาหรือไม่)

มีตัวเลือกสองสามอย่างที่คุณสามารถส่งผ่าน Google Font API เพื่อให้มีประสิทธิภาพมากขึ้นเมื่อโหลดแบบอักษร ฯลฯ ดูเอกสารอย่างเป็นทางการ: เริ่มต้นใช้งาน Google Fonts API

แก้ไขหมายเหตุ: หากคุณกำลังจัดการกับแอปพลิเคชัน "ออฟไลน์" คุณอาจต้องดาวน์โหลดแบบอักษรและโหลดผ่าน Webpack

แบบอักษร Google ใน React.js?

เปิดสไตล์ชีตของคุณเช่น app.css style.css (คุณมีชื่ออะไร) ไม่สำคัญเพียงแค่เปิดสไตล์ชีทแล้ววางรหัสนี้

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

และอย่าลืมเปลี่ยน URL ของแบบอักษรที่คุณต้องการเพราะอย่างอื่นก็ใช้ได้ดี

และใช้สิ่งนี้เป็น:

body {
  font-family: 'Josefin Sans', cursive;
}

หากคุณใช้สภาพแวดล้อม Create React App เพียงแค่เพิ่ม @import rule ไปที่index.cssดังนี้:

@import url('https://fonts.googleapis.com/css?family=Anton');

นำเข้าindex.cssในแอป React หลักของคุณ:

import './index.css'

React ช่วยให้คุณสามารถเลือกรูปแบบ Inline, CSS Modules หรือ Styled Components เพื่อใช้ CSS:

font-family: 'Anton', sans-serif;

คุณควรดูบทช่วยสอนนี้: https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});

ฉันเพิ่งลองวิธีนี้และบอกได้เลยว่าได้ผลดีมาก;)

ในไฟล์ CSS ของคุณเช่น App.css ใน create-react-app ให้เพิ่มการนำเข้าแบบอักษร ตัวอย่างเช่น:

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

จากนั้นเพิ่มแบบอักษรให้กับองค์ประกอบ DOM ภายในไฟล์ css เดียวกัน

body {
  font-family: 'Bungee Inline', cursive;
}

มีปัญหาเดียวกัน ปรากฎว่าฉันใช้"แทน'.

ใช้@import url('within single quotes');แบบนี้

ไม่ใช่@import url("within double quotes");แบบนี้

ฉันเพิ่ม @import และ @ font-face ในไฟล์ css ของฉันและมันใช้งานได้

ตัวเลือกทั้งหมดของคำตอบที่ดีที่นี่ก็คือแพคเกจ NPM react-google-font-loaderพบที่นี่

การใช้งานนั้นง่ายมาก:

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

จากนั้นคุณสามารถใช้ชื่อสกุลใน CSS ของคุณ:

body {
    font-family: 'Bungee Inline', cursive;
}

ข้อจำกัดความรับผิดชอบ:ฉันเป็นผู้เขียนreact-google-font-loaderแพ็คเกจ

นี่คือสองวิธีที่แตกต่างกันในการเพิ่มแบบอักษรให้กับแอปตอบกลับ

การเพิ่มแบบอักษรท้องถิ่น

1. สร้างโฟลเดอร์ใหม่ที่เรียกว่าfontsในsrcโฟลเดอร์ของคุณ

2. ดาวน์โหลดแบบอักษรของ Google ในเครื่องและวางไว้ในfontsโฟลเดอร์

3. เปิดindex.cssไฟล์ของคุณและรวมแบบอักษรโดยอ้างอิงเส้นทาง

@font-face {
  font-family: 'Rajdhani';
  src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}

ที่นี่ฉันเพิ่มRajdhaniแบบอักษร

ตอนนี้เราสามารถใช้ฟอนต์ของเราในคลาส css ได้เช่นนี้

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

การเพิ่มแบบอักษรของ Google

หากคุณต้องการใช้แบบอักษรของ Google (api) แทนแบบอักษรในเครื่องคุณสามารถเพิ่มได้เช่นนี้

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

ในทำนองเดียวกันคุณสามารถเพิ่มเข้าไปในindex.htmlไฟล์โดยใช้linkแท็ก

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">

(โพสต์ครั้งแรกที่https://reactgo.com/add-fonts-to-react-app/ )

หากใครที่กำลังมองหาวิธีแก้ปัญหาด้วย (.less) ลองดูด้านล่าง เปิดไฟล์หลักหรือไฟล์ทั่วไปของคุณและใช้งานดังนี้

@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body{
  font-family: "Open Sans", sans-serif;
}

มันอาจจะเป็นแท็กปิดตัวเองของการเชื่อมโยงที่สิ้นสุดลอง:

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/> 

และในไฟล์ main.css ของคุณลอง:

body,div {
  font-family: 'Bungee Inline', cursive;
}

ในบางกรณีทรัพยากรแบบอักษรของคุณอาจอยู่ที่ไหนสักแห่งในไดเรกทอรีโครงการของคุณ คุณสามารถโหลดแบบนี้โดยใช้ SCSS

 $list: (
      "Black",
      "BlackItalic",
      "Bold",
      "BoldItalic",
      "Italic",
      "Light",
      "LightItalic",
      "Medium",
      "MediumItalic",
      "Regular",
      "Thin",
      "ThinItalic"
    );
    
    @mixin setRobotoFonts {
      @each $var in $list {
        @font-face {
          font-family: "Roboto-#{$var}";
          src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
        }
      }
    }
@include setRobotoFonts();