TANTE RISORSE PER FONT
Fonte: http://www.instantshift.com/
Spesso dobbiamo utilizzarlo per riportare il font del nostro logo all’interno del sito per rendere il nostro brand fedele al 100%.
In questo articolo elenca una serie di risorse per la ricerca, la conversione, e creazione di un font personalizzato per il tuo sito web per ottenere un look fedele al 100%.
Strumenti di conversione dei caratteri
Molte volte ci troviamo a dover inserire sul web un font presente sul nostro computer e quindi effettuare la giusta conversione in web-font. Per risolvere questo problema ci possiamo appoggiare a diversi siti web che ci permetteranno di convertire i nostri font in svariati formati riconoscibili dai web-browser.
Font Squirrel è un sito all-around meraviglioso per tutto ciò che riguarda i font, ma la sua vera forza è il generatore di font “font-face” che è un ottimo strumento per caricare qualsiasi file di font e di convertirlo in un WebFont. Il processo è veloce e il risultato è un WebFont completo di istruzioni per l’applicazione sul vostro sito ed inoltre include un css esempio.
FontJazz è un semplice strumento per il caricamento di un file di font e conversione in un WebFont. Il risultato è un file JavaScript ed i vostri font convertiti. Una volta caricato sul server in qualsiasi posto, nella voce tag userà i caratteri convertiti. I caratteri utilizzati per il sito rimangono selezionabili per search engine friendly.
Uno strumento semplice per rapido per convertire i font. Il risultato è una cartella con il campione CSS ed i vostri font pronti per il caricamento sul server. Non c’è niente di più facile.
Font site
Ora che sapete che è possibile convertire praticamente qualsiasi tipo di carattere in un WebFont è possibile implementare con @ font-face CSS, il passo successivo è scegliere i caratteri ideali.
Se non si vuole passare attraverso il processo di conversione o di ospitare i vostri webfonts, lasciare che sia Google farlo! Il progetto Google webfonts ha attualmente più di 500 webfonts liberi e le differenti modalità di implementazione sul tuo sito. Basta scegliere il design e il metodo che si desidera utilizzare per implementare (CSS @ import, link CSS o JavaScript). Google ha anche un test di caricamento della pagina per darvi un’idea di quanto tempo ci vorrà agli utenti per scaricare un font!
Centinaia di font gratuiti per uso commerciale e font a pagamento.
Una delle migliori risorse per i font commerciali. I caratteri sono ben progettati e il generatore di font-face rende facile ottenere i caratteri da inserire nei nostri progetti.
Identificatori di font
Questo sito di ricerca Font offre risultati in base all’ interpretazioni di un’immagine o di un url che fornisci.
Questo sito di ricerca i caratteri , offre risultati sulla base di risposte alle domande proposte. L’indagine è di circa 12 domande e può essere messa a punto utilizzando il filtro proposto.
Questo strumento di ricerca dei caratteri MyFonts.com funziona un po ‘come il sito WhatFontIs.Si forniscono un’immagine o un URL e lui suggerisce i pacchetti di font basati sulle interpretazioni dell’immagine.
Font Strumenti di attuazione
Ora hai i font che desideri , i file convertiti, e ti stai chiedendo cosa fare dopo?
Fase 1 – Carica tutti i tuoi file
Come prima fase dobbiamo appoggiare i nostri font sul nostro dominio, (non importa dove) in modo da poterli raggiungere tramite indirizzo es: http://miosito.com/font…
Fase 2 – Aggiunta del @ font-face per il foglio di stile CSS
È possibile inserire questo codice in qualsiasi punto del foglio di stile CSS, ma in genere è meglio metterlo in prossimità della parte superiore del foglio in modo da poter rapidamente modificarlo se si vuoi cambiare il font sul nostro sito.
1 | @ Font-face { |
2 | font-family : 'nome font' ; |
3 | url: ( 'http://yoursite.com/fonts/yourfont.ttf' ); |
4 | } |
Ovviamente, sostituisci il nome del font e l’URL con il link al file che hai caricato nel passaggio 1.
Fase 3 – Definizione del carattere
Questo è il riferimento al font da utilizzare:
1 | h 1 { |
2 | font-family : 'nome font' ; |
3 | } |
Ora, ovunque si utilizza il tag <h1>, il carattere sarà la vostra WebFont!
Kit di sostituzione dei font
Questo è stato elencato in precedenza nella sezione Font siti, ma è anche un ottima risorsa per @ font-face kit. Questi kit di font per il web design comprendono tutti i formati necessari per fare un lavoro visibile su più browser e fornisce anche il CSS e HTML avete bisogno.
Reply to this post
Posta un commento