Joomla.it Forum

Joomla! 1.0.x (versione con supporto terminato) => Le voci di Joomla.it (solo per versione Joomla 1.0.x) => I Template di Joomla 1.0.x => : Alucard82 05 May 2007, 14:45:07

: [Guida] Usare font personale esterno per template
: Alucard82 05 May 2007, 14:45:07
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!
: Re: [Guida] Usare font personale esterno per template
: Orchid 07 May 2007, 08:40:24
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...!
: Re: [Guida] Usare font personale esterno per template
: danielone80 09 Jun 2007, 12:44:42
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
: Re: [Guida] Usare font personale esterno per template
: danielone80 09 Jun 2007, 13:07:12
src: url("../modules/mod_lxmenu/fonts/COPRGTB.ttf");


ho corretto questa parte ma non va :(

Ciao
: Re: [Guida] Usare font personale esterno per template
: raben 20 Jun 2007, 11:03:41
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
: Re: [Guida] Usare font personale esterno per template
: raben 20 Jun 2007, 11:17:23
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


:
@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;
}
: Re: [Guida] Usare font personale esterno per template - mistero risolto
: raben 20 Jun 2007, 11:22:24
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
: Re: [Guida] Usare font personale esterno per template
: danielone80 20 Jun 2007, 12:11:39
grazie raben, provo e ti faccio sapere ;)

Daniel
: Re: [Guida] Usare font personale esterno per template
: danielone80 20 Jun 2007, 13:20:44
Perfetto funziona!!! anche su mozilla ;)

Ciao
Daniel
: Re: [Guida] Usare font personale esterno per template
: raben 21 Jun 2007, 15:38:15
Perfetto funziona!!! anche su mozilla ;)

Ottimo buona a sapersi.. che mozilla hai così controllo?
: Re: [Guida] Usare font personale esterno per template
: migliosj 03 Jul 2007, 16:57:50
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
: Re: [Guida] Usare font personale esterno per template
: raben 04 Jul 2007, 15:12:37
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! :)
: Re: [Guida] Usare font personale esterno per template
: upupax 04 Jul 2007, 20:46:41
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..


:
@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;
}
: Re: [Guida] Usare font personale esterno per template
: 64T5U 09 Jul 2007, 18:15:12

:

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.
: Re: [Guida] Usare font personale esterno per template
: matrix845 15 Jul 2007, 12:33:19
Ciao ragazzi , alla fine non sono riuscito a capire come e dove va inserito nel css del mio templates la sintassi.
 :-[
: Re: [Guida] Usare font personale esterno per template
: roccomichele 19 Jul 2007, 21:44:23
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
: Re: [Guida] Usare font personale esterno per template
: upupax 20 Jul 2007, 09:55:26
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.
: Re: [Guida] Usare font personale esterno per template
: Orchid 10 Oct 2007, 11:49:14
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...
: Re: [Guida] Usare font personale esterno per template
: thepisu 12 Oct 2007, 14:56:27
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.
: Re: [Guida] Usare font personale esterno per template
: Orchid 15 Oct 2007, 08:19:12
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à.
: Re: [Guida] Usare font personale esterno per template
: thepisu 15 Oct 2007, 09:32:48
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.
: Re: [Guida] Usare font personale esterno per template
: raben 17 Oct 2007, 11:57:57
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!
: Re: [Guida] Usare font personale esterno per template
: thepisu 17 Oct 2007, 14:00:44
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à.
: Re: [Guida] Usare font personale esterno per template
: raben 17 Oct 2007, 14:54:35
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 :D  o come direbbe Krug tra contadini e mandriani! ^__^
: Re: [Guida] Usare font personale esterno per template
: k0nan 18 Oct 2007, 00:10:49
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
: Re: [Guida] Usare font personale esterno per template
: Maxiride 08 Jan 2008, 17:39:28
Segnalo dafont.com
Là ci sono molti font free!