Wicked PDF + font + heroku + rails3.2

Question

Sto usando wicked_pdf con rails 3.2.11 e ruby ​​1.9.3 per generare un PDF da HTML e distribuire su Heroku.

mio pdf.css.scss.erb:

<% app_fullhost = Constants["app_fullhost"] %> 

@font-face { 
    font-family:'DosisMedium'; font-style:normal; font-weight:500; 
    src: url(<%=app_fullhost%>/app/font/dosis/Dosis-Medium.ttf) format('woff'); 
} 

*, body { 
    font-family: "DosisLight", 'Times New Roman', 'Arial', sans-serif; 
} 

dove app_fullhost è l'ospite esatto, in fase di sviluppo o di produzione.

mio layout PDF include tra le altre cose:

%html{:lang => I18n.locale} 
    %head 
    %meta{:charset => "utf-8"} 
    %title= content_for?(:title) ? yield(:title) : Settings.app_name 
    = wicked_pdf_stylesheet_link_tag "pdf" 

In production.rb ho

config.assets.precompile +=%w(pdf.css) 

Questo funziona senza problemi in fase di sviluppo, ma su Heroku il file pdf non caricare il carattere desiderato Ho anche provato diverse soluzioni come l'aggiunta di questi in production.rb:

config.assets.paths << "#{Rails.root}/app/assets/fonts" 
config.assets.precompile += %w(*.svg *.eot *.woff *.ttf) 
config.assets.precompile += %w(.svg .eot .woff .ttf) 

e ho provato anche a cambiare (in pdf.css.scss.erb):

@font-face { 
    font-family:'Dosis'; font-style:normal; font-weight:500; 
    src: url('Dosis-Medium.ttf') format('woff'); 
} 

o

@font-face { 
    font-family:'Dosis'; font-style:normal; font-weight:500; 
    src: url(<%= asset_path('Dosis-Medium.ttf')%>) format('woff'); 
} 

I font sono in assets/fonts ed anche in public/app/font/dosis e URL su Heroku rispondono correttamente con:

..//myapp/app/font/dosis/Dosis-Medium.ttf" and 
..//myapp/assets/Dosis-Medium.ttf 

Come posso caricare il carattere su Heroku?

Answer 1

fammi vedere se ho questo diritto:

Server 1: la costruzione di un PDF, ha bisogno di tipi di carattere, e li tira da un URL Questo funziona a livello locale in dev, ma non su Heroku.

C'è qualcosa nei registri? (vedi la richiesta http per il font?)

Hai detto che non carica il carattere corretto. Esplode, o semplicemente esegue il rendering come se non avesse mai caricato il font (ad esempio un 404 sul font fetch).

Funziona se non si estrae il file di carattere da heroku? (come usare aws o qualche altro font da un altro URL solo come test)

Stai prelevando dallo stesso processo server attualmente in esecuzione? Avete più di un banale o più di un processo di unicorno in grado di gestire il processo corrente (creazione del pdf) e la richiesta in arrivo (che serve il file font)

Ho visto persone correre solo un singolo dinamo , ma cerca di eseguire due eventi http e incorrere in problemi. Se hai solo un banco prova (non hai specificato diversamente), aggiungine un altro e vedi cosa succede, oppure aggiungi un altro processo unicorno.

Answer 2

wkhtmltopdf, il programma sottostante wicked_pdf, è notoriamente divertente quando si tratta di caricare i caratteri tramite CSS. Su alcuni sistemi funziona con percorsi assoluti, a volte richiede percorsi relativi. Anche se si ottengono correttamente i percorsi, questo potrebbe essere espulso da una decelerazione CSS imprecisa, ecc. Ci sono dozzine di domande su questo solo su SO.

Il migliore, più flessibile e più soltion portatile che ho trovato è quello di Base64-codificare il tipo di carattere che si sta cercando di usare, e includerlo direttamente nel file CSS:

@font-face { 
    font-family: 'OpenSans'; 
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA... 
} 

Answer 3

mi sono imbattuto in questo numero e ho seguito il consiglio delineato da Arman H: ho convertito il font nella base 64 e l'ho fatto riferimento direttamente nel file CSS/SCSS. Il resto dei passi che ho seguito sono molto simili a quelli delineati nella domanda originale.

ho messo insieme una descrizione completa (con un link GitHub al codice sorgente) qui: http://apleroy.com/posts/custom-pdf-fonts-with-wicked_pdf-and-heroku

Per prima cosa ho fatto riferimento il carattere all'interno della directory dei font.

<%# /fonts/custom_fonts.css.scss.erb %> 
@font-face { 
    font-family: "SourceSansPro-Light"; 
    src: url('<%= asset_path("SourceSansPro-Light.otf") %>'); 
} 

Poi, alla base 64 codificare un tipo di carattere, ho usato questo sito (già affrontato in un commento precedente): http://www.opinionatedgeek.com/dotnet/tools/base64encode/. L'output codificato in base 64 è una stringa casuale composta da diverse centinaia di righe di caratteri alfanumerici. Ho copiato questa uscita nel nuovo file pdf.css.scss:

<%# /stylesheets/pdf.css.scss %> 
@font-face { 
    font-family: 'Source Sans Pro Light'; 
    src: url(data:font/truetype;charset=utf-8;base64,T1RUTw-----THIS IS HUNDREDS OF LINES LONG -------sGAnBSvO7nBqXQ==) 
} 

All'interno della pagina effettiva html (che viene convertito in PDF) ho fatto riferimento utilizzando il tag wicked_pdf foglio di stile - come affrontato nella domanda iniziale:

<%# views/pdf_pages/show.html.erb %> 
<meta charset='utf-8' /> 
<%= wicked_pdf_stylesheet_link_tag "pdf" %> 

Infine, precompilato il pdf foglio di stile in modo da includerlo nella pipeline risorsa per la distribuzione su Heroku:

#application.rb 
config.assets.precompile += ['pdf.css']