How to add custom font into Google Webdesigner?

fonts google-web-designer
Tibor Udvari picture Tibor Udvari · Jul 16, 2015 · Viewed 20.6k times · Source

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.

Answer

Imran Bughio picture Imran Bughio · Aug 26, 2015

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.

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
CSS Font Border?

With all the new CSS3 border stuff going on (-webkit, ...) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will …

Read More
How to import Google Web Font in CSS file?

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from …

Read More