使用shopify polaris Reactjs的Google字体

Question

我在更改shopify polaris的字体时遇到问题。在我的styles.css中，我有以下内容：

@import url("https://fonts.googleapis.com/css?family=Archivo");
.App {
  font-family: Archivo;
  text-align: center;
  font-weight: bold;
}

在我的index.js中，我有这个：

function App() {
  return (
    <div className="App">
      <AppProvider>
        <Button>Test Button</Button>
      </AppProvider>
    </div>
  );
}

我也在index.js中使用import './styles.css'。下面是代码沙箱：https://codesandbox.io/s/98kmj283lp。它真的很小很简单。如果有人能帮我做这件事，那就太好了！谢谢!

Answer 1

如果您在Button之外的正文中键入一些文本，您将看到字体更改实际上正在产生影响。

然而，我认为你不应该改变文本的字体，也不应该改变Button或购物应用程序中任何其他组件的字体。Polaris框架的全部目的就是让一切看起来都一样。另外，我不会改变普通文本的字体。

请参阅此处的指导原则：https://polaris.shopify.com/design/typography#section-font-stack