Skip to content

Commit e8e2410

Browse files
authored
chore(docs): typography - brand name (#28931)
1 parent f300243 commit e8e2410

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

docs/docs/using-typography-js.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ This guide covers how to use Typography.js in a Gatsby project.
66

77
## Typography.js
88

9-
[Typography.js](https://github.com/kyleamathews/typography.js/) is a JavaScript library that allows you to explore the typographic design of your website and define beautiful custom and pre-existing typographic themes. It enables you to change the font on your website with ease. Typography.js currently maintains over 30 themes for you to use. You can also create your own custom font themes if no available themes fit your requirements. To use Typography in your project, you will be installing a [Gatsby plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-typography/) and specifying a configuration object for Typography.
9+
[Typography.js](https://github.com/kyleamathews/typography.js/) is a JavaScript library that allows you to explore the typographic design of your website and define beautiful custom and pre-existing typographic themes. It enables you to change the font on your website with ease. Typography.js currently maintains over 30 themes for you to use. You can also create your own custom font themes if no available themes fit your requirements. To use Typography.js in your project, you will be installing a [Gatsby plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-typography/) and specifying a configuration object for Typography.js.
1010

11-
## Installing the Typography plugin
11+
## Installing the Typography.js plugin
1212

1313
Gatsby has the plugin `gatsby-plugin-typography` to integrate Typography.js into your project.
1414

@@ -37,14 +37,14 @@ module.exports = {
3737

3838
`gatsby-plugin-typography` takes two options for you to specify:
3939

40-
- `pathToConfigModule` (string): The path to the file where you export your Typography configuration.
41-
- `omitGoogleFont` (boolean, `default: false`): By default, Typography includes a helper that makes a request to Google Font's CDN for fonts you need. You may want to use your own fonts, either by injecting fonts or using a CDN of your choosing. By setting `omitGoogleFont: true`, `gatsby-plugin-typography` will skip adding the font helper. Instead, you will have to include the appropriate fonts yourself - see [Adding a Local Font](/docs/recipes/styling-css#adding-a-local-font)
40+
- `pathToConfigModule` (string): The path to the file where you export your Typography.js configuration.
41+
- `omitGoogleFont` (boolean, `default: false`): By default, Typography.js includes a helper that makes a request to Google Font's CDN for fonts you need. You may want to use your own fonts, either by injecting fonts or using a CDN of your choosing. By setting `omitGoogleFont: true`, `gatsby-plugin-typography` will skip adding the font helper. Instead, you will have to include the appropriate fonts yourself - see [Adding a Local Font](/docs/recipes/styling-css#adding-a-local-font)
4242

4343
## Creating the Typography configuration
4444

45-
Now that you have added the plugin, create the directory `src/utils/` if it does not already exist in your project and add a new file named `typography.js`. You will use this file to specify the Typography configuration and set this file to be the path for the `pathToConfigModule` option.
45+
Now that you have added the plugin, create the directory `src/utils/` if it does not already exist in your project and add a new file named `typography.js`. You will use this file to specify the Typography.js configuration and set this file to be the path for the `pathToConfigModule` option.
4646

47-
Inside the `typography.js` file you created, you define your website's typography configuration. A basic typography.js configuration looks like this:
47+
Inside the `typography.js` file you created, you define your website's typography configuration. A basic `typography.js` configuration looks like this:
4848

4949
```js:title=src/utils/typography.js
5050
import Typography from "typography"
@@ -72,15 +72,15 @@ Font sizes of all elements in Typography.js grow and shrink in relation to the `
7272

7373
To find or create a new typography theme, you can visit [Typography.js](https://kyleamathews.github.io/typography.js/) to see a list of options.
7474

75-
## Installing Typography themes
75+
## Installing Typography.js themes
7676

77-
Typography.js has built in themes that can save time when defining your website's font styling. The Funston theme, maintained by Typography, is one of the built in themes. To install the Funston theme from npm, run the command:
77+
Typography.js has built in themes that can save time when defining your website's font styling. The Funston theme, maintained by Typography.js, is one of the built in themes. To install the Funston theme from npm, run the command:
7878

7979
```shell
8080
npm install typography-theme-funston
8181
```
8282

83-
To use the theme, edit the `typography.js` file that you created before and inform Typography of the new configuration:
83+
To use the theme, edit the `typography.js` file that you created before and inform Typography.js of the new configuration:
8484

8585
```diff:title=src/utils/typography.js
8686
import Typography from "typography";

0 commit comments

Comments
 (0)