font in website

goede avond, ik ben bezig met een website, en nu wil ik het font "century gothic" gebruiken op mijn site, dit is geen standaard font, dus hoe zorg ik dat ik deze toch kan gebruiken zonder dat mensen die dit font niet hebben een ander font krijgen te zien?

ik hoop dat het een beetje duidelijk is wat ik bedoel, zo niet meld het even a.u.b.

alvast bedankt,

Daan

EDIT: ik werk btw in dreamweaver, voor als die info nodig is. :lol:

Mijn advies: probeer geen lettertype op te dringen aan bezoekers, maar maak je site zodat hij er ook goed (genoeg) uitziet met een ander lettertype. Met CSS is dat heel eenvoudig te doen:
[code]BODY {font-family: "Century Gothic", "Helvetica Neue", Helvetica, sans-serif;
}[/code]om maar een snel voorbeeld te geven. Dit vertelt de browser om Century Gothic te gebruiken, maar als dat niet beschikbaar is, Helvetica Neue; is dat er ook niet, dan Helvetica, en is als dat ook te vinden is, het in de browser opgegeven "standaard" sans-serif lettertype. Je kunt dit zo uitgebreid maken als je wilt met bijvoorbeeld andere lettertypes waarvan je vindt dat ze goed genoeg op Century Gothic lijken.

Ja, er zijn verschillende manieren waarmee je wel kan zorgen dat het lettertype ook echt gebruikt wordt, maar die zijn of ingewikkelder, of kosten veel meer dataverkeer, of hebben weer andere nadelen.

[url=http://www.css3.info/preview/web-fonts-with-font-face/]Dit[/url] kan een oplossing bieden. Anders moet je de tekst die je in een niet-standaard web font wil, in een afbeelding zetten.

oke, dit snap ik maar is er geen optie om bijvoorbeeld het font op de server te zetten en dan die te gebruiken als het niet beschikbaar is op de mac/pc van de bezoeker?

maar in ieder geval snap ik nu waar font-family voor staat :smile:

EDIT: Joachim_D was net eerder dan deze post.

Je zou ook nog bij [url=http://http://www.google.com/webfonts]Google webfonts[/url] kunnen kijken. Die hebben het genoemde type weliswaar niet, maar is een andere optie om webfonts te gebruiken. Er zijn meer aanbieders van dit soort diensten.

Google geeft je na de selectie van het font met eventuele instellingen ook de code die je in je website moet plakken om de font te gebruiken.

hoi daan,

Voor het gebruik van een lettertype naar keuze word er vaak gebruik gemaakt van Cufon,,, met cufon word tekst omzet naar afbeeldingen... Apple heeft dit vroeger ook gebruikt op haar website maar gebruikt tegenwoorden alleen afbeeldingen. Ps. Met css kan je ook wel wat maar niet alle browsers ondersteunen dit....

Dit kan je altijd ook nog doen met een extern stylesheet;

[code]
@font-face { font-family: Century gothic; src: url('fonts/century-gothic.ttf'); }
[/code]

Dat zet je boven ergens aan de pagina voor een mooier overzicht

En dan zet je de font in die map, en roep hem later dus gewoon weer aan;

[code]
#voorbeeld{
font-family:Century gothic;
}
[/code]

Dat is overigens CSS3, werk niet in oude browsers zoals die oude IE versies.. maarja waarom zou je dat nog gebruiken ;)

Cufon wordt bijna niet meer gebruikt, @font-face wordt tegenwoordig zo breed ondersteund dat dat niet meer nodig is. Via http://www.fontsquirrel.com/ kan je fonts omzetten naar webfonts die in bijna alle browsers ondersteund worden, je krijgt daar ook een demo bestand bij over hoe het te implementeren.

Iedereen harstikke bedankt, het is me gelukt! Dat sommige browsers het niet ondersteunen is geen ramp, het is alleen net iets mooier met century gothic als font.

Nogmaals bedankt,

Daan

EDIT: ik heb nog 1 vraagje, ik zie op mijn iPod touch dat het daar niet op werkt, iemand suggesties?

Browsers die font-face niet ondersteunen laten dus ook je font niet zien, ook kan het zijn dat je een andere extensie moet gebruiken.

Voorbeelden:
- eot
- 'woff
- ttf
- svg

ik heb als css code dit, misschien kunnen jullie zien wat er fout is/gaat?

[code]
@charset "utf-8";
/* CSS Document */

@font-face {
font-family: century gothic;
src:url(fonts/century_gothic-webfont.eot) format('embedded-opentype');
src:url (fonts/century_gothic-webfont.woff) format('woff');
src:url(fonts/century_gothic-webfont.ttf) format('truetype');
src:url(fonts/century_gothic-webfont.svg) format('svg');
}
body {
background-image: url(background.png);
background-position: top left;
background-repeat: repeat;
}
#header {
background-image:url(logo_header.png);
padding-top: 103px;
background-repeat: no-repeat;
margin-top: 30px;
}
#content {
font-family: century gothic;
background-color: #FFF;
-moz-box-shadow: 0 0px 20px #333;
-webkit-box-shadow: 0 0px 20px#333;
box-shadow: 0 0px 20px #333;
margin-top: 20px;
padding-top: 0px;
}
[/code]

alvast bedankt :smile:

EDIT: die </p><p> die staat niet in mijn code, OMT voegt dit toe aan mijn code...

ik denk dat je ../ voor je fonts moet zetten

(fonts/century_gothic-webfont.eot)

wordt

(../fonts/century_gothic-webfont.eot)

ik ga er effe vanuit dat je de standaar map indeling hebt (dus je css staat ook in je map css) en je html en fonts map er buiten, dan moet je dus met ../ vertellen dat hij eerst naar de hoofdmap gaat.

nee, het staat allemaal los in de hoofdmap, daarom vind ik het ook zo gek...

maar toch bedankt :lol:

Lees deze post is na! Ik zal er morgen ook een post over maken op mijn nieuwe blog [url=http://www.wwebsites.nl]www.wwebsites.nl [/url]

Wat doet die [code]@charset[/code] in je css document?

character sets vrij vertaald;) gewoon de set die jij gebruikt voor je document, meestal gebruik je UTF-8... (gebruikt je browser ook standaard) unicode,,,

Als je deze anders defineerd kunnen bepaalde characters niet worden erkent. (bv. het euro teken) al is dat in een css niet zo van belang....

Ik begrijp wat de charset is, maar wat doet die in een css document, die staat toch altijd in de html file ?

@koen ja,.. dreamweaver zet het daar in, geen idee of het daar hoort of niet.

Ik gebruik geen Dreamweaver. :smile:

Ik kan je trouwens sterk aanraden om je css en html eens met alleen een tekst editor te maken, daar leer je heel veel van! En het is een stuk goedkoper.

@koen nou.. als ik genoeg geld had om een officiële versie van DW te kopen, had ik toch een iMac gekocht. :smile: