Use your own custom font in Google Web Designer

Google Web Designer already allows comfortable usage of web fonts in your animations, but – of course – not any font can be found in the Google Web Font Repository. So, here is, what you can do to add your own custom font.

1. Drop your font (TrueType or OpenType font, both are supported by any modern browser) in you assets folder (not within Google Web Designer, but in your Finder / File Explorer
2. Go to Code view of your current project and add the following code (here: for ttf fonts) in the first <style> section:

   @font-face {
      font-family: myCustomFont;
      src: url(assets/{FILENAME_OF_MY_FONT.TTF});
   }

3. Back in Design view, select the label on the stage, that should display the font and go to the CSS panel
4. add „font-family: myCustomFont;“ to the element

Please be aware, that you can’t play around with the font at the moment. For example, selecting another font from the drop down menu and after that changing back to your own font sometimes might not work properly.

Hint for Google Marketing Platform users: If you upload the Creative to Studio or DV360, the font will automatically be included and used. No need to upload the font separately.