Я использую gatsby-theme-blog и хотел бы использовать шрифты, отличные от «Montserrat» по умолчанию, который поставляется с темой «Wordpress 2016».
Если возможно, я бы хотел изменить шрифты на «Work Sans», который используется темой « fairyGate » для заголовков.
С Затенение в темах Гэтсби Я знаю, как создавать файлы в своих проектах для замены оригинальные файлы. Однако все подходы потерпели неудачу, и заголовки на странице сообщений остаются Montserrat.
Вот что я пробовал:
- Установить тему и ее зависимую гарнитуру:
// package.json
{
"dependencies": {
"@theme-ui/typography": "^0.3.0", // to use `toTheme` method
"typeface-work-sans": "^0.0.72", // the font I'd like to use
"typography-theme-fairy-gates": "^0.16.19"
}
}
Создание файлов для теневой оригинальной типографии:
// my-project/src/gatsby-theme-blog/gatsby-plugin-theme-ui/typography.ts
import "typeface-work-sans"
import { toTheme } from "@theme-ui/typography"
import fairyGates from "typography-theme-fairy-gates"
export default toTheme(fairyGates)
// my-project/src/gatsby-theme-blog/gatsby-plugin-theme-ui/index.ts
/* I duplicate most codes in original gatsby-plugin-theme-ui/index.js
intentionally to avoid other possible failing factors */
import merge from "deepmerge"
import typography from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/typography"
import colors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"
import styles from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/styles"
import prism from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/prism"
export default merge(typography, {
initialColorMode: `light`,
colors,
fonts: {
heading: `Work Sans, sans-serif`, // <- Changing font here doesn't work as expected!
monospace: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,
},
sizes: {
container: 672,
},
styles,
prism,
})
Любое предложение приветствуется!