Font includen met @font-face

Door Ferdi R op 16-01-2011 20:20 gewijzigd op 16-01-2011 20:22

3.711 views

Ik probeer een nieuwe font te includen maar het werkt niet en weet verder niet wat ik er aan kan doen.

Op http://www.zenelements.com/blog/css3-embed-font-face/ staat een voorbeeld die ik gebruik.

Mijn code in de CSS:
[code]
<?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]

The Ultimate

16-01-2011 20:24

CSS3?

Joakim Broden

16-01-2011 20:35

heb je een online voorbeeld staan?

@font-face word wel ondersteund, alleen je moet wel een GOED font hebben. Niet alle fonts worden goed ondersteund.

Wouter J

16-01-2011 21:38

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 -

16-01-2011 21:41

Let op dat je heel snel juridisch gezeur kan krijgen met @font-face, omdat vrijwel geen enkele font zomaar zo gebruikt mag worden.

Nick K

17-01-2011 22:20

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.

Lauren Zonneveld

17-01-2011 23:03

http://www.fontsquirrel.com/
Beweren in elk geval allemaal gratis fonts aan te bieden voor commercieel gebruik, ik gebruik regelmatig fonts van die website.

rudie dirkx

18-01-2011 00:45

Het wordt alleen in IE al heel lang ondersteund. Officieel is het toch echt CSS3.

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.

Reageren

Inloggen om te reageren