Lettertype Volter (Goldfish) op je site

Status
Niet open voor verdere reacties.
Heb je het font geupload naar je server? Zit het font in dezelfde map als tekst.css en je home html? Komt de naam van de verwijzing "Volter__28Goldfish_29.ttf" overeen met de naam van het font bestand? En anders denk ik dat de @font-face methode niet gaat werken... geloof wel dat er nog andere methodes zijn, maar dit zou moeten werken.
 
Eerst was ie beter. ;)
In de css voor een font-family mogen er geen spaties tussen de woorden zitten. Als het meer woorden zijn, moeten die woorden tussen aanhalingstekens. Koppelingstekens (streepje - en underscore _) mogen er wel tussen zonder aanhalingstekens.
Dus:
Code: 
body { 
   font-family: [COLOR="darkred"]Times New Roman[/COLOR], [COLOR="darkred"]Comic Sans MS[/COLOR], Arial, sans-serif;
}
is fout, en
Code: 
body { 
   font-family: [COLOR="darkgreen"]"Times New Roman"[/COLOR], [COLOR="darkgreen"]"Comic Sans MS"[/COLOR], Arial, sans-serif;
}
is goed.

Ook de eerdere tip om een 'als niet gelukt' lettertype erna op te geven zou ik meenemen: bv. de Courier (die lijkt er nog het meest op) en als uiterste redmiddel de sans-serif (dat is het standaard-lettertype van een computer, zonder ophaaltjes).
Hier kan de inhoud van je css-bestand dus worden:
Code: 
@font-face {
   font-family: "Volter Goldfish";
   src: url('http://habso.nl/Volter__28Goldfish_29.ttf');
}

body {
   font-family: "Volter Goldfish", Courier, sans-serif;
   font-size: 7px;
      }

Hoe je het eigen import-lettertype noemt, maakt niet uit (als je maar twee keer dezelfde naam gebruikt, en als de naam in de link naar het ttf-bestand maar klopt). Het kan dus net zo goed zijn:
Code: 
@font-face {
   font-family: Appelsientje;
   src: url('http://habso.nl/Volter__28Goldfish_29.ttf');
}

body {
   font-family: Appelsientje, Courier, sans-serif;
   font-size: 7px;
}

Met vriendelijke groet,
CSShunter
 
Attentie bij embedded fonts!

Hierboven zijn een paar belangrijke punten nog niet naar voren gekomen!

Het bovenstaande werkt in elk geval niet in Internet Explorer 7 en eerdere IE's.
Daarvoor is het nodig niet alleen een .ttf bestand van het lettertype te embedden, maar ook een .eot versie van het lettertype. EOT = Embedded Open Type, een speciaal Microsoft bestandstype. Deze EOT-versies zijn er lang niet van alle lettertypes!

Ook niet onbelangrijk: let goed op of het copyright bij een lettertype wel toestaat het font te uploaden naar je server. Bij veel lettertypes is dat verboden > risico van proces aan je broek (= niet kinderachtige schadevergoeding betalen enz.).
Dat is ook de reden dat een aantal fonts geen .eot versie kunnen hebben: de makers van een .ttf lettertype kunnen daar namelijk een "anti kopie-bit" (in het fsType bit field) in zetten dat het onmogelijk maakt er een .eot van te maken.
Dus: gebruik altijd free fonts en check de copyright-bepalingen!

Deze is zowel in IE als in andere browsers te zien. Zie de broncode voor de gebruikte css.

Met vriendelijke groet,
CSShunter

PS-1: Het moeten downloaden van een lettertype door de browser vertraagt natuurlijk wel het tonen van je pagina.
PS-2: In de free fonts zitten niet altijd alle speciale lettertekens (naast de gewone a-z en A-Z), en ook kunnen ze niet altijd in alle varianten (vet, cursief) gebruikt worden.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan