Autore Topic: [Guida] Usare font personale esterno per template  (Letto 35188 volte)

Offline Alucard82

  • Esploratore
  • **
  • Post: 64
    • Mostra profilo
[Guida] Usare font personale esterno per template
« il: 05 Mag 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!

Offline Orchid

  • Nuovo arrivato
  • *
  • Post: 45
  • Sesso: Maschio
    • Mostra profilo
    • Archivio personale
Re: [Guida] Usare font personale esterno per template
« Risposta #1 il: 07 Mag 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...!

Offline danielone80

  • Nuovo arrivato
  • *
  • Post: 45
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #2 il: 09 Giu 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

Offline danielone80

  • Nuovo arrivato
  • *
  • Post: 45
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #3 il: 09 Giu 2007, 13:07:12 »
src: url("../modules/mod_lxmenu/fonts/COPRGTB.ttf");


ho corretto questa parte ma non va :(

Ciao

Offline raben

  • Nuovo arrivato
  • *
  • Post: 37
  • Sesso: Maschio
    • Mostra profilo
    • Eraben the web you dream
Re: [Guida] Usare font personale esterno per template
« Risposta #4 il: 20 Giu 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
Eraben - The Web You Dream
http://www.eraben.com
Progettazione siti  Web - Posizionamento Motori di Ricerca

Offline raben

  • Nuovo arrivato
  • *
  • Post: 37
  • Sesso: Maschio
    • Mostra profilo
    • Eraben the web you dream
Re: [Guida] Usare font personale esterno per template
« Risposta #5 il: 20 Giu 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


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;
}
Eraben - The Web You Dream
http://www.eraben.com
Progettazione siti  Web - Posizionamento Motori di Ricerca

Offline raben

  • Nuovo arrivato
  • *
  • Post: 37
  • Sesso: Maschio
    • Mostra profilo
    • Eraben the web you dream
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
Eraben - The Web You Dream
http://www.eraben.com
Progettazione siti  Web - Posizionamento Motori di Ricerca

Offline danielone80

  • Nuovo arrivato
  • *
  • Post: 45
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #7 il: 20 Giu 2007, 12:11:39 »
grazie raben, provo e ti faccio sapere ;)

Daniel

Offline danielone80

  • Nuovo arrivato
  • *
  • Post: 45
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #8 il: 20 Giu 2007, 13:20:44 »
Perfetto funziona!!! anche su mozilla ;)

Ciao
Daniel

Offline raben

  • Nuovo arrivato
  • *
  • Post: 37
  • Sesso: Maschio
    • Mostra profilo
    • Eraben the web you dream
Re: [Guida] Usare font personale esterno per template
« Risposta #9 il: 21 Giu 2007, 15:38:15 »
Perfetto funziona!!! anche su mozilla ;)

Ottimo buona a sapersi.. che mozilla hai così controllo?
Eraben - The Web You Dream
http://www.eraben.com
Progettazione siti  Web - Posizionamento Motori di Ricerca

Offline migliosj

  • Nuovo arrivato
  • *
  • Post: 45
  • Sesso: Maschio
    • Mostra profilo
    • Creazione Siti
Re: [Guida] Usare font personale esterno per template
« Risposta #10 il: 03 Lug 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

Offline raben

  • Nuovo arrivato
  • *
  • Post: 37
  • Sesso: Maschio
    • Mostra profilo
    • Eraben the web you dream
Re: [Guida] Usare font personale esterno per template
« Risposta #11 il: 04 Lug 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! :)
Eraben - The Web You Dream
http://www.eraben.com
Progettazione siti  Web - Posizionamento Motori di Ricerca

Offline upupax

  • Nuovo arrivato
  • *
  • Post: 20
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #12 il: 04 Lug 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..


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;
}

Offline 64T5U

  • Nuovo arrivato
  • *
  • Post: 6
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #13 il: 09 Lug 2007, 18:15:12 »

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.

Offline matrix845

  • Appassionato
  • ***
  • Post: 483
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #14 il: 15 Lug 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.
 :-[

Offline roccomichele

  • Esploratore
  • **
  • Post: 86
  • Sesso: Maschio
    • Mostra profilo
    • Creazioni WEB Michele Rocco
Re: [Guida] Usare font personale esterno per template
« Risposta #15 il: 19 Lug 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

Offline upupax

  • Nuovo arrivato
  • *
  • Post: 20
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #16 il: 20 Lug 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.

Offline Orchid

  • Nuovo arrivato
  • *
  • Post: 45
  • Sesso: Maschio
    • Mostra profilo
    • Archivio personale
Re: [Guida] Usare font personale esterno per template
« Risposta #17 il: 10 Ott 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...
« Ultima modifica: 10 Ott 2007, 12:00:02 da Orchid »

Offline thepisu

  • Appassionato
  • ***
  • Post: 369
  • Sesso: Maschio
  • .. still looking for ..
    • Mostra profilo
    • Blog di Stefano Bagnatica
Re: [Guida] Usare font personale esterno per template
« Risposta #18 il: 12 Ott 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.

Offline Orchid

  • Nuovo arrivato
  • *
  • Post: 45
  • Sesso: Maschio
    • Mostra profilo
    • Archivio personale
Re: [Guida] Usare font personale esterno per template
« Risposta #19 il: 15 Ott 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à.

 

Torna su