{"id":402,"date":"2014-08-13T14:28:58","date_gmt":"2014-08-13T13:28:58","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/t4\/?p=402"},"modified":"2024-07-09T13:41:18","modified_gmt":"2024-07-09T12:41:18","slug":"font-picker","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/t4\/2014\/08\/13\/font-picker\/","title":{"rendered":"Font Picker"},"content":{"rendered":"

For research and conference sites using the old template only<\/em>, we have provided a font picker.<\/p>\n

Fonts are assigned on a template wide basis, so are not picked paragraph by paragraph.<\/p>\n

For now, this font picker makes use of fonts available from Google Fonts and allows some facility to change their size. We’ll add more options as they are requested and tested.<\/p>\n

First things first:<\/h2>\n

Go to your site and find the grey section called ‘Section Styles’ – click ‘Add Content’ using the yellow dropdown box to the right of it.<\/p>\n

\"\"<\/a><\/p>\n

Choose the content template called ‘Font Picker’<\/p>\n

\"\"<\/a><\/p>\n

Give the Font Picker a name. ‘Font Picker’ will do.<\/p>\n

You can specify the fonts for three areas of the template: the banner, which contains the name of your site, the headings within the content area, and the font used for paragraphs and lists.<\/p>\n

\"\"<\/a><\/p>\n

The trends, both because screen resolutions are much larger than they used to be, and also to help enable pages to be viewable on mobile and tablet platforms, are to make the fonts larger than we currently have by default on the template for university sites.<\/p>\n

Some fonts are more suitable for large sizes than others, but as a good place to start, make your Banner Header Font 38, your Content Header font 22 (lower level headers will drop in size by 2px for each header level below this) and your Content Body Font 16.<\/p>\n

Click Update and Approve<\/em>. You can preview these changes – the next time the whole site publishes, your fonts will be updated. Remember to hit F5 to ensure that your browser refreshes the content properly.<\/p>\n

\"Policy<\/a><\/p>\n

There are quite a few good sites on font pairings:<\/p>\n