Choose a font

Google Web Designer lets you select a font from a list of common fonts or from Google Fonts. Using other fonts requires custom code.

Select a common font

Several common fonts are built into Google Web Designer.

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

   👁 Image
   

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 you want to use.

Add a font from Google Fonts

You can use hundreds of open-source fonts available through Google Fonts at no cost.

1. Select the Text tool 👁 Image
   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 catalog starts loading. To load more fonts, scroll to the bottom of the list.
4. Search by entering the font name in the search field 👁 Search icon
   and pressing Enter, or by using the filters to narrow your options.
5. Select the fonts you want to use. They appear in the Added fonts list on the right.

   👁 Image
   

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

Use other fonts

👁 Custom code required
(Custom code required)

You can use custom fonts if you have the font files.

Add a custom font

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 search for the </style> tag.
   👁 Image
   
3. Add the following CSS before the </style> tag:

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

4. To use the font, switch back to Design view and enter the name of the font (as you typed it for the font-family line) in the Font name field while formatting text. You can also edit the CSS font-family property.