The icons on Essential Grid’s cards (a magnifier, a link, a cart) come from icon fonts, and the texts use the fonts of your skins. Which icon fonts load, and where, is set for the whole site in Global Settings › Fonts & icons; a skin’s colours and fonts are in the skin editor.
Icon fonts
| Font | Choices | What it is |
|---|---|---|
| Fontello | Site and admin, Admin only | Essential Grid’s own icon font. Many skins use its icons, so it cannot be switched off. |
| Font Awesome | Off, Site and admin, Admin only | Font Awesome icons for skins. |
| Stroke 7 | Off, Site and admin, Admin only | The Stroke 7 icon font for skins. |
Admin only lets you pick a font’s icons in the skin editor without loading the font on your site. Load a font on your site only if your skins use its icons: every font that loads is a file more for your visitors.
A skin’s colours and fonts
In the skin editor, Card › Look › Colours & fonts lists every colour and font that the skin’s layers use, so you can change one everywhere at once.
| Part | What it shows |
|---|---|
| Colours | Each colour with the layers that use it and how many of its uses show now, hover colours marked “on hover”. A colour that shows nowhere now, such as the colour of a border without a width, is under Not shown now. |
| Fonts | Each font of the text layers with its weights; Your theme’s font where a layer sets none. Icons use their icon font and are not listed. |
| Colour and font themes | Colour themes (Dark cover, white text, Light cover, dark text, Clean white card, Dark card, and Accent colour…, which asks for its colour and applies it with Apply) and font themes (Your theme’s font, System sans; with the Google Fonts add-on also Raleway + Open Sans and Playfair Display + Open Sans) change the matching layers (and the cover’s or content box’s colour) in one click. |
A click on a colour or a font opens Change … below it: the new colour or font, a box for each layer and role (checked where it shows now) and Change n, which changes the checked layers in one step, with Undo in the message. Cancel or Esc closes it. The Card quick bar’s Accent is the theme Accent colour… with its colour already chosen.
When more than one grid uses the skin, the first Change n or theme asks first: Used by n grids names them and offers Duplicate first (a copy named “Washington (copy)” opens with your change ready), Change anyway or Cancel.
One layer’s font and colours are in its Layer › Look › Style. The font field’s picker lists Web safe fonts and Google Fonts (Fonts add-on), the fonts of the Google Fonts add-on, and takes any font name.
Google fonts
Essential Grid’s icon fonts come from your site. Google fonts come in three ways: seven of the navigation styles that Essential Grid ships, such as Mara Ostheim and Hugo Stellmark, load Google’s Material Icons from Google’s servers, and six of them also a text font; the Google Fonts add-on loads the fonts you add for your skins; and a template brings the fonts its skins and navigation use. What that means for privacy: Does Essential Grid load Google Fonts?
Good to know
- Change n writes only the checked layers’ own colours or fonts, as if you changed each layer by hand. The themes Dark cover, white text and Light cover, dark text also set the cover’s colour, Clean white card and Dark card the content box’s background.
- How a grid chooses its skin: Items: skins on a grid and their hover.