Come inserire font personali nel progetto per renderli usabili da tutti i browser?
Author: Massimiliano B.
Visited 6223,
Followers 4,
Shared 0
Come posso fare ad inserire nel progetto dei font personali e renderli utilizzabili da tutti i browser?
Qual'è la procedura corretta?
In alcune faq è spiegato male e comunque ogni soluzione proposta non è funzionante.
Per cortesia potete pubblicare la vostra procedura ufficiale?
Grazie,
Max
Posted on the
Al passo 1 esperto in Head:
<style type="text/css">
@font-face{
font-family: 'Gloucester MT Extra Condensed';
src: url('files/GLECB.TTF');
}
</style>
poi in tabella testo:
metti il testo con carattere Gloucester.......
alla fine inserisci un oggetto html e in esperto allega il tuo font....GLECB.TTF
Chiaramente metti il tuo font al posto del mio...
Author
Provato ma non funziona!
Il sito test è questo:
http://www.altiericouture.com
Adesso ci lavoro e ti faccio sapere.
Mi piacerebbe che websitex5/v10 fosse in grado di gestire i font in modo più funzionale e veloce.
nb: sto usando wsx5 v.10
Author
Nonostante le molte prove, il problema rimane irrisolto, senza ricostruire file html e css (ma allora a che serve un framework cone wsx5?).
Chissà se qualcuno di wsx5 farà delle modifiche per rendere semplice la gestione dei font nei progetti nei prossimi aggiornamenti?
Eppure basterebbe creare un servizio integrato dove insrire i font che si vuole utilizzare, (magari facendo drag-and-drop), e utomaticamente si crea il codice utile per renderlo visibile su tutti i browser, senza scrivere codice da aggiungere nella HEAD.
Secondo me è li che qualcosa non funziona all'interno della generazione dei file.
ps: il sito testio di cui sopra adesso è cambiato, quindi non vale più come test.
...
Ho notato anche che ancora non si possono rendere Responsive i siti automaticamente ma viene suggerito (?!) di fare un sito per ogni sistema, uno per pc, uno per tablet e uno per smartphone.
Non sembra assurdo?
Questa prova è con la 10, e funzia....
http://mibo.altervista.org/calcio/
il tuo non puo funzionare, hai dato come Url:
src:url(ftp://........
A me sembra più assurdo quello che hai scritto come percorso dei font.
Ci sono anche altri errori ma quello è il più "grave".
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Una manciata di secondi Mirko, solo una manciata di secondi...
meglio tardi che mai.....ehehehehe
... ciao Mirko, ...sul mio obsoleto IE.7 e sui recenti CH ed FF, non vedo font particolari se non proprio quelli del menu...!...
ciao Massimiliano, ... per come stanno le cose ora, ed ancora per un po', ...ti consiglio di dicumentarti nei seguenti LINK fondamentali, contenenti risorse esclusive di "Simona" (Staff), di "granita", di "stesil (Silvana, qui)", elencati in sequenza:
http://answers.websitex5.com/post/26507
http://www.zspace.it/kolasim/utility/granitaFonts.html (link ponte)
http://www.unofficialwsx5.com/index.php?topic=436.0
... le origini qui: http://forums.incomedia.info/websitex5/viewtopic.php?t=19547
... i link che ho segnalato sono il"non plus ultra" per il nostro programma, ...(a parte di quello che c'è in rete...)
... documentarsi anche qui: http://www.google.com/webfonts
... è semplice, ma non da subito, e per questo occorre metterci un po' del proprio impegno...
.
... e ciao anche a /p>
bye, KolAsim
Provato con IE Tester e io li vedo i font anche con il 7..."Gloucester MT Extra Condensed" e anche con FF e Chrome....
... questo è il risultato sul mio PC...
io vedo questo però
<style type="text/css">
@font-face{ font-family: 'HelveticaNeueLT Com 23 UltLtEx';
src: url('files/HelveticaNeueLTCom-UltLtEx_0.ttf'); }
</style>
Hai ragione....avevo copiato dal file di testo che avevo salvato io, e c'era l'altro font, nel mio poi lo ho cambiato...
Author
Grazie Mirko,
ho seguito i tuoi utli consigi e adesso va quasi tutto bene; riscontro ancora problemi con FF, ma con IE dovrei aver risolto; adesso devo sistemare la visualizzaizone con i browser di ubuntu, e se hai consigli in tal senso te ne sarei molto grato;
...
KolAsim:
i link mi sono stato molto utili;
...
Lemonsong:
grazie, ma gli altri errori quali sono?
Ciao Ragazzi,
ho provato in tutti i modi a seguire i vostri consigli ed istruzioni, ma senza successo!!!!
Ho guardato e riguardato i vostri post e quelli suggeriti in queste pagine, ma non sono riuscito a risolvere il problema. Allora ho provato a creare un piccolo procettino con una scritta in home che vi allego.
Potete dare un'occhiata ed eventualmente indicarmi dove sbaglio???
Grazie a tutti e saluti
Stefano V.
Ci stò provando, ma dovresti mettere qui anche i font per provare...
A me funzia, e lo vedo anche con smartphone e ipad...
http://mibo.altervista.org/font/
NOOOOO!!! Non è possibile!!!!! Qua c'è qualcosa che non mi quadra.
Allora: Tu Mirko mi hai detto che funziona E SE LO DICI TU CI CREDO!!!!!.
Mi hai mandato il font.zip e caricandolo su website funziona!!!, nel senso che vado in anteprima del progetto e vedo il font regolarmente funzionante.
Allora cosa ho fatto?? nuovo progetto, ho copiato nella sezione 1 esperto il codice html dal tuo progetto, mentre nella pagina home ho inserito il widget html inserendo nella sezione esperto il file ildowild-webfont.ttf ed ildowild.eot.
Ho salvato il progetto e mi sembra che non ci sia nient'altro da fare!!!.
Bene ..... NON VA!!!!!!! ... non è possibile .... Non ce la farò mai ...
Non è che il risultato lo vedo una volta caricato su ftp??? Non credo, altrimenti come faccio a vedere il tuo progetto funzionare, visto che mi sta girando in locale???
Ecco i la cartella con i font
qualcosa mi dice che non hai installato i font sul tuo pc..
Infatti non li ho installati. Ma da quanto ho letto nei post precedenti non è indispensabile. No???
Se guardi bene il font mio non si chiama ildowild-webfont.ttf ma semplicemente ildowild.ttf, quindi non ti trova il tuo...per la prova io mi ero scaricato quello...
nella cartella mia "file" trovi il font da allegare con il mio codice...
Hai ragione Mirko, solo che ho fatto le dovute prove anche in quel senso ma niente.
allego il progetto appena fatto "fotocopiando il tuo". Se riesci a darci un'occhiata e magari trovare anche il problema mi faresti una grandissima cortesia.
Grazie
guarda ora se funzia
Non lo avevi selezionato anche qui:
come faccio a selezionarlo che non è installato sul mio pc???
devo installarlo??
inoltre nell'esempio che mi avevi mandato in precedenza non era selezionato
devi installare i font che vuoi usare e poi li devi selezionare dal menu dei font prima di scrivere.
gli altri vedranno il font anche se non lo hanno installato ma tu che fai il sito lo devi avere in modo che x5 metta l'istruzione corretta in automatico, altrimenti dovresti metterla tu manualmente ma è inutile visto che abbiamo un software che lo fa da solo.
Si prima lo installi, poi dal menu a bandierina lo selezioni e poi una volta esportato,anche se lo togli di nuovo, lo vedrai sempre...
Una manciata di secondi....
aaaahhhhh!!! Ho capito!!!!
Posso installare il font.ttf, giusto??? poi dovrebbe essere a posto.
Ci provo e vi faccio sapere.
Oh raga, x adesso GRAZIE MILLE!!!
Oh raga, mi sto arrendendo.
Visto che con il font idolwild ero riuscito a farlo funzionare x metà (non andava con i.e. versione 8. Con Chrome e Firefox si), ho voluto provare a cambiare font, installando sul mio pc il carattere "pompiere" scaricato sempre da fontsquirrel.com (il pacchetto @font-face.
Mi sembra di aver fatto tutto bene, ma il risultato è un bel niente di fatto.
Portate pazienza, ma sono di coccio (forse è per questo che ci sto ancora dietro).
Vi allego il progetto di prova, i font e se potessi anche € 50. Potete dare un'occhiata???
Inoltre come si risolve il problema di visualizzazione con i.e.??
Grazie anticipatamente.
x rendervi conto potete guardare su www.stefanoventuri.altervista.org
questo è il font utilizzato
se vuoi che si veda su tutti i browser devi allegare tutti i formati dei font e non solo il ttf
e modificare il css che ti fornisce fontsquirrel correggendo i percorsi dei font che sono nella cartella files visto che li alleghi da programma.
Ho capito Silver,
il fatto è che ho fatto una semplice prova caricando solo il ttf x vedere se funzionava.
Oggi proverò a modificare il css con il percorso giusto.
Ti ringrazio anticipatamente.
Saluti.
Stefano Venturi
Io sinceramente ho messo solo i font senza css e funzia lo stesso...
http://mibo.altervista.org/pompiere/
Cazzarola Mirko come fai???
e questo si è messo da solo allora?
<style type="text/css">
@font-face { font-family: 'Pompiere'; src: url('files/Pompiere-Regular-webfont.ttf');
src: url('files/Pompiere-Regular-webfont.eot');
src: url('files/Pompiere-Regular-webfont.woff'); }
</style>
No..., pensavo intendessi il css che si trova nella sua cartella, di doverlo allegare...ho capito male io allora...
Buongiorno Raga,
oggi pomeriggio al ritorno dal lavoro ci provo. Ieri sera non ho potuto lavorarci.
Poi vi faccio sapere.
Ciao e grazie
Stefano Venturi
Niente da fare.
Ho inserito
nella sezione 1 HEAD
poi ho caricato i font dalla cartella locale sul pc
ho modificato il file css cambiando il percorso (lo allego).
Risultato deludente come prima.
cavolo mi ha caricato il messaggio a metà.
sezione 1:
<style type="text/css">
@font-face { font-family: 'Pompiere';
src: url('files/Pompiere-Regular-webfont.ttf');
src: url('files/Pompiere-Regular-webfont.eot');
src: url('files/Pompiere-Regular-webfont.woff'); }
</style>
Ho caricato i file font dalla cartella locale sul pc ed ho modificato il css che allego
Questo è l'ultimo funzionante....a me...
Ciao Mirko,
ho caricato il tuo progetto su www.stefanoventuri.altervista.org e l'ho verificato collegandomi da un pc dove non è installato il carattere pompiere.
Con Chrome funzionava, con I.E. no.
poi ho cambiato il testo, selezionando dal menù a tendina il carattere pompiere e l'ho ricaricato.
Mi sono spostato il secondo pc e in questo caso non funziona.
Se puoi prova a verificare.
Ciao.
Come ti avevamo scritto più in su...."Si prima lo installi, poi dal menu a bandierina lo selezioni e poi una volta esportato,anche se lo togli di nuovo, lo vedrai sempre..."
Quindi installa il font nel PC selezionalo nel menu font, esporta tutto, e da quel momento lo vedi su tutti i browser...anche se lo disinstalli dal PC...
...In anteprima funzia solo se lo hai installato...
questo lo vedi da tutti i browser???
http://mibo.altervista.org/pompiere/
su chrome ok, su i.e. 8 No
Vero, funzia solo su 9 e 10, ma non ti conviene a questo punto inserire un font standard cosi sei tranquillo....oppure inserirlo come immagine, se si tratta solo di un titolo...
vero, il fatto è che mi piacerebbe inserire il font tempus itc (pacchetto office).
Ho già creato il sito con quel carattere e mi sarebbe piaciuto trovare un font simile a quello e caricarlo. Comunque in alternativa mi sa che prenderò il paragrafo e lo inserirò come immagine
che tu sappia, se pubblico un sito con caratteri protetti da copyright, qual'è la probabilità che ti scoprano (trattasi di un sito di un negozio di parrucchieri). Quali le conseguenze???
Io ho provato a visionare questo mio sito: http://censimento.webege.com/
da un pc non mio dove non c'è installato il font Tempus sans; risultato: le pagine con il testo formattato con quel font vengono visualizzate con un altro font universale (tranne ovviamente l'intestazione che è un'immagine).
Ciao Fabio.....ma non vedo il codice del font...?
infatti non vedo la regola @font-face inserita
Ora?
Ora si...
però ho disinstallato il font dal mio pc ed ora il browser non lo visualizza più, come diceva Stefano; eppure nella cartella files c'è
forse lo guardi con firefox o IE , hai allegato solo il ttf, ci vogliono anche i formati woff e eot, rispettivamente per FF e IE
nello zip non c'erano; provo a cercarli meglio in rete, oppure cerco un converter o un creator.
Vi aggiorno.
http://www.fontsquirrel.com/tools/webfont-generator
Stando a quanto dice qui: http://www.fonts.com/font/itc/itc-tempus-sans/regular/web-font
il formato ttf dovrebbe però coprire Chrome, FF, Opera e Safari...
Grazie, ma per questo font è inutilizzabile perchè su richiesta della casa produttrice è nella blacklist del generator; sarebbe necessario rimuovere le proprietà del file che non si può fare perchè è protetto.
Trovato: http://convertfonts.com/
Ora provo ad aggiungere nello script e nella cartella files i nuovi files generati
sarebbe ONESTO acquistarlo allora.
senz'altro...oppure utilizzarne un altro libero con lo stesso metodo...
appena riesco a rifare la connessione al mio server vedo se funziona l'implementazione del codice css tramite file allegato invece di scriverlo manualmente nella sezione esperto
Dunque:
ho provato ad allegare (spuntando anche la opportuna casella di controllo) un file css contenente il seguente testo
@font-face {
font-family: 'TempusSansITCRegular';
src: url('tempsitc.eot');
src: url('tempsitc.eot') format('embedded-opentype'),
url('tempsitc.woff') format('woff'),
url('tempsitc.ttf') format('truetype'),
url('tempsitc.svg#TempusSansITCRegular') format('svg');
}
oltre ai rispettivi files del font nei vari formati; non ha funzionato!
Adesso ho eliminato dalla cartella online quel file ed ho aggiunto nella sez. esperto al passo 1 il seguente codice:
<style type="text/css">
@font-face {
font-family: 'TempusSansITCRegular';
src: url('files/tempsitc.eot');
src: url('files/tempsitc.eot') format('embedded-opentype'),
url('files/tempsitc.woff') format('woff'),
url('files/tempsitc.ttf') format('truetype'),
url('files/tempsitc.svg#TempusSansITCRegular') format('svg');
}
</style>
Poi ho installato il font nel mio pc, ho aperto il programma e ho assegnato quel font solamente al titolo; quindi ho esportato il sito senza aprire il browser al termine dell'esportazione per non falsare la cache.
Dopo ciò ho nuovamente disinstallato il font dal mio pc ed ho aperto il browser alla home page.
Il titolo mi viene visualizzato correttamente formattato in FF, Chrome e IE.
Non ho installato altri browsers.
http://censimento.webege.com/
Lascio il tutto in visione a chi volesse verificare se il tentativo non riuscito dipende da un errore mio oppure da un bug del programma.
non lo hai precisato ma suppongo che nella prova non riuscita tu abbia allegato i font con l'oggetto html per cui sono finiti nella cartella files a cui il css NON fa riferimento in quanto non modificato come nel secondo css.
per funzionare senza modifica i font aldrebbero esportati alla radice del sito online o nella copia in locale, non funzionerebbe quindi in anteprima.
No Silver, ho fatto entrambi i tentativi (un po' frettolosamente per la verità); ho provato prima ad allegare all'oggetto html il file non modificato, come dici giustamente tu, poi quello con i percorsi modificati ma privo del tag style (quindi il secondo codice senza la prima e l'ultima riga).
Poi ho desistito ed ho rimesso il codice al passo 1.
Però e ben possibile che io abbia inavvertitamente combinato un pasticcetto, perciò ho preferito consegarvi il tutto perchè possiate fare una prova col materiale che ho usato io anche voi che avete molta più dimestichezza.
Provato qui, guarda il mio codice...
http://mibo.altervista.org/font/
Ciao carissimo; visto. Il codice è meno ricco di quello che ho messo io. Non so se dipenda da questo ma io non vedo il carattere senza nè con il medesimo installato nel mio sistema su FF e IE. Lo visualizzo invece correttamente su Chrome in entrambi i casi.
Come hai proceduto esattamente tu?
Messo il codice al passo 1 in Head e i tuoi 3 font in cartella files....eppure io lo vedo corretto anche con Android e iPad...
Android e iPad (che non possiedo neanche in forma di simulatore virtuale) non li ho provati; grazie per il suggerimento involontario che seguirò appena troverò il tempo.
Limitandoci al PC: hai eseguito la mia ultima procedura sulla base del vostro (tuo e di Silver) suggerimento di partenza, che con il mio css funge alla perfezione sui browsers che ho provato io (per rispondere all'intento originale di Massimiliano B.); ma col tuo che succede?
Arriveremo ad individuare il fulcro del problema per rispondergli in modo certo, univoco e "definitivo"?
Provato Android: OK!
In realtà ho appena provato a visualizzare anche il mio sito su Android e non va! Niente font.
Ma il mio cellulare cinesino, come da precedente esperienza sulle animazioni HTML5, sappiamo che non merita voce in capitolo...!
Se con tutti i link che ha postato Kol al post n.10 si fanno ancora certe domande, temo proprio di no?
Comunque qui:
http://censimento.webege.com/
... attualmente vedo font-family diverso da quello "impostato" da WS.
Questo è il nome da assegnare: Tempus Sans ITC
Qui un altro link, che può servire anche a Mirko:
http://www.html.it/pag/18954/font-personalizzati-con-font-face/
_______ oltre il 5° step ________
http://www.unofficialwsx5.com
Ciao Lemo; mi scuso con Kolasim per aver trascurato di leggere i links che ha suggerito.
Adesso riprovando a visualizzare il mio sito (senza font installato) non vedo più il font; ieri lo vedevo.
Comunque il font family del mio css non l'ho scritto io, è quello generato dal converter stesso; pensavo di essere più garantito sulla correttezza.
Ora provo a cambiarlo come dici tu ed a visionare nuovamente il sito nei vari browsers.