React.js में Google फोंट का उपयोग कैसे करें?

96

मैं के साथ एक वेबसाइट का निर्माण किया था React.js और webpack ।

मैं वेबपृष्ठ में Google फ़ॉन्ट का उपयोग करना चाहता हूं , इसलिए मैंने लिंक को अनुभाग में रखा।

Google फ़ॉन्ट्स

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

और CSS सेट करें

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

हालांकि, यह काम नहीं करता है।

इस समस्या का समाधान किस प्रकार से किया जा सकता है?

reactjs webpack google-font-api

— केविन ह्सियाओ
स्रोत

1

आपने <link>पृष्ठ शीर्षलेख में डाला , अपनी प्रतिक्रिया ऐप में नहीं, सही? क्या आप font-familyअपनी स्टाइलशीट में या अपने तत्वों पर सीधे कहीं और निर्दिष्ट करते हैं?

— तिमो

क्या आप https का उपयोग कर रहे हैं, और क्या आपके पास सुरक्षा नीति है?

— स्टुअर्ट

दरअसल, मुझे पता है कि Google फ़ॉन्ट्स आयात करने की सही विधि क्या है। मुझे लगता है कि मुझे एक सरल उदाहरण की आवश्यकता है। क्या आप मेरी मदद कर सकते हैं ...

— केविन ह्सियाओ

आपका मार्कडाउन कैसा दिखता है? क्या आप अन्य शैलियों को परिभाषित कर रहे हैं जो कि अधिक सामान्य को अधिलेखित कर सकते हैं?

— मैनमोंटमैट

मैंने इस समस्या को हल कर लिया था ..... मैंने पहले जो तरीका आजमाया वह गलत था। यह सही विधि है। स्थानीय रूप से (hjs-webpack और React में) Google फ़ॉन्ट्स का उपयोग करना हालांकि, अभी भी वेबपैक प्रक्रिया में कुछ त्रुटि है। उन दो लाइन कोड को webpack.config.js फ़ाइल में लिखा जाना चाहिए ।

{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

— केविन ह्सियाओ

83

किसी प्रकार की मुख्य या पहली लोडिंग सीएसएस फ़ाइल में, बस करें:

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

आपको किसी भी प्रकार के @ फॉन्ट-फेस इत्यादि में लपेटने की आवश्यकता नहीं है, जो प्रतिक्रिया आपको Google के एपीआई से वापस मिलती है वह जाने के लिए तैयार है और आपको सामान्य जैसे फ़ॉन्ट परिवारों का उपयोग करने की अनुमति देता है।

फिर अपने मुख्य रिएक्ट ऐप जावास्क्रिप्ट में, शीर्ष पर कुछ इस तरह रखें:

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

वास्तव में मैंने app.cssजो किया वह fonts.cssकुछ फ़ॉन्ट आयातों के साथ आयात किया गया था। बस संगठन के लिए (अब मुझे पता है कि मेरे सभी फोंट कहां हैं)। याद रखने वाली महत्वपूर्ण बात यह है कि आप पहले फोंट आयात करते हैं।

ध्यान रखें कि आपके द्वारा अपने रिएक्ट ऐप में आयात किए जाने वाले किसी भी घटक को स्टाइल आयात के बाद आयात किया जाना चाहिए। खासकर अगर उन घटकों को भी अपनी शैली आयात करते हैं। इस तरह आप शैलियों के क्रम के बारे में सुनिश्चित हो सकते हैं। यही कारण है कि आपकी मुख्य फ़ाइल के शीर्ष पर फ़ॉन्ट आयात करना सबसे अच्छा है (यदि आपको परेशानी हो रही है तो अपनी अंतिम बंडल सीएसएस फ़ाइल को दोबारा जांचना न भूलें)।

फोंट लोड करते समय अधिक कुशल होने के लिए कुछ विकल्प आप Google फॉन्ट एपीआई पास कर सकते हैं, आदि। आधिकारिक दस्तावेज देखें: Google फॉन्ट एपीआई के साथ शुरुआत करें

संपादित करें, ध्यान दें: यदि आप "ऑफ़लाइन" एप्लिकेशन के साथ काम कर रहे हैं, तो आपको वास्तव में फोंट डाउनलोड करने और वेबपैक के माध्यम से लोड करने की आवश्यकता हो सकती है।

— टॉम
स्रोत

क्या आप यह बता सकते हैं कि html सिर में लिंक का उपयोग करने का तरीका काम नहीं करता है?

— २२:०२ पर डोबियन

58

React.js में Google फोंट?

अपनी स्टाइलशीट खोलें अर्थात, app.css, style.css (आपका नाम क्या है), इससे कोई फर्क नहीं पड़ता, बस स्टाइलशीट खोलें और इस कोड को पेस्ट करें

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

और अपने फ़ॉन्ट का URL बदलना न भूलें जो आप चाहते हैं, अन्यथा ठीक काम करना

और इस का उपयोग करें:

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

— Rizo
स्रोत

क्या जेएस के साथ फोंट लोड करना बेहतर नहीं है? मेरा मतलब है परफॉमेंस कारणों से।

— साइमन फ्रेंज़ेन

क्या आप यह बता सकते हैं कि html सिर में लिंक का उपयोग करने का तरीका काम नहीं करता है?

— २२:०२ पर डोबियन

21

यदि आप Create React App परिवेश का उपयोग कर रहे हैं तो बस @import नियम को index.css में इस तरह जोड़ें:

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

अपने मुख्य प्रतिक्रिया ऐप में index.css आयात करें:

import './index.css'

प्रतिक्रिया आपको इनलाइन स्टाइलिंग, सीएसएस मॉड्यूल या स्टाइल घटक का एक विकल्प सीएसएस लागू करने के लिए देता है:

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

— मैक्स
स्रोत

11

आपको यह ट्यूटोरियल देखना चाहिए: 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']
  }
});

मैंने अभी इस विधि की कोशिश की है और मैं कह सकता हूं कि यह बहुत अच्छी तरह से काम करता है;)

— aldobsom
स्रोत

8

अपनी CSS फ़ाइल में, जैसे कि App.css में क्रिएट-रिएक्शन-ऐप, एक फॉन्टफेस इम्पोर्ट जोड़ें। उदाहरण के लिए:

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

फिर बस उसी सीएसएस फ़ाइल के भीतर DOM तत्व में फ़ॉन्ट जोड़ें।

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

— mrdougwright
स्रोत

3

यदि आप ऐसा करना चाहते हैं तो यह @ फॉन्ट-फेस है और यह Google के फॉन्ट एपीआई के साथ आवश्यक नहीं है।

— टॉम

लेकिन क्या होगा अगर आप अपने फोंस को css फाइल में परिभाषित करना चाहते हैं , क्योंकि वे जहाँ हैं वहीं हैं? लेकिन आप अभी भी Google की होस्टिंग का लाभ उठाना चाहते हैं? क्या यह आवश्यक नहीं है, या एक बेहतर तरीका है?

— पत्थर

5

एक ही मुद्दा था। के "बजाय मैं उपयोग कर रहा था' ।

उपयोग @import url('within single quotes');इस तरह का करें

ऐसा नहीं @import url("within double quotes");है

— देके
स्रोत

2

मैंने अपनी css फ़ाइल में @import और @ font-face जोड़ा और यह काम कर गया।

— हीथर अकपन
स्रोत

1

आपको Google फोंट के लिए दोनों की आवश्यकता नहीं है, बस stackoverflow.com/questions/48057801/…@import

— Luciano

2

यहाँ अच्छा जवाब में से सभी के लिए एक अन्य विकल्प 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

यदि कोई (.less) के साथ समाधान की तलाश में है, तो नीचे देखें। अपनी मुख्य या सामान्य कम फ़ाइल खोलें और नीचे की तरह उपयोग करें।

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

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

— jaison
स्रोत

0

यह अंत में लिंक का स्व-समापन टैग हो सकता है, कोशिश करें:

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

और अपने main.css फ़ाइल में कोशिश करें:

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

— रूपर्ट
स्रोत

0

यहां दो अलग-अलग तरीके हैं जिनसे आप अपनी प्रतिक्रिया ऐप में फ़ॉन्ट जोड़ सकते हैं।

स्थानीय फोंट जोड़ना

fontsअपने srcफ़ोल्डर में एक नया फ़ोल्डर बनाएं ।
स्थानीय रूप से Google फ़ॉन्ट डाउनलोड करें और उन्हें fontsफ़ोल्डर के अंदर रखें।
अपनी 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 फोंट (एपी) का उपयोग करना पसंद करते हैं, तो आप इसे इस तरह से जोड़ सकते हैं।

@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/ पर पोस्ट किया गया )

— saigowthamr
स्रोत