Font includen met @font-face
Op http://www.zenelements.com/blog/css3-embed-font-face/ staat een voorbeeld die ik gebruik.
Mijn code in de CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
if(isset($_GET['font']))
{
echo '
@font-face {
font-family: '.$_GET['titel'].';
src: local('.$_GET['titel'].'), url(‘'.$_GET['font'].'’);
}
';
}
?>
#container .box .veld textarea { text-align: center; <?php if(isset($_GET['font'])){ echo 'font-family: '.$_GET['titel'].';'; }else{ echo 'font-family: Verdana, Arial, "Trebuchet MS";'; } ?> line-height: 100px; border: 0; width: 100%; height: 200px; font-size: 40px; <?php if(isset($_GET['size'])){ echo 'font-size: '.$_GET['size'].'px;'; }else{ echo 'font-size: 40px;'; } ?> color: #940F04; background: #FFFFFF; }
[\code]
if(isset($_GET['font']))
{
echo '
@font-face {
font-family: '.$_GET['titel'].';
src: local('.$_GET['titel'].'), url(‘'.$_GET['font'].'’);
}
';
}
?>
#container .box .veld textarea { text-align: center; <?php if(isset($_GET['font'])){ echo 'font-family: '.$_GET['titel'].';'; }else{ echo 'font-family: Verdana, Arial, "Trebuchet MS";'; } ?> line-height: 100px; border: 0; width: 100%; height: 200px; font-size: 40px; <?php if(isset($_GET['size'])){ echo 'font-size: '.$_GET['size'].'px;'; }else{ echo 'font-size: 40px;'; } ?> color: #940F04; background: #FFFFFF; }
[\code]
Gewijzigd op 16/01/2011 20:22:04 door Ferdi R
@font-face word wel ondersteund, alleen je moet wel een GOED font hebben. Niet alle fonts worden goed ondersteund.
The Ultimate:
CSS3?
Ja, maar dit wordt al heel lang ondersteund. Het is alleen met CSS3 een standaard geworden.
@oetzie cookie, niet zo zeer het juiste font. Meer het juiste type. Het ene browser wil .ttf en de andere weer wat anders.
Pim - op 16/01/2011 21:41:29:
Let op dat je heel snel juridisch gezeur kan krijgen met @font-face, omdat vrijwel geen enkele font zomaar zo gebruikt mag worden.
Nee, maar ze komen er echt niet achter als een onbekende kleine website een licensed font gebruikt hoor.
Beweren in elk geval allemaal gratis fonts aan te bieden voor commercieel gebruik, ik gebruik regelmatig fonts van die website.
fontsquirrel is inderdaad een briljante resource. Niet alleen hebben ze de famout converter, maar je kan ook duizenden al gecompilede packages downloaded.
Als je een TTF of OTF bestand hebt, is de kans groot dat je het werkend krijgt. Gebruik dan de converter en lees 'handleiding'.
Ook niet geheel nutteloos en absoluut aan te raden als je 5 min over hebt: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Voor (gestripte) syntax, zie bijv: http://versfruit.com/files/fonts.css
Toevoeging op 18/01/2011 00:49:24:
Het gaat trouwens om 4 formaten. IE support (nog steeds) alleen EOT. Webkit prefereert WOFF. Wat de rest doet, weet ik niet. Het is altijd slim om TTF en SVG er bij te zetten. Browsers zijn redelijk slim en downloaden alleen het formaat dat ze snappen/nodig hebben. Als ze er 3 van de 4 aankunnen, downloaden ze de geprefereerde. Als die ongeldig is (maar een ander niet), heb je pech =)
Ik denk trouwens niet dat alle fonts (ook al heb je ze in TTF of OTF) in alle browsers mogelijk zijn. Zie bijv http://veemarktkwartier.nl/index in IE.