{{!/*
Font definitions
----------------------------
Font weights must be defined as arrays, even wheen there's only one weight to be defined.
In case of different sizes for each weight, they can be defined in separate objects.
*/}}

{{#extend "preview/layouts/layout"}}
	{{#content "content"}}
		<section class="sg_inner_wrapper sg_warning">
			<strong>Warning:</strong> By default, the font loader assumes to find a <code>/assets/css/fonts.css</code> file. This can be configured as a parameter of the <code>FontLoader</code> instance in <code>head.js</code>. The result is that this currently fails on our GitHub pages, e.g., where the whole build is in a subdirectory. Subsequently, the request to the CSS file will result in a 404 and Roboto will not be loaded.
		</section>

		{{#each fonts}}
			<section class="sg_inner_wrapper">
				<h2 class="sg_h2">family: {{family}}</h2>
				{{#each variants}}
					<div class="sg_fonts_font">
						<div class="sg_subsection">
							<h3 class="sg_h3">weight: {{weight}} <br/>style: {{style}}</h3>
							<div style="font-family: {{../family}}; font-style: {{style}}; font-weight: {{weight}}; font-size: 16px;">
								<p>
									A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br />
									a b c d e f g h i j k l m n o p q r s t u v w x y z<br />
									À È Ì Ò Ù Á É Í Ó Ú Ä Ë Ï Ö Ü Â Ê Î Ô Û Ç<br />
									à è ì ò ù á é í ó ú ä ë ï ö ü â ê î ô û ç<br />
									0 1 2 3 4 5 6 7 8 9 . , ; : - _ = { } ( ) [ ] ? ! $ £ & % * " ' § °<br />
								</p>
							</div>
							<h3 class="sg_h3">example text</h3>
							<div style="font-family: {{../family}}; font-style: {{style}}; font-weight: {{weight}}; font-size: 16px;">
								<p>
									A static build is a compiled version of a program which has been statically linked against libraries.
								</p>
								<p>
									In computer science, linking means taking one or more objects generated by compilers and assemble them into a single executable program. The objects are program modules containing machine code and symbol definitions, which come in two varieties:
								</p>
								<p>
									Defined or exported symbols are functions or variables that are present in the module represented by the object, and which should be available for use by other modules.
									Undefined or imported symbols are functions or variables that are called or referenced by this object, but not internally defined.
									A linker program then resolves references to undefined symbols by finding out which other object defines a symbol in question, and replacing placeholders with the symbol's address. Linkers can take objects from a collection called a library. The final program does not include the whole library, only those objects from it that are needed. Libraries for diverse purposes exist, and one or more system libraries are usually linked in by default.
								</p>
								<p>
									Modern operating system environments allow dynamic linking, or the postponing of the resolving of some undefined symbols until a program is run. That means that the executable still contains undefined symbols, plus a list of objects or libraries that will provide definitions for these. Loading the program will load these objects/libraries as well, and perform a final linking.
								</p>
							</div>
							<pre class="sg_code sg_code_font">
.selector {
	font-family: {{../family}};
	font-weight: {{weight}};
	font-style: {{style}};
}
							</pre>
						</div>
					</div>
				{{/each}}
			</section>
		{{/each}}
	{{/content}}
{{/extend}}