Text Overview – Google Web Designer

Text Overview – Google Web Designer


SHUO: Hello, everyone. My name is Shuo, and I’m an
engineer on the Google Web Designer team. So today I’m going to talk
about how to edit text using the Text panel. If you have used the Text tool
in the Google Web Designer before, you may remember
that previously, in order to edit text, we have
to first select the Text tool in order to see all
those text options. And if you want to make a
selection change on stage, you’ll have to first
switch to Selection tool, making selections off
stage, switch back to Text tool in order to
change the text properties. So now we are adding another
option of editing text, which is the Text panel. So in the Text panel, we
support all the text options that we’re currently
supporting in the Text tool. For example, with the Text
panel, now what we can do is we can have this
Section tool selected. We can make our selections and
then directly change the text property from the Text panel. For example, we can change the
tag, we can change the font. We offer a list of
common fonts by default, but you can always
click on more fonts. And add fonts from there. And the fonts will
appear at the top. We can also change the style. We can change to italic or bold. We can also change the font size
by either typing or dragging. We can change the color. We also offer a list
of alignment options. We can choose to insert
the list or remove a list. We can increase the indent
or decrease the indent. We can also create a link. So all these options are
supported in the Text panel. And the properties that we’re
showing in the Text panel are based on the
current selection. Right now I have
this text selected. You can see it has a size of 19. It has this red color. If I switch to another
text, you can see the size and the color are updated to
reflect the current selection. When you’ll have multiple
texts selected on stage, the properties that are the
same for all the selections will be shown, while
other properties that are not the same for
all the selections will be left as blank. When you want to
deselect the text, you can clear anywhere outside
the text to deselect them. So this is how we can edit a
text that is already on stage. When you want to add
a new text, we still have to select the
Text tool, but you do have the option
to change the text property from either
the previous options or from the Text panel. You can change the size. You can choose a
different color. When editing a new text, you
can drop a text box by dragging. Enter a text block there. When Text tool is selected,
you can click inside a text to enter this editing mode. You can also select a range
of characters and only change property for those characters. You can click outside the text
to exit this editing mode. If you want to
deselect a text block, you can press the Escape key,
and it will be deselected. That’s it. Thanks for watching.


3 thoughts on “Text Overview – Google Web Designer

  1. Hi Shou, is there a way to use fonts that are custom? My clients have brand fonts that I'd like to use. Is there a way to access fonts other than the google fonts in the type menu? I saw a video where someone manually added a .ttf font to the "assets" folder and then modified the css styles in code view.

Leave a Reply

Your email address will not be published. Required fields are marked *