Autore Topic: Modificare i font di un template Joomla generico, usando font gratuiti alternat  (Letto 2768 volte)

Offline mikyjoo

  • Esploratore
  • **
  • Post: 64
    • Mostra profilo
A volte può essere necessario cambiare i fonts del sito Joomla 3+. Vediamo come effettuare questa modifica su un template generico di Joomla usando i CSS3 e approfittando dei fonts messi a disposizione gratuitamente da alcuni siti. Come esempio agiremo sul template Protostar, che si trova in tutte le installazioni Joomla.

Link all'articolo: http://www.joomla.it/e-ancora/articoli-community-3x/8455-modificare-i-font-di-un-template-joomla-generico-usando-font-gratuiti-alternativi.html
« Ultima modifica: 27 Set 2016, 09:47:43 da alexred »

Offline banana

  • Esploratore
  • **
  • Post: 63
    • Mostra profilo
Ciao,
grazie per questo utile articolo.
Io però non riesco a capire una cosa, ho provato a cambiare il font del body, mettendo nel file miostile.css la seguente riga:

body{
      font-family: 'mio_font' !important;
}

E' corretto il tag body? Mi pare che ci sia il bootstrap.css che lo sovrascrive, come posso inserirlo lì? Non basta che lo inserisco nella riga "font-family".

Grazie per l'aiuto!

Offline mikyjoo

  • Esploratore
  • **
  • Post: 64
    • Mostra profilo
Ciao,
c'è un errore nel mio articolo, nel senso che gli apici, con font-family sono sbagliati. In altre parole, dove ho scritto:

Codice: [Seleziona]
h1{
    font-family: 'cac_champagneregular' !important;
}

avrei dovuto scrivere:

Codice: [Seleziona]
h1{
    font-family: cac_champagneregular !important;
}


Prova così e fammi sapere! E scusa per il mio errore!

Offline banana

  • Esploratore
  • **
  • Post: 63
    • Mostra profilo
Mmmm.. no, non credo sia quello.. ti faccio vedere il codice:

h2{
    font-family: amatic !important;
}

body{
      font-family: opensans_regular !important;
}

Offline mikyjoo

  • Esploratore
  • **
  • Post: 64
    • Mostra profilo
Ciao!
Come prima cosa assicurati che il tuo file personalizzato CSS sia letto per ultimo, ad esempio che sia richiamato, in index.php, DOPO quello standard.
Secondariamente controlla che il nome del file sia esatto, che si trovi nella cartella giusta, che il nome del font sia anch'esso esatto e che si trovi anch'esso nella cartella giusta. Anche le altre cartelle per le altre versioni del font, specificate nella direttiva @font-face, devono essere esatte.
Io posso solo dirti che ho usato questo stesso sistema per un sito che ho fatto e funziona (e avevo anche messo gli apici... :) )
Cortesemente, se puoi mostrarmi la parte del file file index.php che contiene la tua modifica e anche come hai scritto il comando @font-face.


Offline banana

  • Esploratore
  • **
  • Post: 63
    • Mostra profilo
Mi sembra di aver fatto come hai scritto nella guida e di aver posizionato nelle cartelle giuste.
Questo è il contenuto del file miostile.css:

@font-face {
    font-family: 'opensans_regular';
    src: url('fonts/open-sans-fontfacekit/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot');
    src: url('fonts/open-sans-fontfacekit/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/open-sans-fontfacekit/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/open-sans-fontfacekit/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/open-sans-fontfacekit/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'amatic';
    src: url('fonts/amatic/AmaticSC-Regular.eot');
    src: url('fonts/amatic/AmaticSC-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/amatic/AmaticSC-Regular.woff') format('woff'),
         url('fonts/amatic/AmaticSC-Regular.ttf') format('truetype'),
         url('fonts/amatic/AmaticSC-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2{
    font-family: 'amatic' !important;
}

body{
      font-family: 'opensans_regular'e ho aggiunto  !important;
}


e questo nel file css.php del template:

// CSS by IceTheme for this Tempalte
$doc->addStyleSheet($this->baseurl. '/templates/' .$this->template. '/css/joomla.css');
$doc->addStyleSheet($this->baseurl. '/templates/' .$this->template. '/css/template.css');
$doc->addStyleSheet($this->baseurl. '/templates/' .$this->template. '/css/miostile.css');

Nel file index.php trovo solo questo:

        <?php
            // Include CSS and JS variables
            include_once(JPATH_ROOT . "/templates/" . $this->template . '/icetools/css.php');
        ?>

che richiama css.php

Offline mikyjoo

  • Esploratore
  • **
  • Post: 64
    • Mostra profilo
Ciao!

La versione vettoriale SVG dei tuoi fonts dovrebbe essere scritta come segue:

Codice: [Seleziona]
url('nome-nostra-cartella-online/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
e non:

Codice: [Seleziona]
url('fonts/open-sans-fontfacekit/web fonts/opensans_regular_macroman/OpenSans-Regular-webfont.svg') format('svg');
in un caso, e:

Codice: [Seleziona]
url('fonts/amatic/AmaticSC-Regular.svg') format('svg');
nell'altro.

Ti funziona un unico font oppure non funziona nessuno dei due?
Nel frattempo ho trovato i seguenti due articoli di approfondimento:

http://www.html.it/pag/19459/web-fonts-con-font-face/

https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

« Ultima modifica: 12 Ott 2016, 20:00:20 da mikyjoo »

Offline banana

  • Esploratore
  • **
  • Post: 63
    • Mostra profilo
E' assurdo! Allora.. ho aggiunto nel file template.css questo:

h1, h2, h3, h4, h5, h6 {
    font-family: "amatic", "Lato-Light", "As Cute As...", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;}   

la voce "amatic" che avevo definito nel file miostile.css

La cosa assura è che ora per tutti i titoli h3, h4, ecc funziona, mentre per h2 invece no! Com'è possibile se è nella stessa definizione?
Come se qualcosa lo sovrascrivesse.. ma solo per h2!

Il file svg non lo uso, sto usando solo ttf, woff e otf

Offline mikyjoo

  • Esploratore
  • **
  • Post: 64
    • Mostra profilo
L'unica possibilità è che l'h2 venga sovrascritto da qualche regola successiva. In ogni caso prova ad aggiungere !important a questo font family che hai appena riportato.
Hai lo stesso risultato su tutti i borwsers?
Risultando corrette le regole CSS, probabilmente il problema riguarda i .php.

Offline banana

  • Esploratore
  • **
  • Post: 63
    • Mostra profilo
Ho in parte risolto.. questo codice nel file miostile.css non gli piace:

h2{
    font-family: 'amatic' !important;
}

L'ho tolto e funziona! Problema.. funziona solo in Firefox, Explorer e Chrome non va.. però ho messo sia woff che ttf nella cartella Fonts

E non funziona per tutti i tag.. quindi h2, h3, h4, ecc :(

Scusa, sto anche usando "eot" ma niente:

@font-face {
    font-family: 'amatic';
    src: url('fonts/AmaticSC-Regular.eot');
« Ultima modifica: 13 Ott 2016, 12:11:03 da banana »

Offline banana

  • Esploratore
  • **
  • Post: 63
    • Mostra profilo
Allora, questo l'ho risolto, per ie e chrome bastava cancellare la cache.

Ora però dovrei modificare anche il menù, che è un modulo, quindi si trova sotto la cartella html --> css
Ho inserito come segue, ma non va.. forse devo definire anche in questa cartella un miostile.css?

.icemegamenu > ul > li  a.iceMenuTitle {
            display: block;
            font-family: "amatic", "LibreBaskerville-Regular" "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

Offline mikyjoo

  • Esploratore
  • **
  • Post: 64
    • Mostra profilo
Sì prova a usare un foglio di stile personalizzato.

 

Host

Torna su