Adding Extra Fonts to slscart

This feature is available starting with version 10.3.0.

In the store admin under Fonts & Colors, is an entry called Font Style: which determines the main font for the store. The fonts displayed are a mixture of built-in fonts and webfonts. Webfonts are downloaded from Google fonts. If you wish to add a font that does not exist in the current set of fonts, fonts extra can be enabled and extra fonts can be added.

Speed and clarity-wise it is best to use the device's (desktop, mobile) native font.

slscart sorts the fonts alphabetically by their display name.

Enabling Extra Fonts

Rename the fonts_list_extras_x to fonts_list_extras

Edit fonts_list_extras to add the extra fonts.

If there is a problem, rename the file (e.g. rename it back to fonts_list_extras_x) and slscart will ignore it.

Examples and Explanations

In looking at the font_list file there are many different types of fonts.

There are three fields to set in a font.

'Georgia'=>array('link'=>'', 'serif'=>'y'),

1. 'Georgia' - This is the display name that shows up in the Font Style: dropdown in Fonts & Colors. Only use letters, numbers, spaces. It is not case sensitive.

2. 'link'=>'' - The value of 'link', to the right of => is either blank (two single quotes together) or contains a web font description.

The web font description is in the form font name : font style

'Cookie:400' describes the Cookie font (note the font name *is* case sensitive. The 400 is regular style. Usually 700 is bold style and

Second example is 'Cookie:400,700' which contains two styles. Each style is separated by a comma.

Third example is 'Arvo:400,400italic,700,700italic' which contains four styles: 400 (regular), 400italic (regular italic), 700 (bold), and 700italic (bold italic)

Fourth example is 'Roboto+Slab:400,700' which has a space in the font name. Note the space is replaced by a '+'.

Note that even though, for example, Arvo has four styles not all of them need to be specified. The more styles specified the slower the download of the web font. Only choose what is necessary.

3. 'serif' => 'y' - 'serif' defines the default font if the font(s) specified in link or if link is blank is not found

Values of 'serif' are:

'y' - serif font
'n' - sans-serif font
'm' - monospace
'c' - cursive
'd' - display
Any other value is treated as 'n' (sans-serif)

Note the comma after ). This needs to be added, except for the last font specification in the list.

4. 'load' => 'y' (as of 10.4.4) this loads the webfont for usage elsewhere. For example, if a specific webfont was being used only on the home page instead of specifying it in the header like this:

 <link href='https://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>

Single Embedded Font

'Georgia'=>array('link'=>'', 'serif'=>'y'),

Multiple Embedded Font

'Lucida Console, Monaco'=>array('link'=>'', 'serif'=>'m'),

Single Web Font, Single Style

'Cookie' => array('link' => 'Cookie:400', 'serif' => 'c'),

Single Web Font, Multiple Styles

'Jura'=>array('link'=>'Jura:400,600', 'serif'=>'n'),

Single Web Font with Spaces in Name

'Droid Sans'=>array('link'=>'Droid+Sans:400,700', 'serif'=>'n'),

Google Fonts

Here is a link to Google web fonts:

https://fonts.google.com/

Examples

Adding Cookie font

Here is the link to Cookie font.

https://fonts.google.com/specimen/Cookie?sort=alpha&query=cookie

'Cookie' => array('link' => 'Cookie:400', 'serif' => 'c'),

If 'link' value is blank then

'link' value would contain the Google font description

'Cookie' is what shows up in the font list in the Fonts & Colors selection.

'Cookie:400' The name Cookie, before the colon, is the Google font name. The 400 is the Google font style.

The default font is cursive (i.e. the 'c')

More than one style can be downloaded. Separate each style by a comma.

'Amaranth'=>array('link'=>'Amaranth:400,400italic,700,700italic', 'serif'=>'n'),

Amaranth has 4 styles: 400 (regular), 400italic (regular italic), 700 (bold), 700italic (bold italic). It has sans-serif as the default font

Testing

Test to see if the new fonts show up by using 'Show Fonts' under Administration tab in storeadmin.

More Information

display

“Display font” is an informal concept that refers to fonts regarded as suitable (or even designed) for use in “display texts” as opposite to normal copy text that typically appears in paragraphs. Headings, headlines, logos, short slogans or quotes rendered as separate blocks, and texts in signs and plates can be regardes as “display texts”.

If you check the list of fonts you get by selecting “Display” only in the filter, you will see a variety of fonts, often with strong features, perhaps artistic and expressionistic, often with special letter forms – things you might use in a heading, but (hopefully) not in the bulk of copy text.

So the fonts are families and certain fonts are classified under certain typefaces. Wikipedia has an extensive article on Typefaces.

Wikipedia typefaces

However what you are interested in is the "Display typeface". Check out this list of display typefaces.

Display type refers to the use of type at large sizes, perhaps 30 points or larger. Some typefaces are considered useful solely at display sizes, and hence are known as display faces.

***