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
Adobe Fonts (formerly Typekit) is a leading commercial webfont provider.
- Create a web project with the fonts of your choice in the Adobe Fonts interface ;
- Enter your Adobe Web Project ID under My Website / Desktop Website / Customize theme / Main site font. 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. - 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 .titlefor page titles,#ws_page #component_xxxxxfor a given component... Note that selectors must always include#ws_page.
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).
