De font Algerian

aloë vera · 11 aug 2011, 17:35

hallo websitebouwers.
Ik heb een andere pc. aangeschaft omdat de vorige iedere keer vastlopers had en bleef houden, ook na vele mogelijke oorzaken en oplossingen te hebben onderzocht en opgevraagd in een ander Forum hier bij het Seniorennet.
Nu kom ik het volgende tegen: Mijn website heeft op alle bladzijdes een 'Kop' met de font "Algerian". Nu is deze niet op mijn pc. aanwezig en zie ik nu een in gewone lettertype geschreven kop staan.
Niet echt wat ik wens te zien.
Heb reeds geprobeerd deze font te downloaden, maar dit geeft geen positief resultaat.
Graag zou ik dit toch veranderd zien en misschien is het mogelijk dat een ieder die mijn site bezoekt de bedoelde lettertypes op het scherm krijgen.
Is hier misschien een speciale "tag" voor?
In hoopvolle afwachting A.Vera.

aloë vera · 11 aug 2011, 19:27

Daar ben ik weer. Ik heb met geduld mijn oude pc. zover gekregen dat ik het mapje FONT kon kopiëren en nu staat het lettertype Algerian op mijn "nieuwe" computer en de letters zijn weer zichtbaar zoals ik dat wens.

Blijft alleen de vraag of het mogelijk is een aanpassing te doen in de code , zodat bezoekers van mijn site zonder deze Algerian op de pc. toch deze (mooie

) originele titelopmaak in beeld kunnen krijgen.
Fijne avond verder , A.Vera

coderunner · 12 aug 2011, 10:07

Beste aloë vera,

Lees om te beginnen alvast deze pagina eens door en/of zoek in je favoriete browser naar "embed font in website" of "html import font".

Het komt er op neer dat je het font in verschillende formaten moet gaan omzetten, zodat het in verschillende browsers kan gelezen worden. Zoals steeds gebruiken verschillende browsers andere "normen" ... what's new!
In de css gebruik je dan de volgende code

Code: Selecteer alles

@font-face {
			font-family: 'Algerian Regular';
			src: url('algerian-webfont.eot');
			src: url('algerian-webfont.eot?#iefix') format('embedded-opentype'),
				 url('algerian-webfont.woff') format('woff'),
				 url('algerian-webfont.ttf') format('truetype'),
				 url('algerian-webfont.svg#algerian-webfont') format('svg');

body {font-family: algerian, schrijf hier andere gelatateerde fonts indien arabian niet beschikbaar is;}

Als je nog vragen heb, laat het dan weten.

mvg,
Coderunner

aloë vera · 12 aug 2011, 12:04

Hallo coderunner, dank je voor de code. Zojuist ben ik wezen kijken op de volgende sites:
http://www.kassenaar.com/blog/post/2008 ... -face.aspx
en ook deze
http://www.pixelmountain.be/html_css/em ... fonts-api/
Heb dit gelezen en nu is het (redelijk) begrijpelijk. Aangezien jouw hulp die je mij de afgelopen tijd heb gegeven steeds uitstekend bleek, ga ik op zeker en ga dus voor het inplakken van jouw code. Heb daar alleen nog deze vraag over; het volgende deel in de code komt mij vreemd over

body {font-family: algerian, schrijf hier andere gelatateerde fonts indien arabian niet beschikbaar is;}

ik meen hier een kleine typefout? te zien. en ook het arabian kan ik niet plaatsen. Wilde hierover eerst zekerheid voordat ik de code plaats.
Zoals altijd is mijn dank weer groot en meld mij later weer.
Vrolijke groet Aloë Vera

coderunner · 12 aug 2011, 12:23

aloë vera schreef:Heb daar alleen nog deze vraag over; het volgende deel in de code komt mij vreemd over
body {font-family: algerian, schrijf hier andere gelatateerde fonts indien arabian niet beschikbaar is;}
ik meen hier een kleine typefout? te zien. en ook het arabian kan ik niet plaatsen.

Beste aloë vera,

En waar zie je dan een typefout in de code?
Als het natuurlijk alleen bv. een titel is dan moet je dit in de css alleen meegegeven in desbetreffende class of id natuurlijk.
Het te gebruiken letterfont wordt door bovenstaande code achter @font-face geladen dus is het over de gehele pagina bruikbaar. Je moet wel het Algerian.ttf font omzetten in alle andere aangeduidde fonts (eot, woff, svg, ...)
Een online "converter" vind je hier (best te gebruikken in FF en niet in IE)

mvg,
Coderunner

aloë vera · 12 aug 2011, 12:38

Sorry coderunner, het is natuurlijk 'gerelateerde fonts', maar ik ben het gewoon om jouw codes klakkeloos over te plakken en met mij misschien andere bezoekers ook. Alleen de "arabian"begrijp ik nog niet in deze code. Het betreft immers Algerian. Misschien is dit een synoniem hiervoor?
Ga nu de online "converter" doorlezen en merci voor dit , again.
Groetens Aloë Vera

coderunner · 12 aug 2011, 13:07

Oeps ja dat is inderdaad een schrijffout ... sorry!

aloë vera · 12 aug 2011, 13:09

Ben ik weer, heb zojuist de converter bezocht en probeerde de Add Fonts en wilde deze downloaden. Helaas lukt dit niet, dit was in IE.
Toen naar FF gegaan, maar daar komt de Add Fonts button helemaal niet op de pagina voor en valt er dus niets te proberen downloaden.
Mijn ? wordt nu alleen deze; Als ik jouw code, coderunner, in mijn bladzijdes plak, hebben we het toch opgelost?
Het niet lukken van de converter download is dan misschien niet meer nodig?
Groetens Aloë Vera

coderunner · 12 aug 2011, 13:22

Beste aloë vera,

Hier werkt het wel in FF en alles wordt geladen. In IE krijg je bovenaan een bericht waarop je moet klikken om het downloaden te aanvaarden, maar dit lukt soms niet in IE dus daarom raadde ik je FF aan.
Ik veronderstel dat je dan toch iets verkeerds doet.

mvg,
Coderunner

coderunner · 12 aug 2011, 13:46

aloë vera schreef:... Als ik jouw code in mijn bladzijdes plak, hebben we het toch opgelost?
Het niet lukken van de converter download is dan misschien niet meer nodig? ...

Neen zo simpel is het niet. Daar het font Algerian niet tot de standaard lettertype behoort en dus niet op het besturingssysteem van de bezoekers staat, moet het ergens anders vandaan gehaald worden nl. vanop je webhostserver. M.a.w. de gecoverteerde font-bestanden moet je mee opladen naar je webhostserver anders gaat het nooit werken.
Trouwens de door mij doorgegeven code mag je deze keer eens niet klakkeloos overnemen, je moet kijken hoe het font-converteerprogramma het font genoemd heeft en dat in de code gebruiken.

Ik heb je pagina even op mijn webhostserver geplaatst, is het daar dat je het Algerian font wil hebben en is dat de juiste font ? (Welkom bij de plantenparade). Kijk hier
(PS afbeeldingen heb ik weggelaten, het gaat hier trouwens alleen om het font)

mvg,
Coderunner

PS Ik heb je e-mail adres op je website gevonden en daar de uitleg naartoe gestuurd met de benodigde bestanden! Hopelijk is dit het Algerian.ttf dat je gebruikt!

aloë vera · 12 aug 2011, 15:46

Hallo coderunner, was eventjes buiten spelen, vandaar mijn iets verlate reactie.
Mijn pagina ziet er precies uit zoals het de bedoeling is, dank je.
Heb de email goed ontvangen en ga er nu mee aan de slag, ik hoop ook dat dit de goede ttf is.
Meld mij zowiezo als ik de hele boel heb opgeladen en bekeken.
Vrolijke groet Aloë Vera

coderunner · 12 aug 2011, 16:28

Beste aloë vera,

Ik ben nog eens gaan kijken naar je index.htm pagina en je hebt alles juist gedaan. Je titel "Welkom ..." staat nu in het Algerian lettertype op je website.
Dat komt natuurlijk door mijn zeer goede uitleg

Voorheen

Nu

mvg,
Coderunner

aloë vera · 12 aug 2011, 16:38

Daar ben ik weer, De bestanden zijn opgeladen en het ziet er goed uit, het is de goede Algerian. Alleen is het vreemd dat het in mijn SP designer niet zo toont

, in ieder geval staat het goed op de site zelf en daar gaat het tenslotte om
http://www.deplantenparade.nl/.
Je bent alweer sneller als het geluid, op het moment van typen krijg ik al het bericht dat je het al heb gezien.
natuurlijk komt dit door de duidelijke en rustige uitleg, what else is new?

Groter dan xx-large gaat denk ik niet, maar daar leer ik wel mee leven.
Heb je ook de mooie foto vergroter gezien die ik , natuurlijk, ookdankzij jouw hulp en geduld heb kunnen maken?
Ga weer met plezier en uurtje verder, want er is een boel te doen aan de site.
Probeer de klik a.u.b. achter de waterkraan, mooi Amsterdam in vroeger tijden.
Heel vrolijke groetens van Aloë Vera en vast een fijn weekend.

coderunner · 12 aug 2011, 16:52

aloë vera schreef:Groter dan xx-large gaat denk ik niet, maar daar leer ik wel mee leven.

En waarom zou je titel niet groter kunnen ?
Vervang gewoon in je class .style3

Code: Selecteer alles

font-size: xx-large;

door een waarde bv.

Code: Selecteer alles

font-size: 50px;

en je zal zien dat je lettertype veel groter is !!!
Je kan dus kiezen hoe groot je de titel wil door dit getal groter of kleiner te maken.

De mouseover popups zijn heel mooi gedaan.

mvg,
Coderunner

aloë vera · 12 aug 2011, 17:10

Ja hoor, nu is het helemaal in orde

. 40 px is perfect.
Met een gerust hart zo een pintje pakken en morgen na het werk weer verder met de aanpassingen ter verfraaiing van mijn website.
O zo blij als een kind ben ik weer.
ik groet u en de anderen die dit hebben meegelezen.

Aloë Vera