HomeDesigning › Fonts

Fonts

In addition to standard web fonts – Arial, Courier, Georgia and Verdana – you can use any font from Google Fonts which is an online library containing hundreds of free, open-source fonts optimized for the web, maintained by Google.

To use a Google Font during the design phase

  1. Go to https://fonts.google.com and browse their collection. Locate the font you'd like to use.
  2. Select it, and then customize it to include bold and italic.
  3. Download the font file – they’re all free – and install it on your system, so you can use it on your design software e.g. Photoshop.

Downloading a Google Font

 

To use a Google Font while building the actual website

In order to make the font available to be used in any element – navigation, content, etc. – you need to enter the code provided by Google specifically for your font first.

Embedding a Google font

In YWD, go to Design > Text > Text, Google Fonts. YWD lets you specify up to 2 Google fonts. Copy and paste the full <link> tag supplied by Google into the appropriate field. Then do the same for the CSS rule field.

Once you’ve done that, you will be able to select the font in any of the many Font dropdowns available in the Design settings – not just for regular text and headings but also for menus, certain tools, etc.

Selecting a font

 

Top of page