Aggiungere i font di @font-face tra quelli selezionabili nei topic

Started by dpm_dj, September 14, 2012, 11:33:30 AM

Previous topic - Next topic

dpm_dj

Buondì!

come da titolo, la domanda è semplice: i font presenti sul sito @font-face (http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/ [nofollow]) possono essere usati per i post nei vari topic del mio forum (SMF 2.0 RC3)?
Se sì, come faccio ad impostarli?
Avrei bisogno di una spiegazione a prova di ignorante in materia quale sono :). Grazie in anticipo!

emanuele

Ciao!

Devi fare quattro cose:
1) copiare i font sul tuo server
2) aggiungere gli stili a index.css
3) aggiungere i font al menù di selezione
4) cambiare il bbcode del tag font.

I primi due immagino avrai già avere più o meno un'idea di come fare, quindi descriverò velocemente gli altri due, se hai bisogno dettagli chiedi pure.

Per il pulsante devi modificare GenericControls.template.php, cercare:
Code (find) Select
\'courier\': \'Courier\',
\'arial\': \'Arial\',
\'arial black\': \'Arial Black\',
\'impact\': \'Impact\',
\'verdana\': \'Verdana\',
\'times new roman\': \'Times New Roman\',
\'georgia\': \'Georgia\',
\'andale mono\': \'Andale Mono\',
\'trebuchet ms\': \'Trebuchet MS\',
\'comic sans ms\': \'Comic Sans MS\'

e sostituire le accoppiate con quelle nuove. In questo caso, però, ricordati che a sinistra vanno i nomi delle classi che hai definito in index.css e non i nomi dei font.

Per il punto 4, invece, apri Subs.php ed individua questo blocco:
array(
'tag' => 'font',
'type' => 'unparsed_equals',
'test' => '[A-Za-z0-9_,\-\s]+?\]',
'before' => '<span style="font-family: $1;" class="bbc_font">',
'after' => '</span>',
),

cambiarlo in questo dovrebbe essere sufficiente:
array(
'tag' => 'font',
'type' => 'unparsed_equals',
'test' => '[A-Za-z0-9_,\-\s]+?\]',
'before' => '<span class="$1 bbc_font">',
'after' => '</span>',
),


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

dpm_dj

Ciao emanuele,
1) per i font basta cpoiarli sul server ma in un determinato folder?
2) per aggiungere gli stili all'index.css non mi ricordo come fare. Il forum l'ho fatto ma ormai 3 anni fa e sono uno di quegli autodidatti scarsi che si dimenticano dopo un po' come hanno fatto a modificare le varie parti del forum. :o :-[
3) e 4) li farò appena so le parti prima in cosa consistono.
Grazie!

emanuele

Quote from: dpm_dj on September 15, 2012, 09:10:59 AM
1) per i font basta cpoiarli sul server ma in un determinato folder?
Per consistenza li copierei in...boh...non è il posto migliore, ma io creerei una directory "fonts" in Themes/default/css e ce li piazzerei lì.

Quote from: dpm_dj on September 15, 2012, 09:10:59 AM
2) per aggiungere gli stili all'index.css non mi ricordo come fare.
Themes/default/css apri index.css
Verso la fine aggiungi il codice per il @font-face:
@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}

non ricordo più se "path-to-the-font-file" dovrebbe essere sufficiente il percorso relativo al file css, quindi se segui l'esempio che ti ho suggerito sopra:
@font-face {
font-family: GraublauWeb;
src: url("font/GraublauWeb.otf") format("opentype");
}

dovrebbe funzionare.

Ritratto un secondo quanto ho detto precedentemente:
Quote from: emanuele on September 15, 2012, 04:04:04 AM
Per il pulsante devi modificare GenericControls.template.php, cercare:
Code (find) Select
\'courier\': \'Courier\',
\'arial\': \'Arial\',
\'arial black\': \'Arial Black\',
\'impact\': \'Impact\',
\'verdana\': \'Verdana\',
\'times new roman\': \'Times New Roman\',
\'georgia\': \'Georgia\',
\'andale mono\': \'Andale Mono\',
\'trebuchet ms\': \'Trebuchet MS\',
\'comic sans ms\': \'Comic Sans MS\'

e sostituire le accoppiate con quelle nuove. In questo caso, però, ricordati che a sinistra vanno i nomi delle classi che hai definito in index.css e non i nomi dei font.
Non devi usare le classi, ma credo il font-family definito in @font-face.
Quindi per l'esempio sopra avrai:

\'GraublauWeb\': \'Graublau Web\',


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

dpm_dj

OK ci provo ora.
Il file index.css lo devo prendere nella cartella del tema di default o in quello che usa il forum? E verso la fine intendi in un punto preciso o che posso inserirlo dove voglio verso la fine?

emanuele

Lo dovrai fare per tutti i temi che gli utenti possono selezionare.

Alla fine di tutto.


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

dpm_dj

Ho fatto le modifiche che mi hai scritto ma non funziona. Riesco a modificare il font nel menu a tendina ma se lo seleziono il testo appare come Tahoma e non con quello selezionato. In più non posso aggiungerne altri ma soltanto sostituire i font già presenti nel menu.

emanuele

Svuotato la cache del browser?

Perché non puoi aggiungerne altri?
Hai messo la virgola dopo:
\'comic sans ms\': \'Comic Sans MS\'
se noti tutte le righe hanno una virgola alla fine tranne l'ultima, quindi se aggiungi qualcosa devi mettere la virgola alla corrente ultima virgola, ma non alla nuova ultima.


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

dpm_dj

Ok, il discorso della virgola l'ho risolto. Ora riesco ad avere la lista lunga di font.
Però, svuotando anche la cache non sono riiuscito a modificare i font visualizzati. Rimane sempre in Thaoma a prescindere dal font che scelgo.

emanuele

Butta a mare il punto 4 del mio primo post, ripristina il codice che c'era prima...sorry.


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

dpm_dj

Credo di aver capito cosa c'è che non va. Ho annullato il punto 4 come detto e per alcuni font ora riesco a farli andare.
Vanno soltanto quei font in cui, invece di inserire il collegamento alla cartella con i file .otf che ho scaricato, hanno un url esterno.
Ad esempio, per il font M+, ho usato quanto scritto a questo indirizzo (http://mplus-fonts.sourceforge.jp/webfonts/index-en.html#fonts_set [nofollow]) nel primo riquadro grigio.
A sto punto credo che la colpa sia del reindirizzamento sbagliato al file nella cartella "Font" fatto nell'index.css.
Soluzioni?

emanuele

Bisogna vedere il sito ed il css.
Tieni presente che Font e font sono due cose diverse, quindi se hai creato una directory font e poi hai usato nel css Font non funzionerà. ;)


Take a peek at what I'm doing! ;D




Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.

dpm_dj

Quote from: emanuele on September 15, 2012, 09:24:27 AM
Themes/default/css apri index.css
Verso la fine aggiungi il codice per il @font-face:
@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}


Ecco l'errore: alla voce url va inserito così
src: url('path-to-the-font-file/GraublauWeb.otf') format("opentype");
Insomma, ci vanno apostrofi e non le virgolette.

In più, per fare riferimento ad una cartella ben precisa ho preferito inserire l'url intero del mio sito per non avere ambiguità o problemi.
src: url("h**p://www.urldeltuosito.it/Font/GraublauWeb.otf") format("opentype");

Non so se è la soluzione migliore, però funziona!

Grazie mille Emanuele per il tuo aiuto!  :)

Advertisement: