Utilisation de @font face

**francky74** · 01/12/2017, 15h47

Bonjour,

Je découvre le @font face. En voyant les différentes explications sur le net, cela à l'air simple à utiliser.

J'utilise Mozillia firefox pour Linux Mint 1.0 et la version de firefox est la 49.0.
Pour comprendre les chemins de fichier de mon projet, voici une copie de mon dossier racine :
Nom : web_content.png
Affichages : 496
Taille : 7,5 Ko

Nom : web_content.png
Affichages : 496
Taille : 7,5 Ko

Les fichiers ttf, woff et woff2 sont dans le dossier utility.

Donc voici le html dans lequel je désire utiliser la police :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="general_body"   style="text-align:center;">
	<p id="contact_titre" class="contact_class_color_or">{{contact.titre}}</p>
</div>

Le fichier css que voici qui contient le @font face et le font familly :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
@font-face {
    font-family: 'shojumaruregular';
    src: url('../utility/shojumaru-regular-webfont.woff2') format('woff2'),
         url('../utility/shojumaru-regular-webfont.woff') format('woff');
         src: url("../utility/shojumaru-regular-webfont.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
 
}
 
#contact_titre {
	font-family: 'shojumaruregular';
	text-shadow: 5px 5px 15px #c90016;
        font-size:8vw;
}

Le résultat n'est pas au rendez-vous ....

Sans utiliser la police (c'est à dire en commentant la ligne 13 du css), j'obtiens ceci :
Nom : test_Z_sans.png
Affichages : 538
Taille : 22,2 Ko

Nom : test_Z_sans.png
Affichages : 538
Taille : 22,2 Ko

Et en l'utilisant j'obtiens cela :
Nom : test_Z_avec.png
Affichages : 415
Taille : 24,0 Ko

Donc on voit bien qu'il y a une différence de police notamment sur la lettre 'Z' mais c'est bien différent du résultat auquel je m'attends puisque la police que j'ai téléchargé est plutôt de type asiatique et visible ici : http://www.fontspace.com/astigmatic-...tute/shojumaru

Et en plus, comme j'ai passé la font dans font squirel, il y a un fichier demo.html qui reprend cette police et qui fonctionne très bien avec le même navigateur ....
voici le fichier de shojumaru-regular-demo.html que j'ai downloadé de font squirel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
	if(typeof param.defaultContent=="number")
	{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
	$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
	function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
	{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
	$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
	</script>
	<link rel="stylesheet" href="specimen_files/specimen_stylesheet.css" type="text/css" charset="utf-8" />
	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
 
	<style type="text/css">
					body{
				font-family: 'shojumaruregular';
							}
		</style>
 
	<title>Shojumaru Regular Specimen</title>
 
 
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			$('#container').easyTabs({defaultContent:1});
		});
	</script>
</head>
 
<body>
<div id="container">
	<div id="header">
		Shojumaru Regular	</div>
	<ul class="tabs">
		<li><a href="#specimen">Specimen</a></li>
		<li><a href="#layout">Sample Layout</a></li>
				<li><a href="#glyphs">Glyphs &amp; Languages</a></li>
		<li><a href="#installing">Installing Webfonts</a></li>
 
	</ul>
 
	<div id="main_content">
 
 
			<div id="specimen">
 
				<div class="section">
					<div class="grid12 firstcol">
						<div class="huge">AaBb</div>
					</div>
				</div>
 
				<div class="section">
					<div class="glyph_range">A&#x200B;B&#x200b;C&#x200b;D&#x200b;E&#x200b;F&#x200b;G&#x200b;H&#x200b;I&#x200b;J&#x200b;K&#x200b;L&#x200b;M&#x200b;N&#x200b;O&#x200b;P&#x200b;Q&#x200b;R&#x200b;S&#x200b;T&#x200b;U&#x200b;V&#x200b;W&#x200b;X&#x200b;Y&#x200b;Z&#x200b;a&#x200b;b&#x200b;c&#x200b;d&#x200b;e&#x200b;f&#x200b;g&#x200b;h&#x200b;i&#x200b;j&#x200b;k&#x200b;l&#x200b;m&#x200b;n&#x200b;o&#x200b;p&#x200b;q&#x200b;r&#x200b;s&#x200b;t&#x200b;u&#x200b;v&#x200b;w&#x200b;x&#x200b;y&#x200b;z&#x200b;1&#x200b;2&#x200b;3&#x200b;4&#x200b;5&#x200b;6&#x200b;7&#x200b;8&#x200b;9&#x200b;0&#x200b;&amp;&#x200b;.&#x200b;,&#x200b;?&#x200b;!&#x200b;@&#x200b;(&#x200b;)&#x200b;#&#x200b;$&#x200b;%&#x200b;*&#x200b;+&#x200b;-&#x200b;=&#x200b;:&#x200b;;</div>
				</div>
				<div class="section">
					<div class="grid12 firstcol">
						<table class="sample_table">
							<tr><td>10</td><td class="size10">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>11</td><td class="size11">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>12</td><td class="size12">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>13</td><td class="size13">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>14</td><td class="size14">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>16</td><td class="size16">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>18</td><td class="size18">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>20</td><td class="size20">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>24</td><td class="size24">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>30</td><td class="size30">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>36</td><td class="size36">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>48</td><td class="size48">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>60</td><td class="size60">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>72</td><td class="size72">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
							<tr><td>90</td><td class="size90">abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr>
						</table>
 
					</div>
 
				</div>
 
 
 
								<div class="section" id="bodycomparison">
 
 
										<div id="xheight">
				<div class="fontbody">&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;&#x25FC;body</div><div class="arialbody">body</div><div class="verdanabody">body</div><div class="georgiabody">body</div></div>
										<div class="fontbody" style="z-index:1">
											body<span>Shojumaru Regular</span>
										</div>
										<div class="arialbody" style="z-index:1">
											body<span>Arial</span>
										</div>
										<div class="verdanabody" style="z-index:1">
											body<span>Verdana</span>
										</div>
										<div class="georgiabody" style="z-index:1">
											body<span>Georgia</span>
										</div>
 
 
 
								</div>
 
 
				<div class="section psample psample_row1" id="">
 
					<div class="grid2 firstcol">
						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid3">
						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid3">
						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid4">
						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="white_blend"></div>
 
				</div>
				<div class="section psample psample_row2" id="">
					<div class="grid3 firstcol">
						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid4">
						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid5">
						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
 
					<div class="white_blend"></div>
 
				</div>
 
				<div class="section psample psample_row3" id="">
					<div class="grid5 firstcol">
						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					<div class="grid7">
						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
 
					<div class="white_blend"></div>
 
				</div>
 
				<div class="section psample psample_row4" id="">
					<div class="grid12 firstcol">
						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					<div class="white_blend"></div>
 
				</div>
 
 
 
				<div class="section psample psample_row1 fullreverse">
					<div class="grid2 firstcol">
						<p class="size10"><span>10.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid3">
						<p class="size11"><span>11.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid3">
						<p class="size12"><span>12.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid4">
						<p class="size13"><span>13.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="black_blend"></div>
 
				</div>
 
				<div class="section psample psample_row2 fullreverse">
					<div class="grid3 firstcol">
						<p class="size14"><span>14.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid4">
						<p class="size16"><span>16.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="grid5">
						<p class="size18"><span>18.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
 
					</div>
					<div class="black_blend"></div>
 
				</div>
 
				<div class="section psample fullreverse psample_row3" id="">
					<div class="grid5 firstcol">
						<p class="size20"><span>20.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					<div class="grid7">
						<p class="size24"><span>24.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
 
					<div class="black_blend"></div>
 
				</div>
 
				<div class="section psample fullreverse psample_row4" id="" style="border-bottom: 20px #000 solid;">
					<div class="grid12 firstcol">
						<p class="size30"><span>30.</span>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.</p>
					</div>
					<div class="black_blend"></div>
 
				</div>
 
 
 
 
			</div>
 
			<div id="layout">
 
				<div class="section">
 
					<div class="grid12 firstcol">
						<h1>Lorem Ipsum Dolor</h1>
						<h2>Etiam porta sem malesuada magna mollis euismod</h2>
 
						<p class="byline">By <a href="#link">Aenean Lacinia</a></p>
					</div>
				</div>
				<div class="section">
					<div class="grid8 firstcol">
						<p class="large">Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
 
 
						<h3>Pellentesque ornare sem</h3>
 
						<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. </p>
 
						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
 
						<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. </p>
 
						<p>Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. </p>
 
						<h3>Cras mattis consectetur</h3>
 
						<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. </p>
 
						<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
					</div>
 
					<div class="grid4 sidebar">
 
						<div class="box reverse">
							<p class="last">Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
						</div>
 
						<p class="caption">Maecenas sed diam eget risus varius.</p>
 
						<p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
 
 
 
						<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. </p>
 
						<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p>
 
					</div>
				</div>
 
			</div>
 
 
 
 
 
 
		<div id="glyphs">
			<div class="section">
				<div class="grid12 firstcol">
 
				<h1>Language Support</h1>
				<p>The subset of Shojumaru Regular in this kit supports the following languages:<br />
 
					Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Bislama, Cebuano, Corsican, Fijian, French_creole, Genoese, Gilbertese, Greenlandic, Haitian_creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko_ilokano, Indonesian, Interglossa_glosa, Interlingua, Irish_gaelic, Jerriais, Lojban, Lombard, Luxembourgeois, Manx, Mohawk, Norfolk_pitcairnese, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Potawatomi, Rhaeto-romance, Romansh, Rotokas, Sami_lule, Samoan, Sardinian, Scots_gaelic, Seychelles_creole, Shona, Sicilian, Somali, Southern_ndebele, Swahili, Swati_swazi, Tagalog_filipino_pilipino, Tetum, Tok_pisin, Uyghur_latinized, Volapuk, Walloon, Warlpiri, Xhosa, Yapese, Zulu, Latinbasic, Ubasic, Demo				</p>
				<h1>Glyph Chart</h1>
				<p>The subset of Shojumaru Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.</p>
				<div id="glyph_chart">
 
																				 <div><p>&amp;#13;</p>
</div>
																				 <div><p>&amp;#32;</p> </div>
																				 <div><p>&amp;#33;</p>!</div>
																				 <div><p>&amp;#34;</p>"</div>
																				 <div><p>&amp;#35;</p>#</div>
																				 <div><p>&amp;#36;</p>$</div>
																				 <div><p>&amp;#37;</p>%</div>
																				 <div><p>&amp;#38;</p>&</div>
																				 <div><p>&amp;#39;</p>'</div>
																				 <div><p>&amp;#40;</p>(</div>
																				 <div><p>&amp;#41;</p>)</div>
																				 <div><p>&amp;#42;</p>*</div>
																				 <div><p>&amp;#43;</p>+</div>
																				 <div><p>&amp;#44;</p>,</div>
																				 <div><p>&amp;#45;</p>-</div>
																				 <div><p>&amp;#46;</p>.</div>
																				 <div><p>&amp;#47;</p>/</div>
																				 <div><p>&amp;#48;</p>0</div>
																				 <div><p>&amp;#49;</p>1</div>
																				 <div><p>&amp;#50;</p>2</div>
																				 <div><p>&amp;#51;</p>3</div>
																				 <div><p>&amp;#52;</p>4</div>
																				 <div><p>&amp;#53;</p>5</div>
																				 <div><p>&amp;#54;</p>6</div>
																				 <div><p>&amp;#55;</p>7</div>
																				 <div><p>&amp;#56;</p>8</div>
																				 <div><p>&amp;#57;</p>9</div>
																				 <div><p>&amp;#58;</p>:</div>
																				 <div><p>&amp;#59;</p>;</div>
																				 <div><p>&amp;#60;</p><</div>
																				 <div><p>&amp;#61;</p>=</div>
																				 <div><p>&amp;#62;</p>></div>
																				 <div><p>&amp;#63;</p>?</div>
																				 <div><p>&amp;#64;</p>@</div>
																				 <div><p>&amp;#65;</p>A</div>
																				 <div><p>&amp;#66;</p>B</div>
																				 <div><p>&amp;#67;</p>C</div>
																				 <div><p>&amp;#68;</p>D</div>
																				 <div><p>&amp;#69;</p>E</div>
																				 <div><p>&amp;#70;</p>F</div>
																				 <div><p>&amp;#71;</p>G</div>
																				 <div><p>&amp;#72;</p>H</div>
																				 <div><p>&amp;#73;</p>I</div>
																				 <div><p>&amp;#74;</p>J</div>
																				 <div><p>&amp;#75;</p>K</div>
																				 <div><p>&amp;#76;</p>L</div>
																				 <div><p>&amp;#77;</p>M</div>
																				 <div><p>&amp;#78;</p>N</div>
																				 <div><p>&amp;#79;</p>O</div>
																				 <div><p>&amp;#80;</p>P</div>
																				 <div><p>&amp;#81;</p>Q</div>
																				 <div><p>&amp;#82;</p>R</div>
																				 <div><p>&amp;#83;</p>S</div>
																				 <div><p>&amp;#84;</p>T</div>
																				 <div><p>&amp;#85;</p>U</div>
																				 <div><p>&amp;#86;</p>V</div>
																				 <div><p>&amp;#87;</p>W</div>
																				 <div><p>&amp;#88;</p>X</div>
																				 <div><p>&amp;#89;</p>Y</div>
																				 <div><p>&amp;#90;</p>Z</div>
																				 <div><p>&amp;#91;</p>[</div>
																				 <div><p>&amp;#92;</p>\</div>
																				 <div><p>&amp;#93;</p>]</div>
																				 <div><p>&amp;#94;</p>^</div>
																				 <div><p>&amp;#95;</p>_</div>
																				 <div><p>&amp;#96;</p>`</div>
																				 <div><p>&amp;#97;</p>a</div>
																				 <div><p>&amp;#98;</p>b</div>
																				 <div><p>&amp;#99;</p>c</div>
																				 <div><p>&amp;#100;</p>d</div>
																				 <div><p>&amp;#101;</p>e</div>
																				 <div><p>&amp;#102;</p>f</div>
																				 <div><p>&amp;#103;</p>g</div>
																				 <div><p>&amp;#104;</p>h</div>
																				 <div><p>&amp;#105;</p>i</div>
																				 <div><p>&amp;#106;</p>j</div>
																				 <div><p>&amp;#107;</p>k</div>
																				 <div><p>&amp;#108;</p>l</div>
																				 <div><p>&amp;#109;</p>m</div>
																				 <div><p>&amp;#110;</p>n</div>
																				 <div><p>&amp;#111;</p>o</div>
																				 <div><p>&amp;#112;</p>p</div>
																				 <div><p>&amp;#113;</p>q</div>
																				 <div><p>&amp;#114;</p>r</div>
																				 <div><p>&amp;#115;</p>s</div>
																				 <div><p>&amp;#116;</p>t</div>
																				 <div><p>&amp;#117;</p>u</div>
																				 <div><p>&amp;#118;</p>v</div>
																				 <div><p>&amp;#119;</p>w</div>
																				 <div><p>&amp;#120;</p>x</div>
																				 <div><p>&amp;#121;</p>y</div>
																				 <div><p>&amp;#122;</p>z</div>
																				 <div><p>&amp;#123;</p>{</div>
																				 <div><p>&amp;#124;</p>|</div>
																				 <div><p>&amp;#125;</p>}</div>
																				 <div><p>&amp;#126;</p>~</div>
																				 <div><p>&amp;#160;</p>*</div>
																				 <div><p>&amp;#161;</p>¡</div>
																				 <div><p>&amp;#162;</p>¢</div>
																				 <div><p>&amp;#163;</p>£</div>
																				 <div><p>&amp;#164;</p>¤</div>
																				 <div><p>&amp;#165;</p>¥</div>
																				 <div><p>&amp;#166;</p>¦</div>
																				 <div><p>&amp;#167;</p>§</div>
																				 <div><p>&amp;#168;</p>¨</div>
																				 <div><p>&amp;#169;</p>©</div>
																				 <div><p>&amp;#170;</p>ª</div>
																				 <div><p>&amp;#171;</p>«</div>
																				 <div><p>&amp;#172;</p>¬</div>
																				 <div><p>&amp;#173;</p>*</div>
																				 <div><p>&amp;#174;</p>®</div>
																				 <div><p>&amp;#175;</p>¯</div>
																				 <div><p>&amp;#176;</p>°</div>
																				 <div><p>&amp;#177;</p>±</div>
																				 <div><p>&amp;#178;</p>²</div>
																				 <div><p>&amp;#179;</p>³</div>
																				 <div><p>&amp;#180;</p>´</div>
																				 <div><p>&amp;#181;</p>µ</div>
																				 <div><p>&amp;#182;</p>¶</div>
																				 <div><p>&amp;#183;</p>·</div>
																				 <div><p>&amp;#184;</p>¸</div>
																				 <div><p>&amp;#185;</p>¹</div>
																				 <div><p>&amp;#186;</p>º</div>
																				 <div><p>&amp;#187;</p>»</div>
																				 <div><p>&amp;#188;</p>¼</div>
																				 <div><p>&amp;#189;</p>½</div>
																				 <div><p>&amp;#190;</p>¾</div>
																				 <div><p>&amp;#191;</p>¿</div>
																				 <div><p>&amp;#192;</p>À</div>
																				 <div><p>&amp;#193;</p>Á</div>
																				 <div><p>&amp;#194;</p>Â</div>
																				 <div><p>&amp;#195;</p>Ã</div>
																				 <div><p>&amp;#196;</p>Ä</div>
																				 <div><p>&amp;#197;</p>Å</div>
																				 <div><p>&amp;#198;</p>Æ</div>
																				 <div><p>&amp;#199;</p>Ç</div>
																				 <div><p>&amp;#200;</p>È</div>
																				 <div><p>&amp;#201;</p>É</div>
																				 <div><p>&amp;#202;</p>Ê</div>
																				 <div><p>&amp;#203;</p>Ë</div>
																				 <div><p>&amp;#204;</p>Ì</div>
																				 <div><p>&amp;#205;</p>Í</div>
																				 <div><p>&amp;#206;</p>Î</div>
																				 <div><p>&amp;#207;</p>Ï</div>
																				 <div><p>&amp;#208;</p>Ð</div>
																				 <div><p>&amp;#209;</p>Ñ</div>
																				 <div><p>&amp;#210;</p>Ò</div>
																				 <div><p>&amp;#211;</p>Ó</div>
																				 <div><p>&amp;#212;</p>Ô</div>
																				 <div><p>&amp;#213;</p>Õ</div>
																				 <div><p>&amp;#214;</p>Ö</div>
																				 <div><p>&amp;#215;</p>×</div>
																				 <div><p>&amp;#216;</p>Ø</div>
																				 <div><p>&amp;#217;</p>Ù</div>
																				 <div><p>&amp;#218;</p>Ú</div>
																				 <div><p>&amp;#219;</p>Û</div>
																				 <div><p>&amp;#220;</p>Ü</div>
																				 <div><p>&amp;#221;</p>Ý</div>
																				 <div><p>&amp;#222;</p>Þ</div>
																				 <div><p>&amp;#223;</p>ß</div>
																				 <div><p>&amp;#224;</p>à</div>
																				 <div><p>&amp;#225;</p>á</div>
																				 <div><p>&amp;#226;</p>â</div>
																				 <div><p>&amp;#227;</p>ã</div>
																				 <div><p>&amp;#228;</p>ä</div>
																				 <div><p>&amp;#229;</p>å</div>
																				 <div><p>&amp;#230;</p>æ</div>
																				 <div><p>&amp;#231;</p>ç</div>
																				 <div><p>&amp;#232;</p>è</div>
																				 <div><p>&amp;#233;</p>é</div>
																				 <div><p>&amp;#234;</p>ê</div>
																				 <div><p>&amp;#235;</p>ë</div>
																				 <div><p>&amp;#236;</p>ì</div>
																				 <div><p>&amp;#237;</p>í</div>
																				 <div><p>&amp;#238;</p>î</div>
																				 <div><p>&amp;#239;</p>ï</div>
																				 <div><p>&amp;#240;</p>ð</div>
																				 <div><p>&amp;#241;</p>ñ</div>
																				 <div><p>&amp;#242;</p>ò</div>
																				 <div><p>&amp;#243;</p>ó</div>
																				 <div><p>&amp;#244;</p>ô</div>
																				 <div><p>&amp;#245;</p>õ</div>
																				 <div><p>&amp;#246;</p>ö</div>
																				 <div><p>&amp;#247;</p>÷</div>
																				 <div><p>&amp;#248;</p>ø</div>
																				 <div><p>&amp;#249;</p>ù</div>
																				 <div><p>&amp;#250;</p>ú</div>
																				 <div><p>&amp;#251;</p>û</div>
																				 <div><p>&amp;#252;</p>ü</div>
																				 <div><p>&amp;#253;</p>ý</div>
																				 <div><p>&amp;#254;</p>þ</div>
																				 <div><p>&amp;#255;</p>ÿ</div>
																				 <div><p>&amp;#338;</p>Œ</div>
																				 <div><p>&amp;#339;</p>œ</div>
																				 <div><p>&amp;#376;</p>Ÿ</div>
																				 <div><p>&amp;#710;</p>ˆ</div>
																				 <div><p>&amp;#732;</p>˜</div>
																				 <div><p>&amp;#8192;</p> </div>
																				 <div><p>&amp;#8193;</p> </div>
																				 <div><p>&amp;#8194;</p> </div>
																				 <div><p>&amp;#8195;</p> </div>
																				 <div><p>&amp;#8196;</p> </div>
																				 <div><p>&amp;#8197;</p> </div>
																				 <div><p>&amp;#8198;</p> </div>
																				 <div><p>&amp;#8199;</p> </div>
																				 <div><p>&amp;#8200;</p> </div>
																				 <div><p>&amp;#8201;</p> </div>
																				 <div><p>&amp;#8202;</p> </div>
																				 <div><p>&amp;#8208;</p>‐</div>
																				 <div><p>&amp;#8209;</p>‑</div>
																				 <div><p>&amp;#8210;</p>‒</div>
																				 <div><p>&amp;#8211;</p>–</div>
																				 <div><p>&amp;#8212;</p>—</div>
																				 <div><p>&amp;#8216;</p>‘</div>
																				 <div><p>&amp;#8217;</p>’</div>
																				 <div><p>&amp;#8218;</p>‚</div>
																				 <div><p>&amp;#8220;</p>“</div>
																				 <div><p>&amp;#8221;</p>”</div>
																				 <div><p>&amp;#8222;</p>„</div>
																				 <div><p>&amp;#8226;</p>•</div>
																				 <div><p>&amp;#8230;</p>…</div>
																				 <div><p>&amp;#8239;</p> </div>
																				 <div><p>&amp;#8249;</p>‹</div>
																				 <div><p>&amp;#8250;</p>›</div>
																				 <div><p>&amp;#8287;</p> </div>
																				 <div><p>&amp;#8364;</p>€</div>
																				 <div><p>&amp;#8482;</p>™</div>
																				 <div><p>&amp;#9724;</p>◼</div>
																				 <div><p>&amp;#64257;</p>ﬁ</div>
																				 <div><p>&amp;#64258;</p>ﬂ</div>
																																						</div>	
				</div>
 
 
			</div>
		</div>
 
 
		<div id="specs">
 
		</div>
 
		<div id="installing">
			<div class="section">
				<div class="grid7 firstcol">
					<h1>Installing Webfonts</h1>
 
					<p>Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.</p>
 
					<h2>1. Upload your webfonts</h2>
					<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
 
					<h2>2. Include the webfont stylesheet</h2>
					<p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="https://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
 
 
<code>
@font-face{ 
	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}
</code>
 
	<p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
	<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
 
					<h2>3. Modify your own stylesheet</h2>
					<p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
<code>p { font-family: 'WebFont', Arial, sans-serif; }</code>
 
<h2>4. Test</h2>
<p>Getting webfonts to work cross-browser <em>can</em> be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.</p>
				</div>
 
				<div class="grid5 sidebar">
					<div class="box">
						<h2>Troubleshooting<br />Font-Face Problems</h2>
						<p>Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.</p>
 
						<h3>Fonts not showing in any browser</h3>
 
						<p>This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.</p>
 
						<h3>Fonts not loading in iPhone or iPad</h3>
 
						<p>The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.</p>
 
						<h3>Fonts not loading in Firefox</h3>
 
						<p>The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)</p>
 
						<h3>Fonts not loading in IE</h3>
 
						<p>Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.</p>
 
						<h3>Fonts not loading in IE9</h3>
 
						<p>IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.</p>
					</div>
				</div>
			</div>
 
		</div>
 
	</div>
	<div id="footer">
		<p>&copy;2010-2017 Font Squirrel. All rights reserved.</p>
	</div>
</div>
</body>
</html>

et le css aussi downloadé de font squirel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 1, 2017 */
 
@font-face {
    font-family: 'shojumaruregular';
    src: url('shojumaru-regular-webfont.woff2') format('woff2'),
         url('shojumaru-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
 
}

J'ai essayé plein de choses (mais pas la bonne chose

) ....
Quelqu'un aurait-il une idée pour m'aider s'il vous plaît ?

Merci beaucoup !

**JefReb** · 01/12/2017, 18h21

Apparemment il ne trouve pas la font.
N'y a-t-il pas un problème de chemin relatif ou absolu?
Je vois ../

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

src: url('../utility/shojumaru-regular-webfont.woff2')

Donc utilisation d'un chemin relatif. Toujours délicat à utiliser.
En partant de la racine du site et en utilisant le chemin absolu, il y a moins de risque d'erreur.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

src: url('/utility/shojumaru-regular-webfont.woff2')

**francky74** · 01/12/2017, 18h49

Bonjour,

Je pense que vous avez raison, j'ai bien essayé votre solution, mais sans succés.

J'avais oublié de mettre, dans mon post précédent, le message d'erreur de firefox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

downloadable font: download failed (font-family: "shojumaruregular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: file:///home/franckymint/informatique/workspaces/Chez_Yen_2017/Git/ClientWebServer/ClientWebServer/WebContent/utility/shojumaru-regular-webfont.ttf

La source indiquée dans ce message d'erreur est bonne.

Pour les droits d'accès des dossiers, je pense que c'est bon aussi :
Nom : droit_acces.png
Affichages : 469
Taille : 27,3 Ko

Nom : droit_acces.png
Affichages : 469
Taille : 27,3 Ko

En plus, j'ai copié les fichiers woff, woff2 et ttf dans les dossiers 'utility', 'vues', 'css' et à la racine ... rien à faire !

Merci de votre aide,

**francky74** · 01/12/2017, 22h51

Ca y est ! j'ai enfin pu afficher les polices ......

J'ai finalement copié les fichiers woof, woff2 dans les dossier "vues" où je mets normalement les vues.
J'ai ensuite copié le code css du @font face dans un fichier séparé et l'ai mis aussi dans le dossier "vues".

Du coup, les chemins ne contiennent que les noms de fichiers sans chemins.

Le fichier css qui se trouve dans le dossier css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#contact_titre {
	font-family: 'shojumaruregular';
	text-shadow: 5px 5px 15px #c90016;
	font-size:10vw;
}

et le fichier css séparé contenant le @font face et qui se trouve dans le dossier "vues" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@font-face {
    font-family: 'shojumaruregular';
    src: url('shojumaru-regular-webfont.woff2') format('woff2'),
         url('shojumaru-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

C'est pas trop tôt !!!!

**JefReb** · 02/12/2017, 08h32

Ben honnêtement, ce n'est pas normal et source d'erreur et compliqué
Je persiste à dire que c'est un problème de chemin et qu'il faudrait que tu maîtrises la différence entre chemin relatif et absolu.
Quand tu utilises ../ cela veut dire que tu remontes l'arborescence des dossiers de ton site pour redescendre dans un autre dossier.
Quelle galère, source de nombreuses erreurs et c'est sûr que l'on peut se tromper.

Alors que si la page html est faite pour être vu via un serveur comme toutes pages d'un site, il faut utiliser le chemin absolu.
Dans ce cas où que tu sois dans n'importe quels dossiers de ton site, le chemin absolu sera reconnu.

Invité · 02/12/2017, 09h37

Bonjour,

Comment utiliser une police personnalisée sur un site Web ?
(voir aussi la discussion)

@ JefReb

Envoyé par JefReb

...il faudrait que tu maîtrises la différence entre chemin relatif et absolu...

Un chemin relatif fonctionne très bien, à partir du moment où on sait ce qu'on fait.
Encore faudrait-il que tu maitrises toi-même...

Ici, le Chemin relatif doit être celui entre :

le fichier CSS lui-même (et PAS la page dans lequel il est inclus !)
et les fichiers de fonts

Si je me réfère à l'arborescence montrée (dossiers "css" et "utility" au même niveau), alors '../utility/.....' est correct.

L'erreur était le 2ème src:..... en trop dans le 1er code montré.
De plus, .ttf est 'truetype' :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
@font-face {
    font-family: 'shojumaruregular';
    src: url('../utility/shojumaru-regular-webfont.ttf') format('truetype'),
         url('../utility/shojumaru-regular-webfont.woff2') format('woff2'),
         url('../utility/shojumaru-regular-webfont.woff') format('woff');
 
    font-weight: normal;
    font-style: normal;
}

**JefReb** · 02/12/2017, 12h38

Jérôme, je suis tout à fait d'accord avec ce que tu écris.
Je n'ai pas vu que le 2ème src.. était en trop. C'est vrai que je réponds parfois un peu vite

Mais quoiqu'il en soit,

Un chemin relatif fonctionne très bien, à partir du moment où on sait ce qu'on fait.
Encore faudrait-il que tu maitrises toi-même...

Je maîtrise très bien les chemins relatifs et absolutes, et je suis toujours très étonné que beaucoup utilisent le chemin relatif, toujours très difficile à maîtriser dans certains cas, plutôt que le chemin absolute.
Je pense pour l'avoir demandé avec mes participants qui ne comprennent toujours tout l'intérêt.

Dans un site super simple avec des dossiers uniquement à la racine, cela ne pose pas trop de problèmes.
Mais quand vous avez un site avec dossiers et nombreux sous dossiers, il devient difficile sinon très difficile de définir un chemin en relatif dans un dossier (CSS) contenant les styles extérieurs.

Invité · 02/12/2017, 13h09

Quand on range bien ses affaires, on les retrouve facilement.

Dans un fichier CSS, TOUTES les URLs peuvent être relative.

Le secret est là :

Dans un fichier CSS, le chemin relatif doit être celui entre :

le fichier CSS lui-même (et PAS la page dans lequel il est inclus !)
et les fichiers de fonts (ou images pour background, icones,...)

**francky74** · 02/12/2017, 17h31

Bonjour !

Merci à vous d'approfondir le sujet !

Donc, si je comprends bien :
mes chemins "../utility/..." étaient bons
par contre il ne faut pas la deuxième src :

L'erreur était le 2ème src:..... en trop dans le 1er code montré.

Il est vrai que j'avais mis un deuxième src contenant le .ttf, mais j'ai modifié/actualisé le premier message et cette src a sauté. Est-ce de cela dont tu veux parler ? ou bien parles-tu du deuxième url dans le src (celui déclarant le woff2) ?

d'autre part, la configuration actuelle du projet est que j'ai copié tous les fichiers relatifs à la police dans le dossier "vues" (ce que je ne souhaite pas en réalité mais je n'arrive pas à paramétrer les chemins des url) et j'ai paramétré les url sans chemins, c'est à dire juste avec les noms de fichiers. Ce qui montre que le dossier racine est le dossier "vues" ... êtes-vous en accord avec cette affirmation ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
src: url('shojumaru-regular-webfont.woff2') format('woff2'),
         url('shojumaru-regular-webfont.woff') format('woff');

Merci à vous,

Invité · 02/12/2017, 17h46

Non.

J'ai mis le code nécessaire dans ta configuration initiale.

**JefReb** · 03/12/2017, 09h41

Jérôme, je suis quand même obligé de répondre.
OUI, bien sûr que l'on peut toujours utiliser le chemin relatif.
Mais même avec des dossiers bien ordonnés, le chemin absolute est quand même plus facile.

Alors, oui, avec un chemin absolute, on ne peut pas l'exécuter directement sur son navigateur, il faut passer par un serveur qui saura résoudre le chemin absolute.
Mais, si l'on travaille en Php, par exemple, on est obligé de toute façon à passer par un serveur.
D'où mes réponses, et je persiste à dire, comme je l'ai vu une fois, qu'il est plus simple d'écrire

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="/divers/images/logo.jpg">

que

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="../../divers/images/logo.jpg">

Invité · 03/12/2017, 10h31

@JefReb
1- Tu n'es pas développeur, et a donc une vision très partielle du développement.

Même sur serveur, on a aussi besoin que les codes soient facilement portables, et que les fichiers/dossiers puissent se mettre dans un autre dossier que la racine.

Dans le cas qui nous intéresse, prenons cette arborescence :
-dossier "template"
--dossier "css" (fichier de style CSS)
--dossier "fonts" (polices de caractères)
--dossier "img" (images utiles pour les background)

Avec des chemins relatifs (dans le fichier CSS), on peut mettre le dossier "template" dans n'importe quel autre dossier (pas forcément à la racine), et les URL fonctionneront quand même.
Avec des chemins absolus, il faudra modifier le fichier CSS pour ajouter partout ce nouveau dossier intermédiaire.

Exemple de code CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* ---------------- typos --------------- */
@font-face { /* Raleway */
 font-family: 'Raleway';
 src: url('../fonts/Raleway/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
   url('../fonts/Raleway/raleway-regular-webfont.woff') format('woff'),
   url('../fonts/Raleway/raleway-regular-webfont.ttf') format('truetype'),
   url('../fonts/Raleway/raleway-regular-webfont.svg#Raleway') format('svg');
 font-weight: normal;
 font-style: normal;
}
 
/* -------------------------------------- */
a.extLink { background:url(../img/icones/ico16_web_link.png) 0 4px no-repeat; padding-left:18px; overflow:hidden; }
a.email { background:url(../img/icones/ico16_email_link.png) 0 0 no-repeat; padding-left:18px; }

2- Tu montres le code d'une image (balise <img>), qui n'a pas de rapport avec la discussion, puisqu'on parle du fichier CSS...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="/divers/images/logo.jpg">

Envoyé par JefReb

...avec un chemin absolute, on ne peut pas l'exécuter directement sur son navigateur...

Je vais t'en apprendre une bien bonne : ON PEUT l'afficher AUSSI EN LOCAL !

Il existe la balise <base>, qui permet de définir l'URL de base !

href
L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.
Les URI absolues et relatives sont autorisées (voir la note ci-après).

En local, tu pourras donc indiquer (dans le <head> de la page) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<base href="http://localhost:8080/monsitelocal/">

**JefReb** · 03/12/2017, 20h42

Bon d'accord, je ne suis pas développeur et ma réponse n'était pas lié au css.
Pour la balise <base> alors là oui j'apprends. Comme quoi il n'y a pas d'age.
Aller à bientôt sur un autre post et merci pour les explications toujours aussi claires.

**francky74** · 04/12/2017, 09h50

Yeap !

Donc, c'est intéressant cette balise <BASE> !

Me conseillez-vous de l'utiliser ? ou est-ce du superflux ?

D'autre part, je souhaiterias une précision sur les deux points dans les url :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

../

Est-ce que ces deux points signifient :

je remonte en arrière dans l'arboressence par rapport au dossier dans lequel se situe le fichier dans lequel l'url est décrite ?
que l'url décrite démarre depuis le dossier racine du projet ?

Moi, quand j'utilise ces deux points, je les utilise en pensant que je remonte d'un fichier dans l'arborescence. comme la commande shell suivante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

cd ..

Merci

**JefReb** · 04/12/2017, 12h23

En position relative (j'ai très peur de Jérôme ...

), d'après ce que j'ai pu lire et comprendre, le point veut dire "Là où je suis"
Donc de là où je suis pour aller dans un répertoire au dessous il faut faire:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

./fonts/---

ou plus simplement sans point et sans /:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

fonts/---

Si on veut remonter dans l'arborescence, il faut rajouter un point:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

../fonts/---

et ainsi de suite. ça peut devenir pénible si le site est mal structuré et ordonné, pour remonter encore d'un cran comme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

../../fonts/---

Mais comme dit Jérôme, je ne suis qu'un développeur occasionnel et bénévole et je préfère utiliser le chemin absolu qui part de la racine avec seulement un /
comme:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

/fonts/---

Au moins je n'ai pas à me casser la tête. Mais peut être que quelque chose m'échappe, donc, c'est vous qui voyez ...

Invité · 04/12/2017, 12h31

Envoyé par JefReb

En position relative (j'ai très peur de Jérôme ...

)

Oui, tu peux avoir peur !

Pour le reste, chacun est libre de coder comme bon lui semble, du moment que ça lui convient.

Quant aux explications, une simple recherche permet de trouver des réponses :

Comprendre les URL et leur structure

**francky74** · 04/12/2017, 12h44

Ah ok ! merci

Utilisation de @font face

CSS

Discussions similaires

Partager

Partager