[Guida] Usare font personale esterno per template

[Alucard82]

Non so se già qualcuno l'ha postato, però ieri ho trovato un modo per incorporare qualsiasi font all'interno delle vostre pagine web, cosa ke è molto utile nel caso un utente non disponga del particolare font ke abbiamo usato.
I passi da seguire sono i seguenti:

1) Editate il css;

2) inserite

@font-face {
        font-family: 'GT-Lucida Calligraphy';
        src: url("../fonts/GT-LucidaCalligraphy.ttf");
}
dove:
font-family è il NOME ESATTO del font che volete usare
src indica l'url dove avete messo il vostro font (io l'ho messo in una cartella kiamata fonts nella root del TEMPLATE, quindi se il template si kiama "cicciobrioche" allora create la cartella "cicciobrioche/fonts")

3) inserite nel CSS il nome del font dove volete usarlo (io l'ho inserito in .contentheading e in .componentheading)

4) BASTA!

A me funziona regolarmente, quindi provate e fatemi sapere.

ciao a tutti!

[Orchid]

Grazie, ottima segnalazione!

Che tu sappia, ci sono controindicazioni in queste procedure? Voglio dire, sembra una cosa semplice, ma non è che in rete si vedano molti font personalizzati...!

[danielone80]

ciao questo e' il mio codice non so dove sbaglio

table.moduletable div.mainmenu_l0iover, table.moduletable .mainmenu_l0iover, div.mainmenu_l0iover, .mainmenu_l0iover {
font-size: 13pt;
@font-face {
        font-family: 'Copperplate Gothic Bold';
        src: url("../modules/mod_lxmenu/fonts/COPRGTB.TTF.ttf");
}
font-weight: bolder;
text-align: center;
text-decoration: none !important;
margin-top: 5px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
background: #FFFFFF;
color: #0033FF;
}

Grazie
Daniel

[danielone80]

src: url("../modules/mod_lxmenu/fonts/COPRGTB.ttf");
} 

ho corretto questa parte ma non va

Ciao

[raben]

src: url("../modules/mod_lxmenu/fonts/COPRGTB.ttf");
} 

ho corretto questa parte ma non va

Ciao

Sono un po perplesso... ho il vago sopsetto che funzioni solo su explorer anche perchè la chiamata css non è valida difatti viene rifiutata dal validatore css...
indago e vi faccio sapere.. ma ho il sospetto che non sia una soluzione valida

[raben]

src: url("../modules/mod_lxmenu/fonts/COPRGTB.ttf");
} 

ho corretto questa parte ma non va

ho guardato le specifiche css a tal riguardo ed effettivamente questa specifica esiste..
il motivo per cui non ti funziona è che hai dichiarato in maniera errata la definizione.
la versione giusta è qualcosa tipo questo

Codice: [Seleziona]

@font-face {
        font-family: 'Copperplate Gothic Bold';
        src: url("../modules/mod_lxmenu/fonts/COPRGTB.TTF.ttf");
}


.mainmenu_l0iover {
font-family: 'Copperplate Gothic Bold';
font-size: 13pt;
font-weight: bolder;
text-align: center;
text-decoration: none !important;
margin-top: 5px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
background: #FFFFFF;
color: #0033FF;
}


[raben]

finalmente ho capito di più riguardo a questa specifica..
in buona sostanza è stata messa nella versione css 2
ma eliminata nella 2.1 per mancanza di diffusione da parte dei vari browser.
@font-face è poi ricomparso nelle specifiche 3.0 dei css
Per il momento questa specifica non è supportata dai browser mozilla come da faq
http://www.mozilla.org/docs/web-developer/faq.html
se volete leggervi un blog in merito a questo argomento in lingua inglese vi consiglio di andare qui
http://bluebones.net/2006/10/digital-typography-and-font-face
su cui vi è un interessante discussione a tal proposito
saluti
alberto

[danielone80]

grazie raben, provo e ti faccio sapere

Daniel

[danielone80]

Perfetto funziona!!! anche su mozilla

Ciao
Daniel

[raben]

Perfetto funziona!!! anche su mozilla

Ottimo buona a sapersi.. che mozilla hai così controllo?

[migliosj]

Grazie dell'info,vi faccio però una domanda,io devo uppare un font il cui nome è "Lucida Calligraphy",ho visto che è un font commerciale,se lo compro con licenza 1-5 users,andrei incontro a problemi?Oppure potrei upparlo tranquillamente?o per caso conoscete un font uguale?grazie in anticipo

[raben]

Grazie dell'info,vi faccio però una domanda,io devo uppare un font il cui nome è "Lucida Calligraphy",ho visto che è un font commerciale,se lo compro con licenza 1-5 users,andrei incontro a problemi?Oppure potrei upparlo tranquillamente?o per caso conoscete un font uguale?grazie in anticipo

Ovvio che se lo metti in upload violi la licenza. Purtroppo i font di libero utilizzo sono veramente pochi, quindi state attenti prima di mettere un font commerciale o potreste incorrere in grossi problemi legali soprattutto con l'invenzione di google code!

[upupax]

a me non va.. 
ho preso un font a caso da internet, ma non riesco a farlo funzionare.
visualizzando il codice css della pagina mi vede tutti i comandi tranne font-family (probabilmente perchè non riconosce il font..)
cosa sbaglio??
ho l'ultima versione di firefox per mac..

Codice: [Seleziona]

@font-face {
        font-family: 'Pulse Sans Virgin';
        src: url("../fonts/Pulse_virgin.ttf");
}

ul#mainlevel-nav li
{
background-image: none;
padding: 0px;
float: left;
margin: 0;
        font-family; 'Pulse Sans Virgin';
font-size: 9px;
white-space: nowrap;
display: inline;
}

[64T5U]

Codice: [Seleziona]


ul#mainlevel-nav li
{
background-image: none;
padding: 0px;
float: left;
margin: 0;
        font-family; 'Pulse Sans Virgin';
font-size: 9px;
white-space: nowrap;
display: inline;
}

Direi qua, in corrispondenza di "font-family": hai messo ';' invece di ':'

Errore di sintassi quindi.

[matrix845]

Ciao ragazzi , alla fine non sono riuscito a capire come e dove va inserito nel css del mio templates la sintassi.
 

[roccomichele]

bhè ... http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,421/Itemid,35/

mi sembra più facile e da mie prove ha molti meno problemi di supporto dai browser

[upupax]

bhè ... http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,421/Itemid,35/

mi sembra più facile e da mie prove ha molti meno problemi di supporto dai browser

Anch'io l'ho provato, ma sinceramente non ho ben capito come si possano aggiungere altri font.

[Orchid]

A me funziona!

Sia su Firefox 2 (ultima versione), che su IE6, tutti per PC. Anche su Dreamweaver. Ora faccio altre prove nei computer altrui, ma credo che vada comunque!

EDIT
Come non detto, su altri computer (con IE6) non vedo il font...

[thepisu]

A mio avviso, ad ora l'unico modo per usare font particolari in un sito web è tramite immagini. Il metodo del @font-face non è supportato in Firefox (e questo lo rende poco opportuno), mentre sIFR mi pare un po' limitato, inoltre non mi piace l'idea di avere del testo dentro a Flash.

Date un'occhiata a questa libreria:
http://sgssweb.com/experiments/phpfontimagegenerator2/

E' fantastica, permette di creare immagini con testo formattato a partire da qualsiasi file font TTF! Si potrebbe studiare un modo per integrarla in Joomla... Ad esempio creare un modulo menu, che permetta di scegliere così il tipo di carattere per le voci.

[Orchid]

Interessante! Anche se è sempre un accrocchio, e non vorrei che influisse sull'indicizzazione o altro, poi.

Però è strano che nel 2007 ancora il web sia limitato ad usare solo 5 o 6 tipi di font per questo fatto di non poter visualizzare font non presenti nel sistema. Per me dovrebbero risolverlo a livello di browser (senza andare a installare niente nel sistema appunto).
Chissà se mai succederà.

[thepisu]

Interessante! Anche se è sempre un accrocchio, e non vorrei che influisse sull'indicizzazione o altro, poi.

Però è strano che nel 2007 ancora il web sia limitato ad usare solo 5 o 6 tipi di font per questo fatto di non poter visualizzare font non presenti nel sistema. Per me dovrebbero risolverlo a livello di browser (senza andare a installare niente nel sistema appunto).
Chissà se mai succederà.

Beh il problema è che in output hai un'immagine invece che del testo, ma se ci metti gli attributi "title" e "alt" dovrebbe riparare almeno in parte.

Si pensavo anche io che è assurdo che ad oggi non esista una seria gestione web dei font, ma penso che non ci sarà una soluzione in tempi brevi. Penso che ci sarà da aspettare qualcosa tipo una evoluzione del classico formato TTF (magari basato su SVG?), che sia approvata da organismi come il W3C, e diventi standard in Firefox e Internet Explorer... Ma immagino ci vorrà qualche anno, anche perché pare non essere una priorità, e ci sono tante altre cose in ballo.

[raben]

il problema dei font sul web è un problema non piccolo e che visto come funziona il web dubito che verrà mai risolto se non tra molti molti anni.
il sIFR come tutti i metodi di replace sia flash che image non sono esattamente il massimo a livello di accessibilità ne tanto meno di ottimizzazione sui motori di ricerca, ma sono assolutamente d'accordo sul fatto che meglio un immagine che un flash. Io consiglio di usare con parsimonia questo metodo e in ogni caso considerare SEMPRE una "graceful degradation" e fare in modo che l'immagine ripiazzata non sia FONDAMENTALE per l'usabilità o la navigabilità del sito. in buona sostanza deve essere una cosa di bellezza e non una cosa funzionale.
State inoltre attenti ad alcuni metodi di replace image in quanto google ogni tanto li "mazzuola" in quanto sono potenzialmente degli spam o identificati come dei "cappelli neri"
Fate vobis!

[thepisu]

Io consiglio di usare con parsimonia questo metodo e in ogni caso considerare SEMPRE una "graceful degradation" e fare in modo che l'immagine ripiazzata non sia FONDAMENTALE per l'usabilità o la navigabilità del sito. in buona sostanza deve essere una cosa di bellezza e non una cosa funzionale.

Beh dipende però... In certi casi il cliente ti chiede un sito che sia graficamente d'effetto, quindi vuole anche pulsanti, menu, titoli che ricalchino uno stile particolare. In questi casi i classici Arial, Times e così via ci stanno un po' stretti... Eventualmente si può creare un link testuale ad una sitemap, per garantire la navigabilità.

[raben]

Si questo è verissimo, ma ho notato che con i miei clienti l'avvertimento "beware of google!" funziona sempre!
in ogni caso va sempre usato il giusto calibro. Pure io ho usato situazioni tra l'altro in joomla di image replacement su www.oropiupreziosi.com ma non ne sono stato felicissimo di utilizzarlo.
E cmq queste sono le famose disquisizioni sul sesso degli angeli   o come direbbe Krug tra contadini e mandriani! ^__^

[k0nan]

il problema dei font sul web è un problema non piccolo e che visto come funziona il web dubito che verrà mai risolto se non tra molti molti anni.
il sIFR come tutti i metodi di replace sia flash che image non sono esattamente il massimo a livello di accessibilità ne tanto meno di ottimizzazione sui motori di ricerca,

forse non avete ben chiaro cosa fa sifr: sovrappone un layer FLASH al testo. se non hai il plugin per produrre quel layer, viene visualizzato testo normale. il testo NON viene sostituito da una immagine.

leggasi: i crawler leggono il testo.

consiglio approfondita rilettura:
http://www.mikeindustries.com/sifr
http://www.mikeindustries.com/blog/archive/2004/08/sifr

ovviamente è sconsigliato abusarne dato che vogliamo time-to-completion e time-to-first-byte i più bassi possibile. certo, visti i template proposti da rcktheme, y00thm etc, cosiddetti "professionali" con qualche centinaio di kb solo in home page..


ciao

[Maxiride]

Segnalo dafont.com
Là ci sono molti font free!