[RISOLTO] Font personalizzati

[andrea99sims]

Come da regolamento, apro un nuovo topic per un nuovo argomento:


voglio inserire un font che non è presente tra quelli offerti dal template.


Ho letto che è necessario creare una cartella "fonts" all'interno della cartella del template, inserirvi i file caratteri in diversi formati (.ttf, .eog, .svg), quindi incollare all'interno del file css del template un determinato codice, ho provato ma non funziona.


Qualcuno sa aiutarmi su come fare? Grazie in anticipo.

[lucantropo]

Ciao, ti consiglio di dare un'occhiata a Google font, potresti trovare il font che ti interessa già bello e pronto.

Altrimenti devi usare la tecnica del "font face".
http://www.html.it/pag/18954/font-personalizzati-con-font-face/

[andrea99sims]

Su che file devo incollare il codice? Sul CSS del template o sull'index.php del template?
Ho questo dubbio perché il CSS è vuoto, mentre l'index.php ha l'head, body ecc..

[lucantropo]

Se parli del font face devi metterlo nel css.
se parli di Google font hai due codici uno da inserire in index.php del template e l'altro nel css.

[giusebos]

http://www.joomla.it/articoli-community-16-e-17-tab/7263-come-incorporare-un-font-specifico-su-un-sito-joomla.html

http://forum.joomla.it/index.php?topic=152887.0

[andrea99sims]

Sì avevo letto quella guida, il problema è che ci sono tanti documenti css in una cartella denominata appunto css, ma non so su quale lo devo incollare. Ha un nome specifico?

[giusebos]

no, chi fa i template li chiama un pò come gli passa per la testa.
Se c'è un file custom.css, questo serve a metterci le sovrascritture delle classi o le aggiunte.

[andrea99sims]

No, non c'è un custom.css.


Il template è cloudbase3 (non è commerciale), vi è una cartella css in cui vi sono due file css chiamati "master-ie8" e "master-ie9".
Poi c'è una cartella "css-compiled" in cui ci sono svariati documenti css. Poi c'è una cartella custom in cui c'è un file ini. Ho provato a creare un file custom.css e inserire il @fontface, ma se aprivo il template nel back-end mi dava errore: "Impossibile caricare file xml". Così ho tolto il file e cancellato le cache; andava nuovamente.

[giusebos]

guarda ho cercato on line semplicemente inserendo questa chiave:

joomla cloudbase3 css custom

PRIMO LINK 

era in inglese, quindi ho copiato il testo dentro google analitics e questo è più o meno la traduzione

Per aggiungere un foglio di stile personalizzato per il modello base cloudbase3, accedere al sito tramite FTP. Una volta effettuato l'accesso al sito tramite FTP, creare un nuovo file CSS a:

Codice: [Seleziona]

/templates/cloudbase3/css/cloudbase3-custom.css
Il nuovo file CSS personalizzato sarà automaticamente caricato dal Framework Gantry. Ulteriori informazioni sull'aggiunta di un foglio di stile personalizzato utilizzando il Framework Gantry.

---------------------------------------------------------------

ora non mi metterò a cercare altro, ma come vedi non è difficile trovare informazionicon con un minimo di impegno

[lucantropo]

Quel template è abbastanza complicato, non la vedo così facile inserire un font personalizzato. Poresti provare col bootstrap.css  che trovi in css-compiled ma dubito che sia così semplice.

Come ti è stato detto da giusebos poi c'è il framework gantry da valutare, insomma devi smanettare un po' 

[giusebos]

con le istruzioni passate adesso può andare avanti inserendo la stringa @import dentro il file cloudbase3-custom.css, agginugento il font-family nei rispettivi DIV.

[andrea99sims]

Sì infatti subito dopo aver postato la risposta ho trovato quella pagina. Ho seguito quella guida:


1) Ho creato la cartella fonts in templates/cloudbase3 e ho messo il carattere desiderato nei quattro formati (.ttf,.eot,.svg,.woff)


2) Ho creato il file cloudbase3-custom.css nella cartella css e ho inserito questo codice:

Codice: [Seleziona]

@font-face {
   font-family: "TheSimsSansBoldSC";
   src: url("../fonts/The_Sims_Sans-Bold-SC-webfont.eot");
   src: url("../fonts/The_Sims_Sans-Bold-SC-webfont?#iefix") format("embedded-opentype"),
      url("../fonts/The_Sims_Sans-Bold-SC-webfont.woff") format("woff"),
      url("../fonts/The_Sims_Sans-Bold-SC-webfont.ttf")
format("truetype"),
        url("..fonts/The_Sims_Sans-Bold-SC-webfont.svg#TheSimsSansBoldSC")
format("svg");
}


.font-family-TheSimsSansBoldSC {
  font-family: "TheSimsSansBoldSC",Helvetica,Arial,sans-serif;
  font-weight: normal;
  font-style: normal;
}

Dopodiché sono andato nel file template-details.xml e ho inserito tra le opzioni il nome del carattere. Nel back-end compare tra le opzioni, però selezionandolo non cambia nulla.

[lucantropo]

Molto probabilmente perché il carattere precedentemente usato è scritto in diversi punti del file css originale.
ad esempio sul body,h1,h2, etc.
Nel film custodia dovresti scrivere:

Codice: [Seleziona]

body {
    font-family: "nomedeltuofont"!important
}
Per ogni elemento, ogni volta con la scritta !important in modo che venga considerato come "comando" primario.

[andrea99sims]

Ho presupposto bootstrap.css il file css originale, ho messo in ogni punto il nome del mio font, quindi ho messo "font"!important ma nulla

[lucantropo]

Colpa mia, i due " non vanno scritti
 Ricapitoliamo:
Nel file custom avrai la regola font-face con tutti i formati, io ne ho Scritt solo uno per praticità

Codice: [Seleziona]

@font-face {    font-family:font;    src: url(font.woff);}
Sempre nel file custom puoi dichiarare tutte le regole

Codice: [Seleziona]

body{    font-family: font!important;}

In questo modo visto che il file custom comanda su tutti dovrebbe funzionare.

[andrea99sims]

Ok, qualcosa è cambiato, solo che non è il font che voglio

[giusebos]

Dopodiché sono andato nel file template-details.xml e ho inserito tra le opzioni il nome del carattere. Nel back-end compare tra le opzioni, però selezionandolo non cambia nulla.

dove lo avevi scritto che vuoi gestire questo font dal pannello del template?

Stai facendo un sacco di lavoro per niente secondo me, i template customizzabili esistono perchè distribuiti daranno più possibilità di personalizzaione a molti utenti, ma tu utente finale del template, che te ne fai dell'inserimento nella gestione......cambierai famiglia di font ogni giorno e quindi hai bisogno di farlo in maniera rapida? Non credo.

[andrea99sims]

Avevo scritto che volevo aggiungere un font oltre a quelli offerti dal template. Per fortuna nel pannello del template ho trovato open sans che può sostituire quello che volevo io.


Anche solo per aggiungerlo tra quelli disponibili su JCE dovrei fare lo stesso procedimento vero?


Grazie per il vostro aiuto comunque.

[giusebos]

su jce altra storia, ma se usi stili in linea che senso ha tutto questo lavoro?

[andrea99sims]

Gli stili in linea sarebbero? Scusa ne so molto poco di linguaggi di marcatura.


Comunque mi trovavo in questa situazione: volevo cambiare il template del mio sito, trovo cloudbase3 che mi piace molto ed è abbastanza personalizzabile. Quando vado a scegliere il font, tra quelli disponibili trovo gli standard fonts e qualche google fonts. Così ho cercato su google come aggiungere font personalizzati su joomla (successivamente su cloudbase3 nello specifico), ma ho fatto molta confusione (questo topic ne è la prova). Tornando nel pannello, ho trovato tra i google fonts disponibili, open sans. Ho scelto quello e mi sono accontentato.


Però magari per i moduli HTML personalizzato il font che volevo potrebbe tornarmi utile, per questo ho chiesto se anche su JCE bisogna fare il solito procedimento per aggiungere fonts.

[giusebos]

gli stili in linea sono deprecati e appesantiscono il sito oltre che ad una lunga serie di cose negative.

L'editor jce dovresti usarlo senza tutte le icone tipiche di un editor word
quindi niente scelta font.

poi uno fa quello che credi, magari ti stai anche divertendo.

[andrea99sims]

So bene che JCE non deve essere come Word, volevo solo aggiungere uno e solo un font, non 346. E ovviamente è possibile, solo che non sapendo come fare, ho chiesto aiuto a voi.


Se mi sto divertendo o meno naturalmente non è dato saperlo.


Comunque grazie mille per l'aiuto, metto il tag RISOLTO.