Differences

This shows you the differences between two versions of the page.

--- en:template:web-fonts [2017/06/19 14:40]
Nicolas Ronvel created
+++ en:template:web-fonts [2017/06/19 15:29] (current)
Nicolas Ronvel
@@ Line 1: / Line 1: @@
 ====== Web Fonts ======
-Custom fonts are an optional field of the template. It's added at the root of the template, at the same levels than ''description'' or ''styles'' :
+Web fonts are an optional field of the template. It's added at the root of the template, at the same levels that ''description'', ''styles'' or ''fonts'' :
 <code javascript>
@@ Line 7: / Line 7: @@
     "styles": [ ],
     "fonts" : [ ],
+    "webfonts": { },
     "description": { }
 };
 </code>
-In the ''fonts'' array, you can add as many custom fonts as you need. But what is a custom font ?
+In the ''webfonts'' object, you specify which webfonts you want to use, and where to retrieve them. Geckos uses the [[https://github.com/typekit/webfontloader|Webfontloader tool]] to achieve this.
-===== What is a Custom Font ? =====
+This tool provides access to fonts from multiple sources : Google Fonts, TypeKit, Adobe, Fonts.com, ... Through a ''WebFontConfig'' object, you can add fonts from multiple source in a single pass.
-A custom font is a font you want to ensure will be accessible by anyone. A custom font is basically two things : a ''fontFamily'' that indicates the string we'll use to say //"We use that font"//, and an url to the font file.
+===== But how do I use this ? =====
-<code javascript>
+First, take a look at the [[https://github.com/typekit/webfontloader|Webfontloader documentation]].
-{
-    "styles": [ ],
-    "fonts" : [
-        { "fontFamily": "MyFontFamily", "src": "url" }
-    ],
-    "description": { }
-};
-</code>
-We'll use this font as a [[http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp|CSS font-face]].
+For the example, we'll use two fonts from the Google Fonts library. Let's say [[https://fonts.google.com/specimen/Lora|Lora]] and [[https://fonts.google.com/specimen/Lora|Merriweather]] !
-===== The font file and Url =====
+You just have to add this code to your template to use the font :
-If you host **geckos**, you can add your needed font on you server, and set a relative path to it as the url :
+    "webfonts": {
+        "google": {
+            "families": ["Merriweather", "Lora"]
+        }
+    },
-<code javacript>
+As you can see, in the ''webfonts'' object, you create a ''google'' object, which has a ''families'' array. In this array, you simply put the names of the desired fonts. Easy, isn't it ?
-{ "fontFamily": "MyFontFamily", "src": "fonts/myFont.woff" }
-</code>
-You can also sets the url to a distant server, but it might sometimes create bugs (server down, firewall preventing access to the server, server path changed, ...).
-<code javacript>
-{ "fontFamily": "MyFontFamily", "src": "http://www.fonts.com/myFont.woff" }
-</code>
-Finally, as for the images of the canvas, we can use the [[Dataurl-Variables|DataUrl]] of a font file. You can find some explanations of this on [[http://sosweetcreative.com/2613/font-face-and-base64-data-uri|SoSweetCreative]], but the goal is the same as for the images : the font file is translated in a string format, embedded into the template code, and is sure to be present for the user.
-<code javascript>
-{ "fontFamily": "MyFontFamily", "src": "data:application/octet-stream;base64,T1RUTw......" }
-</code>
-See for example the [[https://github.com/Gulix/geckos/blob/master/templates/wquest-silvertower-herocard.json|Warhammer Quest - Silver tower]] template, that uses such a font.
 ===== The FontFamily =====
-The ''fontFamily'' property is a String that represents the name of the font. It's better with no spaces or funky characters. This name could follow the original one of the font, but it's not mandatory.
+The ''fontFamily'' property is a String that represents the name of the font. Use the one provided by the external source (for example, ''Merriweather'' from google). It's the name that your template will use in order to display text with that font. Any ''Text'', ''Textbox'' or similar fields you will use in the Canvas can use that font :
-It's now the name that your template will use in order to display text with that font. Any ''Text'', ''Textbox'' or similar fields you will use in the Canvas can use that font :
 <code javascript>
-{ "type": "textbox", "left": 0, "top": 0, "width": 100, "text": "$name", "fontFamily": "MyFontFamily" },
+{ "type": "textbox", "left": 0, "top": 0, "width": 100, "text": "$name", "fontFamily": "Merriweather" },
 </code>
-That's how you use **Custom fonts** in **Geckos** !
+That's how you use **Webfonts** in **Geckos** !
-===== Optional - The Font Style =====
-The font you just added is added to the webpage as a //Regular// font. It means you can use that font to display regular text (ie not italic). But what if you want to display italic text ?
-If your font is only meant to be used in italic, you can set the italic version of the font as the ''src'' and use it. It will work just fine.
-If you plan to use your font in both regular and italic version, it will not work this way. Instead, you need to add two **custom fonts** : one for the regular style, one for the italic :
-<code javascript>
-"fonts" : [
-    { "fontFamily": "MyFontFamily", "src": "data:application/octet-stream;base64,T1RUTw......" },
-    { "fontFamily": "MyFontFamily", "fontStyle": "italic", "src": "data:application/octet-stream;base64,T1RUTw......" }
-]
-</code>
-The ''src'' part of the italic font need to be the italic version file of the font. Or another font ? Yes, it's up to you, template creator, to play with this ! For example, you could mix two totally different fonts inside a [[Rich-Text-Field|Rich Text field]] by setting one to the Italic mode.
-==== What about the bold ? ====
-The bold version of a font is sometimes a different file as well. For the moment, **Geckos** don't use that possibility of using specific //bold version// of a font file, but instead render bold text automatically. It could be a later addition to the software.

Geckos Documentation

User Tools

Site Tools

Differences

Page Tools