Fonts testen met een input type=text of textarea

De HTML5 van deze inputvelden is:

<input type="text" name="name" placeholder="Tik hier een koptekst">

<br />Tik hierboven een koptekst om het lettertype "Impact" te testen, of  hieronder een blokje tekst.
<br /><br />

<textarea placeholder="Of plak hier een blokje tekst"></textarea>

En de CSS is:

input[type=text], textarea {
		padding:10px;
		width:98%;
		font-size:36px;
		font-family:Impact;
		margin-bottom:20px;
     }
textarea {
		height:300px;
 		width:50%;
 		font-size:16px;
 		line-height:1.6;
 }
 
 ::-webkit-input-placeholder  { color:#ccc; }
 input:-moz-placeholder { color:#ccc; }
 textarea:focus:-moz-placeholder { color:#ccc; }
   

Web fonts, Google fonts

Het lijstje met web safe fonts is maar kort: dat zijn fonts die iedereen heeft. Als je andere fonts in je website wil gebruiken dan is de beste en makkelijse manier Google fonts. Bekijk daar ook de handleiding.

Wil je fonts gebruiken die niet bij Google fonts te vinden zijn, dan kan je fonts omzetten naar webfonts, bijvoorbeeld met een web font generator. Die zet de fonts dan om in o.a. woff-, eot-, ttf- en svg-formaat, zodat het in alle browsers werkt. Let op de copyrights van het lettertype: je geeft op deze manier het font gratis weg, en dat mag alleen met gratis fonts.