Update!
Font Skin Setting
http://mjau-mjau.com/updates/#05oct14
After creating new layouts- and mega menus, we had to re-think how to apply fonts and maintain flexibility. The main problem with fonts, is that some fonts look good in italic, some fonts look good in the menu only in uppercase, and often you want a different font in header. Therefore, we created a setting to not only apply any combination of Google fonts, but also moderate basic styles across elements without requiring a separate CSS file.
We will be offering pre-made "font skins", but just to show how flexible it is to apply a "font skin", see details and examples below -
/* TECHNICAL DETAILS */
In its simplest form, fonts can be applied to a an X3 website simply by adding the Google font name to the
font setting, which is then be loaded, and applied to the document:
font: Lato
Normally, a Google web font will consist of a string that includes variations of the font (you can create these combos at
Google fonts):
font: Lato:400,700,400italic,700italic
Perhaps you want to use two different fonts in your website (you can create these combos at
Google fonts)?
font: Lato:400,700,400italic,700italic|Oswald:700
The first font defined is the default website font, and then you need to set where you want to apply secondary fonts:
font: Lato:400,700,400italic,700italic|Oswald:700|header:Oswald
You can also apply additional basic moderations to various elements, in this example we are setting all headers to italic+uppercase:
font: Lato:400,700,400italic,700italic|Roboto:700italic|header:Roboto,italic,uppercase
Here is a more complex string, which is in fact used for the default Lato font skin currently being used, which has
beautiful italic typography:
font:Lato:400,700,900,400italic,700italic,900italic|logo:italic,900|topbar:bold,uppercase|header:italic|footer:italic|styled:italic,bold|sidebar:uppercase,bold,xsmall
You can moderate the following
elements (may be subject to change):
- body
- logo
- menu
- topbar
- sidebar
- header
- subheader
- styled
- footer
... with the following
modifiers:
- bold
- normal
- [weight] // 300, 400, 800, 900 etc
- italic
- uppercase
- [color] // FFFFFF, 990000, 676767 etc
- [font] // Roboto etc
- [xxlarge, xlarge, large, small, xsmall, xxsmall] // increment font size
Examples:
-
Oxygen+Volkhov
-
Gudea+Rancho
-
Inconsolata+Special Elite
-
Roboto+Bitter
-
Lato (default)
If you require more granular font control, you may instead wish to apply font styles directly into the custom CSS file. We will offer a template for moderating fonts in custom CSS, which is more flexible than the font skin setting, but requires some basic css editing knowledge. For simple modifications, it is preferred to use the basic font skin setting. There are also additional reasons why this setting is useful instead of incorporating a separate CSS stylesheet:
# We can apply font combinations in the URL (as in demos above).
# Minor moderations to font skins without having to incorporate (or understand) CSS stylesheets.
# No need to pre-create hundreds of font-skin css files for any desired font combination.
# This setting allows simple integration of any amount of Google web fonts.