User Tools

Site Tools


en:template:custom-fonts

Differences

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

Link to this comparison view

en:template:custom-fonts [2016/08/10 16:20] (current)
Nicolas Ronvel created
Line 1: Line 1:
 +====== Custom 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''​ : 
 +
 +<code javascript>​
 +{
 +    "​styles":​ [ ],
 +    "​fonts"​ : [ ],
 +    "​description":​ { }
 +};
 +</​code>​
 +
 +In the ''​fonts''​ array, you can add as many custom fonts as you need. But what is a custom font ?
 +
 +===== What is a Custom Font ? =====
 +
 +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.
 +
 +<code javascript>​
 +{
 +    "​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]].
 +
 +===== The font file and Url =====
 +
 +If you host **geckos**, you can add your needed font on you server, and set a relative path to it as the url :
 +
 +<code javacript>​
 +{ "​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.
 +
 +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"​ },
 +</​code>​
 +
 +That's how you use **Custom fonts** 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.
 +
  
en/template/custom-fonts.txt · Last modified: 2016/08/10 16:20 by Nicolas Ronvel