Font includen met @font-face

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ferdi R

Ferdi R

16/01/2011 20:20:10
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
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]
Gewijzigd op 16/01/2011 20:22:04 door Ferdi R
 
PHP hulp

PHP hulp

02/12/2021 19:27:55
 
The Ultimate

The Ultimate

16/01/2011 20:24:48
Quote Anchor link
CSS3?
 
Joakim Broden

Joakim Broden

16/01/2011 20:35:44
Quote Anchor link
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

Wouter J

16/01/2011 21:38:34
Quote Anchor link
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 -

Pim -

16/01/2011 21:41:29
Quote Anchor link
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

Nick K

17/01/2011 22:20:39
Quote Anchor link
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

Lauren Zonneveld

17/01/2011 23:03:07
Quote Anchor link
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

rudie dirkx

18/01/2011 00:45:59
Quote Anchor link
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.