Come aggiungere un font personalizzato all’app Rails?

Ho un paio di caratteri che vorrei usare nella mia applicazione RoR, ma i loro formati sono principalmente .ttf e .otf, tra gli altri. Come faccio a incorporare questi file nella mia app Rails? Vale a dire, una volta che li ho inseriti nella mia cartella delle risorse, qual è esattamente la syntax per me per incorporarli nei miei file CSS e / o LESS?

EDIT: Ecco il codice che ho per ora:

@font-face { font-family: Vow; src: url('/assets/Vow.otf'); } h1 { font-family: Vow; text-align: center; } 

Non sembra funzionare per me. L’output nella console di Rails è qualcosa sulla falsariga di:

 ActionController::RoutingError (No route matches [GET] "/assets/Vow.otf") 

E esaminando la pagina con Firebug dice:

 downloadable font: download failed (font-family: "Vow" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: http://localhost:3000/assets/Vow.otf 

Checkout http://www.css3.info/preview/web-fonts-with-font-face/

Esempio più ampio, supponendo che siano risolti direttamente nella directory delle risorse

 @font-face { font-family: 'Nokia Pure Headline'; src: url('/assets/nokiapureheadlinerg-webfont.eot'); src: url('/assets/nokiapureheadlinerg-webfont.eot?iefix') format('eot'), url('/assets/nokiapureheadlinerg-webfont.woff') format('woff'), url('/assets/nokiapureheadlinerg-webfont.ttf') format('truetype'), url('/assets/nokiapureheadlinerg-webfont.svg#webfont3AwWkQXK') format('svg'); font-weight: normal; font-style: normal; } 

Mi dispiace, non lo so meno

Anche per la configurazione della pipeline delle risorse in modo da avere il contenuto di risorse / font disponibili sotto utilizziamo:

 # Enable the asset pipeline config.assets.enabled = true config.assets.paths << Rails.root.join('/app/assets/fonts') 

Aggiunta di un carattere personalizzato all’applicazione Rails

  1. Seleziona il tipo di carattere e scarica
    per esempio
    vai a http://www.dafont.com
    seleziona il carattere e scarica il font

  2. Genera file di font

    vai a http://www.fontsquirrel.com/
    seleziona – generatore di font web – seleziona il font da scaricare (unzip file scaricato da http://www.dafont.com ).

  3. Recupera i file dei caratteri
    Questo sito genererà un altro zip che contiene tutto il necessario per quello stile di carattere.
    Da quel zip, decomprimere e aprire css, copiare css nel file html o css di quello

  4. Aggiungi il carattere alla tua app per rotaie

    ( Come aggiungere un carattere personalizzato all’app Rails? )

    config / application.rb

      config.assets.enabled = true config.assets.paths << "#{Rails.root}/app/assets/fonts" 
  5. Aggiungilo alla vista:

          

    sample text

aggiungi un font personalizzato all’applicazione Rails usando i font google

per esempio sto usando Freckle Face
http://www.google.com/fonts#QuickUsePlace:quickUse/Family :
Uso rapido: faccia lentigginosa

1. Scegli gli stili che desideri:
Impatto sul tempo di caricamento della pagina
Suggerimento: l’utilizzo di molti stili di carattere può rallentare la tua pagina Web, quindi seleziona solo gli stili di carattere effettivamente necessari sulla tua pagina web.

2. Scegli i set di caratteri che desideri:
Suggerimento: se scegli solo le lingue di cui hai bisogno, aiuterai a prevenire la lentezza della tua pagina web.
Latino (latino)
Latin Extended (latin ext)

3. Aggiungi questo codice al tuo sito web:
Istruzioni: per incorporare la tua raccolta nella tua pagina web, copia il codice come primo elemento del tuo documento HTML.
http://fonts.googleapis.com/css?family=Freckle+Face ‘rel =’ stylesheet ‘type =’ text / css ‘>

4. Integra i caratteri nel tuo CSS:
L’API di Google Fonts genererà il necessario CSS specifico del browser per utilizzare i caratteri. Tutto quello che devi fare è aggiungere il nome del font ai tuoi stili CSS. Per esempio:

  font-family: 'Freckle Face', cursive; 

Istruzioni: aggiungi il nome del font ai tuoi stili CSS come faresti normalmente con qualsiasi altro font.

Esempio:

  h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; } example :