Choosing fonts

Google fonts

Choose your font on the Google font repository. Then simply type its name in the PhotoDeck panel to select and use it!

It is best to restrict yourself to a maximum total of one or two fonts in your design, and/or a couple of font weights. This way your site will stay clean-looking, and will keep loading fast.

Clean fonts we like: Lato, Open Sans, Source Sans Pro, Roboto, Raleway, Montserrat, Vollkorn, Klara.

Adobe Font integration

We don’t recommend using Adobe Fonts if you are located in the E.U., as Adobe fonts are served by servers outside of the E.U. and consent from visitors isn’t collected.

Adobe Fonts (formerly Typekit) is a leading commercial webfont provider.

1. Create a web project with the fonts of your choice in the Adobe Fonts interface ;
2. Enter your Adobe Web Project ID under My Website / Design / Main fonts. Your web project ID is shown in the Adobe Fonts interface on top of this page:
   
   
   The embed code will then be automatically added to your website.
3. You must then edit your custom CSS code in your PhotoDeck admin space to apply the font(s) as you wish. For example, to apply by default the Proxima Nova font to the whole site: #ws_page { font-family: "proxima-nova", sans-serif; }. The font-family is shown in your Adobe interface for each font in your project. If you wish to apply a font to a single component of your design, you will need to use a webpage inspector (e.g. Firebug or Chrome/Safari built-in developer tool) to identify the proper CSS selector. CSS selectors examples: #ws_page .block .title for page titles, #ws_page #component_xxxxx for a given component…

Standard HTML fonts

This font map shows how different font families render on standard Windows and Mac browsers.

(For each pair listed, we use additional similar-looking fallback fonts for systems where either font is not installed).