fontsgoogle-web-designer

How to add custom font into Google Webdesigner?

How do you add a custom font into Google Webdesigner?

I see there is an option to include Google Fonts, but I can't find a way to include one of own personal ones.

Solution

  • Go to Code View add @font-face CSS as you would in a normal html document. Put the font files in assets folder.

    Example:

    @font-face {
  font-family: LouisRegular;
  src: url(assets/LouisRegular.ttf);
}
@font-face {
  font-family: LouisItalic;
  src: url(assets/LouisItalic.ttf);
}
@font-face {
  font-family: LouisBoldItalic;
  src: url(assets/LouisBoldItalic.ttf);
}

    Now simply select the div and apply the font-family from top or from CSS panel in RHS. Note top bar might not give you any auto suggestion of the new font but add it any ways and it should work.

    Note: Fonts are often more than 200kb which can hurt your banner budget, if that is the case I will recommend using text as images instead of font.