Skip to content

Preparing fonts for LiveArt

← Fonts Configuration

Overview


LiveArt HTML5 is able to work with standard font formats that allow web embedding using the CSS. Make sure your font has the correct rights to be installable and convert if necessary using the tools below.

We recommend using the WOFF format as the one most cross-platform and cross-browser.

NOTICE: If you are using integrated solutions based on LiveArt, you should be able to upload the prepared fonts via your admin area.

General Process

Step 1 
Generate font files and respective stylesheet. You can always use examples from your development package.
Prepare them as usual web font. There are many tools for that, one of most popular — fontsquirrel.com. We encourage to learn this guide how to use it.

Most compact formats:
  • WOFF (highly recommended for all platforms)
  • TTF with Font Embedding Permission "Installable" (not recommended, see more info in "TTF fonts issues" chapter)
  • TTF + OTF  (not recommended, see "TTF fonts issues")
If you have TTF files with embedding permission "Installable", no generating process is required. If not, we recommend to generate your font files in most universal WOFF format. But if you font generator output full bundle with TTF, EOT, WOFF, and SVG formats — it is also OK.

Step 2
Create folder for font files in LiveArtJS/fonts (name it, for example, MyFont1)
Create stylesheet.css file in MyFont1 folder, edit it.
It should contain code like this:
@font-face {
    font-family: 'MyFontFamily1';
/* urls to font files. May be used different formats - woff, ttf, eot, svg together*/
    src: url('MyFont-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyFontFamily1';
    src: url('MyFont-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyFontFamily1';
    src: url('MyFont-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'MyFontFamily1';
    src: url('MyFont-bold-italic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

Description:
  • @font-face — font face description. Font file has to contain 1 — 4 font face declarations.
  • font-family for your font. Should be the same in all 4 font faces. If you are planning to convert your svg output to any other formats — please use font-family from font file properties.
  • src url to you font file. Multiple formats may be used. For example:
    src: url('myFont2-webfont.eot');
    src: url('myFont2-webfont.eot?#iefix') format('embedded-opentype'),
         url('myFont2-webfont.woff') format('woff'),
         url('myFont2-webfont.ttf') format('truetype'),
         url('myFont2-webfont.svg') format('svg');
  • font-weight describes whether the font is bold or not (normal)
  • font-style describes whether the font is italic or not (normal)
If some font faces are missing (e.g. bold and bold italic), use available font-faces to replace missing ones. For example, use regular file also for bold, and italic for bold italic. If you have only regular typeface, use it's url to all 4 typefaces.

If some font faces are missing (like bold or italic):
  1. Do not mention them in CSS
  2. Block use of such typefaces in fonts.json using "boldAllowed": false and/or "italicAllowed": false attributes.
If your font has more than 4 fontfaces (e.g. for bold you have bold, semi-bold, black, and condensed bold), you are free to choose which one user may use as bold. Simply set it's source to your preferred file with proper font-weight and font-style attributes (in our example it would be font-weight: bold; font-style: normal;)

Step 3
Modify LiveArtJS/fonts/fonts.css: add line
@import url('MyFont1/stylesheet.css');

Modify LiveArtJS/config/fonts.json: add one more item to "fonts" array:
{ "name": "Font name", "fontFamily": "MyFontFamily1" }
- where name - label that appears in font drop-down, fontFamily - font family from stylesheet.css
- additional optional attributes are: boldAllowed, italicAllowed. Values are true/false. Indicating the false would disable bold or italic respectively if the font misses these typefaces or you prefer disabling them.
NOTE: if you are preparing fonts for the admin area, simply upload the font.

Reload LiveArt and try your new font.

Fonts generating using fontsquirrel.com

If you are not familiar with web fonts generating, please see instructions below:
  1. Go to http://www.fontsquirrel.com/tools/webfont-generator
  2. Using button "Add fonts" select your local font files
  3. Select "OPTIMAL" converting option
  4. If you pass the agreement - check it, otherwise generate another font
  5. Click DOWNLOAD YOUR KIT
  6. Create folder for font files in LiveArtJS/fonts (name it, for example, MyFont1)
  7. Edit stylesheet.css file in MyFont1 folder:
  8. Change font family for same name in all 4 font faces (e.g. font-family: 'MyFontFamily1';)
  9. Mark bold, italic, and bold italic font faces with font-weight and font-style attributes. For more details see Step 3 of font generating process manual.

Fonts from fontsquirrel.com free fonts gallery

You may also chose font from fontsquirrel.com Free fonts gallery:
  1. Jump to Webfont Kit from font page (if it is available)
  2. Choose a Subset: "Don't Subset" (to keep all original symbols or English — for only symbols in English language)
  3. Choose Font Formats: select only WOFF format (most compact solution)
  4. Follow steps 5-7 from fontsquirrel.com font generating manual

TTF fonts issues

Sometimes TTF fonts have incorrect bounding box in OSX. This causes to rendering issues ("flares" after dragging the text) and passing incorrect quote data.
For example, see comparison of "Action Man" font:



Feedback and Knowledge Base

(thinking…)