Choose a font

The font selector for the Text tool lets you select from a list of common fonts. You can also add web fonts that are available in Google Fonts.

1. Select the Text tool in the toolbar or open the Text panel.
2. Click the font name in either the tool options bar or the Text panel. The font menu opens.

   

3. Choose a font.

You can either choose the font first and then add text, or select existing text and change it to the font that you want to use.

Adding fonts from Google Fonts

In addition to the common fonts that are built into Google Web Designer, you can also use hundreds of free, open-source fonts available through Google Fonts.

To add a font from the Google Fonts catalogue:

1. Select the Text tool in the toolbar or open the Text panel.
2. Click the font name in either the tool options bar or the Text panel. The font menu opens.
3. Click More fonts… at the bottom of the font menu. The Google Fonts catalogue starts loading. To load more fonts, scroll to the bottom of the list.
4. Search by entering the font name in the search field and pressing Enter, or by using the filters to narrow your options.
5. Select the fonts that you want to use. They appear in the Added fonts list on the right.

   

6. When you're satisfied with your selection, click OK. The fonts that you added are now available in the font menu for this document.

Using other fonts

Google Ads and Google AdMob only support Google web fonts.

You can only add fonts from Google Fonts to the font drop-down at this time, but you can use custom fonts if you have the font files.

1. Add the font file to the assets subfolder for the project in your computer's file system.
   • If you're using Studio, you can upload custom fonts into the Studio Asset Library instead.
   • For greater browser compatibility, include multiple font formats.
2. Go to Code view and add the following CSS before the closing tag, using your font's details:

   @font-face {
     font-family: "My Font Name";
     src: url("assets/myfontname.ttf") format("truetype");
   }

3. To use the font, enter the name of the font (as you typed it for the font-family line) in the Font name field while formatting text.

When using a custom font in a CSS style rule, list at least one fallback web-safe font.

For example, for a Japanese document, you might use the following list:
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","MS PGothic",Verdana,Helvetica,sans-serif;