Andere fonts embedden op website

Pagina: 1
Acties:

  • Nik
  • Registratie: April 2004
  • Laatst online: 30-11 14:49
Hmmm, ik kom hier niet vaak, maar nu zit ik dan toch echt even klem, op wellicht iets heel eenvoudigs...

Probleem

Ik wil namelijk een niet-standaard font embedden op mijn website. Nu ben ik al een behoorlijke tijd aan het zoeken naar een oplossing, maar ik kom er niet aan uit.

Wat ik inmiddels al gedaan heb:

Google, tot op het irritante aan toe. Het probleem is, dat ik niet weet of er een bepaalde naam is voor deze techniek. Eerst zocht ik op "change text with images". Dat leverde geen relevante resultaten op. Daarna "special font php" en "change font with images", wat me uiteindelijk bracht op "embed font php". Toch heb ik zo nog niet kunnen vinden wat ik zocht. De meest interessante website is deze:

http://www.spoono.com/html/tutorials/tutorial.php?id=19

Waar ze me netjes uitleggen waarom ik voor een embedded-font moet gaan, en niet voor losse images (dataverkeer!). Het probleem hierbij is dat de door hun aangedragen techniek (het gebruik van .eot bestanden), niet geschikt is voor niet-IE brouwsers, en het er hier dan ook écht niet meer uit ziet (de letters worden veel te groot, en rekken de layout uit zijn verband).

Daarbij komt kijken, dat ik een heel apart font wil gaan gebruiken. Het is Bookman Old Style, bold, de letters wit, met een 1px randje er omheen. Dit is zo in te stellen in Photoshop of Fireworks, maar niet op een website (via php, lijkt me). Ik zal dus ws opzoek moeten naar een font dat er standaard zo uit ziet.

Andere links (die me niets wijzer maakte):

[lettertype] server-side (geen oplossing)
Web embedded fonts. (weer eot files)
Font meesturen met site? (mij niet duidelijk)

en nog vele andere...

Verder heb ik gekeken naar enkele sites waar ze de techniek gebruiken. Ik heb de complete .css en de index.php ontleed, maar ik heb het niet kunnen vinden. De tekst die aangepast wordt staat gewoon tussen <h1>hier</h1>, en als ik dit terug zoek in de .css, dan staat daar een normaal font in. Sterker nog, als ik de hele site (index en css) lokaal draai, dan gaat het mis. het speciale font is nergens te bekennen (dit kan omdat ik het óf niet op mijn pc heb staan, óf de gebruikte code in een ander (php?)bestand staat).

Tot slot heb ik nog een interessante quote:
The process is very clumsy. When you download a page it first displays in the default font and then it requests the font information. When that has downloaded, then you see the embedded font. You get this very noticable refresh of the page where the font style changes after an indeterminate period of time.

So, not only does it bump up the bandwidth, it has this nasty refresh effect. Much as I would like to use other fonts, that certainly put me off using it.

Having said that, there are a lot more fonts that could be used than the usual Arial, Times, Verdana, Georgia, Helvetica. Modern versions of Windows and Mac OSX come with hundreds of fonts that can be used fairly safely.

I have an article planned for the near future that suggest some 'new' sets that are available with close alternatives on Mac and PC. You will still have to tag the old ones onto the end of the list for backwards compatibility.
Scheelt dit nu echt zo veel in bandbreedte? En is het dus iets dat af te raden is?

Keuzes

Ik kan kiezen voor verschillende oplossingen. Ik kan de tekst om laten zetten naar plaatjes, wat mij de makkelijkste manier, maar niet de beste manier lijkt. Puur vanwege dataverkeer (en dat gaat een hoop worden). Deze optie valt dus af.

Ik wil dus het liefst op de één of andere manier mijn font embedden, maar ik heb geen idee hoe dat het beste te doen is.

Voorbeelden

Enkele voorbeeldsites waar deze techniek gebruik wordt:

http://www.partypassion.net/ <--- zie de sierlijke letters, zelfs met schaduw effect (roze) uitgevoerd
http://www.geenstijl.nl/ <--- zie de kopjes boven de nieuwsitems

De vraag

De vraag is dus simpel. Wat is de beste techniek om fonts te embedden? En weet iemand hoe die techniek heet? Want via Google kom ik er (zo) dus niet aan uit. Ik vraag geen script, alleen een advies, en eventueel de naam van de beste techniek (zodat ik verder kan Googelen, en de techniek zelf toe kan passen). Ik wil het namelijk wel zelf leren hoe ik dit moet doen (zodat als er wat mis gaat, ik het ook zelf op kan lossen).

Alvast hardstikke bedankt voor de antwoorden!

[ Voor 3% gewijzigd door Nik op 21-02-2007 11:49 ]


  • Plecky
  • Registratie: Januari 2004
  • Niet online
Je kan natuurlijk gewoon een plaatje maken van je tekst, maar de voorbeelden die je aandraagt maken gebruik van sIFR.
Daarbij wordt na het laden m.b.v. javascript bepaalde kopjes vervangen door een Flash object met allerhande gave opmaak.

  • SchizoDuckie
  • Registratie: April 2001
  • Laatst online: 18-02 23:12

SchizoDuckie

Kwaak

sIFR is idd de way to go :) (zie geenstijl.nl, etc) Je hebt ook de verkeerde kant opgezocht door er vanuit te gaan dat je aan de serverside een lettertype moet vervangen ipv aan de clientside :)

Stop uploading passwords to Github!


  • Nik
  • Registratie: April 2004
  • Laatst online: 30-11 14:49
Kijk, daar had ik zelf nou nooit op gekomen. Ik wist wel dat het cliëntside moest zijn (When you download a page it first displays in the default font and then it requests the font information. When that has downloaded, then you see the embedded font.).

Heel erg bedankt hier weer voor de geweldige antwoorden, kan ik weer gerust verder ;)