You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/docs/using-typography-js.md
+9-9
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,9 @@ This guide covers how to use Typography.js in a Gatsby project.
6
6
7
7
## Typography.js
8
8
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.
10
10
11
-
## Installing the Typography plugin
11
+
## Installing the Typography.js plugin
12
12
13
13
Gatsby has the plugin `gatsby-plugin-typography` to integrate Typography.js into your project.
14
14
@@ -37,14 +37,14 @@ module.exports = {
37
37
38
38
`gatsby-plugin-typography` takes two options for you to specify:
39
39
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)
42
42
43
43
## Creating the Typography configuration
44
44
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.
46
46
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:
48
48
49
49
```js:title=src/utils/typography.js
50
50
importTypographyfrom"typography"
@@ -72,15 +72,15 @@ Font sizes of all elements in Typography.js grow and shrink in relation to the `
72
72
73
73
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.
74
74
75
-
## Installing Typography themes
75
+
## Installing Typography.js themes
76
76
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:
78
78
79
79
```shell
80
80
npm install typography-theme-funston
81
81
```
82
82
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:
0 commit comments