When creating and customizing your Summit Evergreen product, you may wish to change the fonts used in various places in your site (e.g., headers, syllabus, content, etc.). In order to do this, you will need to make use of CSS (cascading style sheets) code.
To change fonts, start by going to the left navigation menu and selecting “Appearance”, then “Theme”. In the left pane, select “My Current Theme”. In the right pane, you will then see a horizontal menu in the upper right corner of the screen. In this menu, select “Details”, then scroll down to “Header & Footer Scripts”. In the “Header Scripts” box, you will need to input CSS code that will change the fonts you want changed.
Below is an example of such CSS code. It changes the body (content) font to “georgia”, the Heading 1 font to “arial”, and the syllabus font to “impact”.
| <style> body{ font-family: georgia !important;; } h1{ font-family: arial !important; } .syllabus{ font-family: impact !important; } </style> |
When you’re done inputting this code into the “Header Scripts” box, hit “Save” in the lower right corner.
In the example above, the custom fonts used are fonts that are available in Summit Evergreen. If you wish to use a font that is not available in Summit Evergreen, you will simply need to add an extra line of CSS code into the “Header Scripts” box to access the font you wish to use. Below is an example of such CSS code with this extra line. It changes the body (content) font to “Raleway”, the Heading 1 font to “arial”, and the syllabus font to “impact”. The extra line of CSS code links to a Google fonts resource in order to allow you access the “Raleway” font.
| <link href=’http://fonts.googleapis.com/css?family=Raleway‘ rel=’stylesheet’ type=’text/css’> <style> body{ font-family: ‘Raleway’, sans-serif !important;; } h1{ font-family: arial !important; } .syllabus{ font-family: impact !important; } </style> |
Again, when you’re done inputting this code into the “Header Scripts” box, hit “Save” in the lower right corner.