Autore Topic: [Guida] Usare font personale esterno per template  (Letto 34817 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à.

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 #20 il: 15 Ott 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.

Offline raben

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

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 #22 il: 17 Ott 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à.

Offline raben

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

Offline k0nan

  • Appassionato
  • ***
  • Post: 307
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #24 il: 18 Ott 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
VM Italia - Supporto italiano a virtuemart - http://www.vmitalia.net

VirtueMart Dev Team Member - User Interface - http://www.virtuemart.net

Offline Maxiride

  • Nuovo arrivato
  • *
  • Post: 49
    • Mostra profilo
Re: [Guida] Usare font personale esterno per template
« Risposta #25 il: 08 Gen 2008, 17:39:28 »
Segnalo dafont.com
Là ci sono molti font free!

 

Torna su