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 : 553
Taille : 7,5 Ko

Nom : web_content.png
Affichages : 553
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 : 617
Taille : 22,2 Ko

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

Et en l'utilisant j'obtiens cela :
Nom : test_Z_avec.png
Affichages : 448
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 : 526
Taille : 27,3 Ko

Nom : droit_acces.png
Affichages : 526
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;
}

Utilisation de @font face

CSS

Vue hybride

Discussions similaires

Partager

Partager