setting global font family in react-ag捕鱼王app官网

current location：home > learning > web front-end > react >

vue react javascript css

setting global font family in react

author：jiyik last updated：2025/03/11 views：

to set a global font family in react, you need to set the style on the html element in the index.cssfont-family file and then import the file into your index.js file. the global css should be imported in the index.js to ensure that it is loaded on all pages of your react application.

here is an example of setting css properties in the index.css file.font-family

body,
html {
  font-family: roboto, helvetica, sans-serif;

  /* 👇️ 或使用操作系统默认字体 👇️ */
  /* font-family: -apple-system, blinkmacsystemfont, 'segoe ui', 'roboto', 'oxygen',
    'ubuntu', 'cantarell', 'fira sans', 'droid sans', 'helvetica neue',
    sans-serif; */
}

here is how we can import the index.css file in the index.js file .

// 👇️ import css
import './index.css';

import {createroot} from 'react-dom/client';
import app from './app';

const rootelement = document.getelementbyid('root');
const root = createroot(rootelement);

root.render(
  <app />
);

the above example assumes that our index.css file is in the same directory as our index.js file.

when importing a global css file in react, it is best to import the css file into the index.js file.

the index.js file is the entry point of your react application, so it will always be run.

on the other hand, if we import a css file into a component, the css styles may be removed after the component is unmounted.

if we have already downloaded the font and need to load it from a local file, simply create a fontface in our src folder and move our font there.

now we can import them into our index.css file.

the following examples assume that we have downloaded the poppins font into the src/fonts directory.

body,
html {
  font-family: 'poppins', sans-serif;
}

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

@font-face {
  font-family: 'poppins';
  font-weight: 900;
  src: local('poppins'), url(./fonts/poppins-bold.ttf) format('truetype');
}

@font-face {
  font-family: 'poppins';
  font-weight: 900;
  src: local('poppins'), url(./fonts/poppins-black.ttf) format('truetype');
}

for .ttfthe format, we pass truetype to format()the function.

for .woffthe format, we pass woff to format()the function.

for .otfthe format, we pass opentype to format()the function.

we can download fonts by selecting a font from google fonts and clicking the download all button.

if we want to set the global font-family based on external styles, e.g. from google fontsa cdn, make sure to load the styles in the public/index.html file.

for example, with google fonts, we can click on the font of our choice and then click on “select this style” and we will get a link that we can add to the head tag of our index.html file.

setting global font family in react

html>
<htmllang="en">
  <head>

    

    <linkrel="preconnect"href="https://fonts.googleapis.com" />
    <linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin />
    <linkhref="https://fonts.googleapis.com/css2?family=square peg&display=swap"rel="stylesheet"
    />

    <title>react apptitle>
  head>
  <body>
    <noscript>you need to enable javascript to run this app.noscript>
    <divid="root">div>
  body>
html>

after copying the link tag to the section of the index.html file in the public/head directory , we still need to set the property in the index.css file.font-family

body, html {
  font-family: 'square peg', cursive;
}

font-familythe value of the attribute depends on the specific font we selected. we should be able to find it below the get link tag.

previous：conditionally setting styles in react

next: none

for reprinting, please send an email to 1244347461@qq.com for approval. after obtaining the author's consent, kindly include the source as a link.

article url：

conditionally setting styles in react

publish date：2025/03/11 views：72 category：react

在 react 中有条件地设置样式：在元素上设置 `style` 属性。使用三元运算符有条件地设置 css 属性的值。例如，backgroundcolor: count > 0 ? 'lime' : 'salmon'。

publish date：2025/03/11 views：174 category：react

在 react 中获取元素的高度：在元素上设置 ref 属性。在 uselayouteffect 钩子中，更新高度的状态变量。使用 clientheight 属性获取元素的高度。

publish date：2025/03/11 views：169 category：react

大多数开发人员都非常熟悉 react hooks 的工作方式和常见用例，但是有一个 useeffect 问题很多人可能不太清楚。

publish date：2025/03/11 views：104 category：react

react lazy 函数允许我们动态导入组件。我们可能希望这样做以减少用户必须下载才能在屏幕上看到内容的初始捆绑包大小。

setting global font family in react-ag捕鱼王app官网