[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à.