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: website/blog/2022-04-08-adding-fonts.md
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -87,9 +87,9 @@ Run `npm start` to rebuild your **_public_** folder and assets. If you did every
87
87
88
88
## Using only one font in a block
89
89
90
-
There are multiple ways of using fonts in a block. The simplest example is if you have only one font you want to use for that specific block. In this case, we want the Heading block to only use _Noto Serif_.
90
+
There are multiple ways of using fonts in a block. The simplest use case is if you have only one font you want to use for that specific block. In this case, we want the Heading block to only use _Noto Serif_.
91
91
92
-
To make our secondary font available for use, we need to first define it as a variable. We can do that in **_/assets/styles/parts/utils/\_shared-variables.scss_**. We can see there that the base font is already defined, so all we need to do is add our secondary font below.
92
+
To make our secondary font available for use, we need to first define it as a CSS variable. We can do that in **_/assets/styles/parts/utils/\_shared-variables.scss_**. The base font is already defined, so all we need to do is add our secondary font definition below.
93
93
94
94
To make things a bit more consistent, we may also want to rename `--global-font-family` CSS variable to `--base-font-family`. Just don't forget to search/replace this new variable name across your project! Please note that the fallbacks for the fonts can be anything, this is just an example. Once we're done, it should look like this:
95
95
```scss
@@ -106,7 +106,7 @@ After defining the `--secondary-font-family` CSS variable, we can go to **_/src/
106
106
107
107
And that's it! The Heading block will now use the _Noto Serif_ font.
108
108
109
-
## Adding an option for selecting fonts
109
+
## Adding a font picker
110
110
111
111
In some cases, you may want to give users the option to choose between fonts that they want to use in their block. For this example, we'll use the `paragraph` block where we want users to have both _Source Sans Pro_ and _Noto Serif_ available.
112
112
@@ -136,7 +136,7 @@ First step is to add a new attribute, options and CSS variable values in **_/src
136
136
}
137
137
```
138
138
139
-
After defining a new attribute and options for the font family, we now have to add a variable to **_manifest.json_**. We can add it to the `variables` object. This approach is slightly different from the one explained in the [Modifying blocks](/blog/modifying-blocks) blog post. Here we can use `%value%` wildcard to dynamically add the selected value to our CSS variable.
139
+
After defining the new attribute and options for the font family, we now have to add a variable to **_manifest.json_**. We can add it to the `variables` object. This approach is slightly different from the one explained in the [Modifying blocks](/blog/modifying-blocks) blog post. Here we can use `%value%` wildcard to dynamically add the selected value to our CSS variable.
140
140
```json
141
141
"paragraphFontFamily": [
142
142
{
@@ -147,7 +147,7 @@ After defining a new attribute and options for the font family, we now have to a
147
147
]
148
148
```
149
149
150
-
The next step is to go to **_/src/Blocks/components/paragraph/components/paragraph-options.js_** and add a control for the new font family option. The first thing we can add is a new attribute that will allow us to toggle showing the paragraph font family option on other blocks which are using the paragraph component. There might be a case where we want only one font family, so this option may come in handy in some other blocks.
150
+
The next step is to go to **_/src/Blocks/components/paragraph/components/paragraph-options.js_** and add a control for the new font family option. The first thing we can add is a new attribute that will allow us to toggle showing the Paragraph font family option on other blocks which are using the Paragraph component. There might be a case where we want only one font family, so this option may come in handy in some other blocks.
0 commit comments