In today's blog post, we'll show you how to manage the appearance of text throughout your Google Web Designer document. We'll begin with simple changes, such as to the font family, text weight, size or color. We'll then show you how to make a new text element look like an existing one, and how to define default styles so you can reuse them easily.
Basic style changes
We'll begin by having you create a text element and change its styles:
Select the Text tool , then click the stage where you want to create your text. You can also click and drag to define the dimensions of the text element.
The text is created with the properties you can see in the tool options bar: it will use the font, style, size, color and text alignment styles that are currently selected.
Once your text is created, you can change its properties by clicking the text and pressing the Escape key.
You can now change the text's font family by clicking the font dropdown then choosing one of the fonts listed, or by searching for additional fonts using the More fonts... option.
The fonts are previewed in the dropdown.
If you select More fonts..., a dialog opens.
Clicking one of the font names on the left will add it to the Added fonts list on the right. You can filter the fonts list by font name, category, and language script. Once you have selected one or more fonts, click OK to add them to the font dropdown.
The last selected font is applied to the selected text in the document.
You can change the weight or style of your text by clicking the style dropdown and choosing one of the available options. The dropdown previews what the different styles will look like with the currently selected font.
Clicking the size field allows you to type a new value.
You can also increase or decrease its value by using the up and down arrows, which changes the current value by 1; holding down the Shift key while pressing up or down changes the size by 10. Lastly, you can click and drag up or down to change the value.
If you want to change the text color, either click the current HEX value and type a new value, or click the color swatch to show the color pop-up. From there you can change the color using the color tools.
The text tool options bar also allows you to set the text alignment by clicking one of the alignment buttons.
The following values will make the text look like the below example:
Set any additional properties for an element in the Properties or CSS panels.
Copying/pasting text styles
Once the text looks the way you want, you can duplicate the styles by right-clicking your text element and selecting Copy text styles.
You can then right-click another element and select Apply text styles. This option is not available until after you use the Copy text style command.
When you click Apply text styles, the text element gets the same styles as the original text element.
Setting the default styles
Opening the tag dropdown on the text tool options bar allows you to preview the default appearance of various text types. The font, style, size and other text properties are shown with the text, and the text color is shown within the circle.
You can change these defaults by using the Set as default option in the tag's submenu.
With the following text selected, click Set as default for Heading 1:
The preview of the Heading 1 text is changed:
All the existing Heading 1 text elements across your entire document will use the new default styles, unless you have changed some properties of the elements. Those properties will retain their values.
And if you create a new Heading 1 text, it automatically uses its default styles:
Applying the default styles
You can automatically change a text element's current set of styles to one of the saved defaults.
Select both text elements by pressing Ctrl+a.
Then in the Heading 2 submenu, select Apply default.
Both our Normal text and Heading 1 text now look like our Heading 2 style defaults.
Reusing default styles in another document
You can reuse the default text styles in a different document by copying and pasting some lines of code from your document to others.
Go to Code view, identify the style sheet related to the text styles (its ID is gwd-text-style
) and then copy the code and paste it into your other document either before the main style sheet, or replacing an existing gwd-text-style
sheet.
Find the font link in the first document and paste it in the header of the other document.
If you already have links to other Google Fonts, these links will be merged upon saving the document.
Closing thoughts
With Google Web Designer, you can modify the appearance of your text elements (or parts of them) by using the text tool options bar, properties panel or CSS panel. You can also reuse the properties you've set for a text element by copying and pasting the text styles, or by defining the current properties as the default styles. You can use tags that you define for all text elements in your entire document or across multiple documents.