React JS：如何为登录/注册页面单独设置字体族？

1. 引入Nunito字体 #

将Nunito字体文件放到项目静态资源目录（比如/src/fonts/），然后在全局CSS文件（如index.css）中定义字体：

@font-face {
  font-family: 'Nunito';
  src: url('./fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Nunito';
  src: url('./fonts/Nunito-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
/* 按需添加500、600等其他字重的字体定义 */

2. 全局设置Ubuntu字体 #

在全局CSS中配置默认字体为Ubuntu，确保所有元素继承该字体：

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

/* 让所有元素继承父级字体，避免组件库自带字体干扰 */
* {
  font-family: inherit;
}

3. 覆盖登录页卡片内的字体 #

针对你代码里的.login-card容器，强制其内部所有元素使用Nunito字体。在登录页专属CSS文件（比如LoginPage.css）中添加：

/* 覆盖卡片内所有元素的字体，包括标题、表单、按钮等 */
.login-card,
.login-card * {
  font-family: 'Nunito', sans-serif !important;
}

用!important是为了覆盖Ant Design等组件库自带的高优先级字体样式，确保Nunito生效。如果不想用!important，可以写更具体的选择器：

.login-card h1,
.login-card .ant-btn,
.login-card .ant-input,
.login-card .ant-form-item-label,
.login-card .ant-form-item-explain {
  font-family: 'Nunito', sans-serif;
}

前者更省心，能一次性覆盖卡片内所有子元素。

4. 注册页同理处理 #

给注册页的卡片容器加上类似register-card的类，然后在对应CSS文件中复制上述规则：

.register-card,
.register-card * {
  font-family: 'Nunito', sans-serif !important;
}

设置完成后，全局页面默认使用Ubuntu字体，仅登录/注册页的卡片内所有文本会切换为Nunito，卡片外的元素（比如你代码里的back-to-home按钮）依然保持Ubuntu字体。

内容的提问来源于stack exchange，提问作者Goktug