Modificare i font di un template Joomla generico, usando font gratuiti alternat

[mikyjoo]

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

[banana]

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!

[mikyjoo]

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!

[banana]

Mmmm.. no, non credo sia quello.. ti faccio vedere il codice:

h2{
    font-family: amatic !important;
}

body{
      font-family: opensans_regular !important;
}

[mikyjoo]

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.

[banana]

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

[mikyjoo]

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/

[banana]

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

[mikyjoo]

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.

[banana]

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');

[banana]

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;

[mikyjoo]

Sì prova a usare un foglio di stile personalizzato.