Text in Google Web Designer

Exploring text in Google Web Designer

With Google Web Designer, you can modify the appearance of your text elements (or parts of them) by using the text toolbar, properties panel or CSS panel. You can also reuse the properties you’ve set on 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.

Let’s see how you can manage the appearance of text throughout your Google Web Designer document. We’ll begin with simple changes, such as 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 on 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 next toolbar: 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 on the text and pressing ‘Esc’.

You can now change the text’s font family by clicking on the font dropdown, and then choosing one of the fonts listed, or 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 on 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 it 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 on 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 on the size input 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; ‘Shift’ plus up or down changes the size by 10. Lastly, you can click on it and drag up or down to change the value.

If you want to change the text color, either click on the current HEX value and type a new value, or click on the color swatch to show the color popup. From there you can change the color using the color tools.

The text toolbar also allows you to set the text alignment by clicking on one of the alignment buttons.

These values:

Will make the text look like this:

Set any additional properties for an element by clicking on the ‘Properties’ or ‘CSS’ panels.

Note: to modify the styles for just part of the text, select that part and then use the text toolbar to modify its font, weight, size or color.

Copy/pasting text styles

Once the text looks the way you want, you can duplicate the style by right-clicking on your text element and choosing ‘Copy text styles’.

You can then right-click on another element and choose ‘Apply text styles’. The option is not available until you do ‘Copy text style’.

When you click on it, the other text element gets the same styles as the original text element.

Note: you can copy and apply text styles across documents.

Setting the default styles

Opening the tag dropdown on the text toolbar 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 this text selected, click on ‘Set as default’:

The preview of the heading 1 text is changed:

All the existing heading 1 text elements across your entire document will look like the new defaults, unless you have changed some properties of the elements, which will retain their values.

And if you create a new heading 1 text

it automatically looks like its defaults:

Note: you can change the current styles of an existing text element by selecting it and picking a different option in the tag dropdown.

Applying the default styles

You can automatically change a text element’s current styles to one of the saved defaults.

Select both text elements using ‘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 lines and paste into your other document before the main style sheet, or replacing an existing ‘gwd-text-style’ sheet.