jump to navigation

Webdesigner gioite: arrivano i web fonts che non si installano

In Facili, o quasi :), Guide il 18/01/08 @ 15:05 trackback

webkitfontface.pngUna di quelle piccole cose che aspettavo da tempo sembra proprio che adesso ci siano i presupposti perché diventi realtà

La possibilità di specificare particolari font, o se preferite “caratteri” tipografici da utilizzare da parte del browser senza installazione è prevista da Acid3 (hehe esatto) e comincia (piano) ad essere supportata.

Questo potrebbe aprire la strada a mostruosità eclatanti, come pure ad una serie di finezze che al momento sono auto-precluse in favore della compatibilità.

Uno dei classici problemi di inesperienza da parte di chi disegna pagine web anche a livello professionale è quello di dipendere da font che non necessariamente saranno disponibili nelle macchine di chi poi dovrà visualizzarle (problema tipico anche di alcune odiose presentazioni powerpoint). Magari ci si ostina ad utilizzare uno dei migliaia di font gratuiti scaricati da internet o cose del genere.

A peggiorare le cose poi, generalmente si aggiunge il fatto che per qualche strano motivo di solito sulle scelte più disgraziate spesso viene basato gran parte dello stile. Il risultato è che la stessa pagina agli utenti risulta anche molto differente da come era stata originariamente disegnata.

Per evitare questo, chi ha un po’ più di esperienza usa generalmente font disponibili un po’ a tutti oppure fa attenzione a non essere troppo specifico e indica solo la “famiglia” di fon, o meglio ancora – grazie a CSS – usa delle alternative “sicure” perché molto comuni. In questo modo chi non avesse il font di “prima scelta”, potrà comunque avere un’approssimazione con qualche alternativa simile, questo sta alle capacità di chi disegna, ovviamente.

Ecco come riferimento i font che usa pollycoke:

body {
font: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

Come vedete non è in assoluto niente di particolare o ricercato, ma così sono sicuro che tutti noi visualizziamo grosso modo le pagine con lo stesso aspetto. Cosa succederebbe se io volessi a tutti i costi visualizzare ad esempio i titoli dei post con uno stupendo font specifico che però nessuno ha? Grazie a queste novità dovrei semplicemente dichiarare nel CSS il posto in cui questi font sono disponibili, ad esempio:

@font-face {
    font-family: 'Vattelappesca';
    src: url('http://esempio/vattelappesca.ttf') format(truetype);
}

E poi utilizzare il font ‘Vattelappesca’ nel mio CSS come se niente fosse, magari con qualche alternativa di “fallback” decente :)

body {
font-family: 'Vattelappesca', 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

Interessante, no? Oggi Alp Toker ci da notizia che il supporto ai WebFonts, a quanto pare già presente in Opera, è stato integrato nelle ultime versioni di WebKit, questo significa che la prossima generazione di browser “nativi” per KDE, GNOME e MacOSX avrà questa stupenda funzionalità integrata. Si suppone che a seguire arriveranno anche Firefox e altri.

Altra novità di cui parla Alp sono i font SVG, che anche essi si prospettano come qualcosa di molto interessante.


Pagine forse correlate:


Commenti »

1. Framp - 18/01/08 @ 15:23

Siiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii!

Era ora!

2. pix - 18/01/08 @ 15:24

Accidenti che notizia! Non è banale svincolare il web designer dal problema dei fonts

3. ziabice - 18/01/08 @ 15:54

Mah, non ci trovo niente di che gioire, dato che l’embedding dei font era possibile già all’epoca della browser war (parlo di IE 4 e NS 4) e penso lo sia tutt’ora. Bisognava specificare un tipo particolare di font ed il gioco era fatto (vedi http://www.microsoft.com/typography/web/embedding/weft3/default.htm).
Sinceramente è una cosa orrenda. Ditemi a che serve a sto punto il web, mettete direttamente i PDF online, tanto sono navigabili…

4. kEsoNNo - 18/01/08 @ 15:56

Il concetto di webfonts non è cosa recente, già nel 1998 (10 anni fa!) le specifiche CSS3 proponevano questa possibilità, che fu implementata da Microsoft e Netscape, in modo purtroppo totalmente diverso e soprattutto totalmente inutile: entrambe, infatti, decisero di non supportare TrueType ma dei formati (EOT e TrueDoc) scarsamente diffusi.

Un articolo interessante sull’argomento:

http://css.html.it/articoli/leggi/2488/usare-i-web-fonts-nei-css/

5. kEsoNNo - 18/01/08 @ 16:01

a parte che ziabice mi ha anticipato, per quanto ho commesso un refuso: le specifiche erano CSS2, non CSS3.

@ziabice: i vantaggi, come descritto nell’articolo che ho proposto, sono la possibilità di ottenere risultati accattivanti dal punto di vista grafico senza dover ricorrere alle immagini, ottenendo così due risultati: minor peso delle pagine in termini di kb e maggiore accessibilità, in quanto un testo (seppur scritto con un font astruso :D ) è interpretabile da uno screenreader o un browser braille, mentre un’immagine no.

6. Sbaush - 18/01/08 @ 16:09

Questa è davvero una splendida notizia!!!

7. claudia - 18/01/08 @ 16:27

Fantastica notizia! forse nulla di nuovo, ma sicuramente qualcosa di diverso applicato ai metodi attuali di fare siti internet.. rende più vicini leggerezza del sito e fantasia del web designer… :D

ciao a tutti

8. Framp - 18/01/08 @ 16:29

già sta di fatto che usare font personalizzati ora come ora è un incubo.

Ben vengano i webfonts :)

9. lethalman - 18/01/08 @ 16:33

@ziabice, Alp ha visto il tuo commento e mi ha chiesto ti risponderti perche’ non sa l’italiano.

Il problema e’ che il l’embedding di Microsoft ha un formato proprietario e di conseguenza nessuno l’ha mai usato.

10. sander - 18/01/08 @ 16:37

Chissà se una volta tanto si riesce a seguire uno standard :|

11. Diavolo_Rosso - 18/01/08 @ 16:50

Per gli screen-reader esistono gli attributi alt e title che servono proprio allo scopo, e una gif trasparente con una scritta pesera al massimo 4kb (e sono stato bello largo).

Sicuramente è un bella utilità, ma secondo me niente di eccezionale o di necessario.

12. ciko - 18/01/08 @ 17:08

@Diavolo_Rosso

e certo… e se vuoi creare un sito dinamico? renderizzi tutte le scritte ogni volta?

13. unwiredbrain - 18/01/08 @ 17:08

E adesso aspettiamo Firefox 3…

14. unwiredbrain - 18/01/08 @ 17:09

A new version of WordPress is available! Please notify the site administrator.

Notifyato…

15. mmacrelli - 18/01/08 @ 17:45

Di certo 4k sono pochi viste le velocità medie di oggi ma c’è ancora gente che usa il 56k e per chi usa dispositivi mobili come cellulari in cui paghi quello che scarichi 4k sono sempre tanti se consideri che una titolo anche lungo non supera i 60 byte se usi del normale testo. Ricorda poi che le dimensioni di un file immagine dipendono molto da quanto è grande, quello che c’è dentro e dal loro formato.

Le gif per esempio sono limitate a 255 colori se si usa la trasparenza e non hanno canale alpha il che rende quasi impossibile creare testo con antialiasing decente. Le png non hanno questi difetti ma tengono mediamente di più e non tutti i browser riescono a gestire la trasparenza correttamente.

Se vuoi modificare il testo in maniera dinamica sul client tramite javascript se hai del testo puoi farlo tranquillamente mentre con le immagini sei costretto a scaricare nuove immagini al server che di conseguenza è bombardato di richieste e consuma moltissima cpu per generare le nuove scritte e banda per mandarle al client.

Come hanna già detto se devi gestire un sito che deve avere un minimo di accessibilità le immagini diventano un incubo. Usando i font, che una volta scaricati finiscono nella cache del browser, ci guadagniamo tutti quanti.

16. flux - 18/01/08 @ 17:50

ottima notizia, anche se qualcosa già si sapeva da molto tempo… cmq nel mio blog anche io ho usato una famiglia di font sicura… anche se davanti a tutti ho prediletto Bitstream Vera Sans… poi lucida, verdana ecc hihihih
i font bitstream mi piacciono troppo, non potevo negarli agli utenti linux come me hihihih

17. Andrea "Cimi" Cimitan - 18/01/08 @ 19:01

E come le mettiamo le eventuali licenze sui caratteri?

A parte quei pochi caratteri che si trovano nelle moderne distribuzioni linux negli extras, in genere che io sappia sono sempre soggetti a qualche genere di copyright.

In ogni caso è una notizia davvero molto interessante, anche se come sappiamo, bisogna vedere quanto ci mettono Firefox e soprattutto Explorer ad adeguarsi (non serve a niente finchè explorer non si adegua)

18. Yami - 18/01/08 @ 19:40

Whooo stupenda notizia!

P.S. Felipe, se non ci fosse bisognerebbe inventarlo.

19. spillo - 18/01/08 @ 20:26

sicuramente ha dei vantaggi, ma non la trovo una notizia eccezionale e ho paura che troppa gente cada nell’eccesso e sfiguri il web con questi font…

20. dark_ - 18/01/08 @ 20:45

si da una parte può essere anche bello ed esaltante, anche io mi sono sentito molto entusiasmato, ma dobbiamo sempre ricordare che anche questa feature bisogna utilizzarla con cura in quanto per utilizzare i web fonts (almeno secondo una mia idea vaga) quantomeno bisogna scaricarsi nella cache il ttf per poterlo visualizzare….

sapete che significa ?

siti più pesanti e nuove vulnerabilità da sfruttare in quanto far scaricare arbitrariamente un ttf sul pc di un visitatore può essere molto pericoloso per il malcapitato…non trovate ?

chaps
dark_

21. Conraid - 18/01/08 @ 21:29

Spero davvero che non prenda piede una cosa del genere.
Già oggi si vedono siti illeggibili per colpa di alcuni font, immaginate in quel modo. Vedo già centinaia di siti in Comic Sans o qualche font sconosciuto.
Meno male firefox mi permette di dire di non usare i font scelti dal web designer

22. WebFonts: il paradiso dei WebDesigner si avvicina | - 18/01/08 @ 22:09

[...] a Alp Toker che ha oggi ci ha rallegrato con questa notizia e Pollycoke che ha diffuso la [...]

23. gp - 18/01/08 @ 23:44

Notizia interessante anche se era una cosa già fattibile ma in maniera un pò più complicata.
Ma sinceramente la reputo una cosa da prendere con le pinze.
Al di la del discorso licenze si rischierebbe di creare ‘barocchità’ impressionanti. Questa limitazione intrinseca spinge i WebDesigner a non imbattersi in spazzatura illeggibile dando più attenzione all’accessibilità e leggibilità.
Spesso le limitazioni aiutano a progettare bene. Sia nella pura e semplice programmazione comunemente intesa che nella programmazione web.

gp

24. GraspTheRune - 19/01/08 @ 1:46

Prima che il W3C inserisca l’embedding di font esterni tra gli standard CSS3, avremo FF3, Konqueror e compagnia bella che saranno in grado di leggerli e crescieranno come funghi i siti che ne faranno uso e che naturalmente non avranno gli stili validi.

Bof.

25. GraspTheRune - 19/01/08 @ 1:48

*cresceranno

26. Hoghemaru - 19/01/08 @ 1:56

da webmaster trovo anch’io la notizia molto interessante e apre nuove possibilità stilistiche per i siti web

per tutti quelli che “non serve a niente” o “adesso faranno siti incomprensibili” rispondo semplicemente due cose:

1) quando si progetta un sito web in modo serio, non con un mero accostamento di contenuti impaginati per tentativi, ma partendo da bozze in grafica con studi sull’estetica e sull’usabilità del sito, per poi tradurlo in html/javascript/asp/php/etc, poter sfruttare un determinato font piuttosto che uno standardizzato può dare al proprio lavoro molta più forza e produrre un risultato finale molto pregevole

2) già adesso ci sono siti inguardabili anche se usano font standard (potrei fare degli esempi, ma sarebbe poco corretto), quindi l’utilizzo che si farebbe di un tale strumento sarebbe un ulteriore elemento di distinzione tra il webmaster capace e quello improvvisato: se uno sa fare il proprio lavoro sa utilizzare gli strumenti a disposizione senza abusarne

quindi benvengano queste nuove possibilità!

27. ozeta - 19/01/08 @ 11:22

continuate a fare i conti senza l’oste, tanto prima che in internet explorer non verrà implementata questa funzionalità, prima che il 75% degli utenti scarichi la nuova release di internet explorer, prima che questo standard risolva tutti i problemi legati a compatibilità e soprattutto ai bug (scaricare ed avviare un file, di dubbia provenienza, senza autorizzazioni dell’utente..)

allora si potrà pensare di utilizzare questa feature sul web.

inoltre esistono parecchi modi per bypassare questo problema..

28. Diavolo_Rosso - 19/01/08 @ 14:44

A occhio e croce non dovrebbe essere complicato creare una funzione php che crei dinamicamente il desto passato come argomento, sotto forma di immagine, se proprio e necessario. Anzi…forse l’avevo già creata.

29. amatesi - 20/01/08 @ 19:00

Finalmente…questo era un problema fino ad oggi; io usavo sifr per “aggirare”, però questo richiedeva che lato client ci fosse il plugin flash, adesso non più!
In tal modo si dovrebbe ottimizzare anche il caricamento (e ‘alleggerimento”) di alcune pagine!

30. Valerio - 21/01/08 @ 9:26

Sono molto attento all’ accessibilità ed all’ eleganza (non tanto grafica quanto semantica) delle pagine web. Se è possibile adottare una tecnica standard, in quanto definita nelle specifiche CSS, perchè non utilizzare questa invece che creare delle immagini che contengono del testo? Un testo deve essere testo, un’ immagine deve essere un’ immagine, non una serie di caratteri. Io la penso così…

31. spillo - 24/01/08 @ 0:23

aggiungo… sostituendo alle immagini dei testi con questi font, come hanno intenzione di fare i conti con i browser testuali? io mi sforzo tanto per rendere accessibile il mio piccolo sito ai browser come links, voglio proprio vedere come farei se al posto di immagini mettessi dei testi… sarebbe molto meno leggibile dal browser…

32. Federico Moretti - 20/02/08 @ 5:35

Devo dire che alzarsi alle 5:30 per studiare e trovare questo… beh, dà un senso alla propria giornata! Ottimo… :)