ruby on rails - Rails 4: ¿Por qué las fuentes no se cargan en producción?

ruby-on-rails fonts

Question

No puedo cargar fuentes en mi aplicación Rails 4 en producción, normalmente funciona en desarrollo.

Los activos se precompilan en el servidor durante la implementación.

Tengo mis fuentes en

app/assets/fonts

Mi app.css:

@font-face {
font-family: ''WalkwayBoldRegular'';
src: url(''Walkway_Bold-webfont.eot'');
src: url(''Walkway_Bold-webfont.eot?#iefix'') format(''embedded-opentype''),
url(''Walkway_Bold-webfont.woff'') format(''woff''),
url(''Walkway_Bold-webfont.ttf'') format(''truetype''),
url(''Walkway_Bold-webfont.svg#WalkwayBoldRegular'') format(''svg'');
font-weight: normal;
font-style: normal;
}

En mi production.rb tengo:

config.assets.precompile << Proc.new { |path|
if path =~ //.(eot|svg|ttf|woff)/z/
true
end
}

Answer 1

Tuvimos este problema la semana pasada: el problema es que sus activos se compilarán para tener hash MD5 en ellos, mientras que su CSS estándar seguirá buscando sus nombres "estándar". Este es un problema con las imágenes y fuentes.

@font-face {
font-family: ''akagi'';
src: asset_url(''fonts/akagi-th-webfont.eot'');
src: asset_url(''fonts/akagi-th-webfont.eot?#iefix'') format(''embedded-opentype''),
asset_url(''fonts/akagi-th-webfont.woff'') format(''woff''),
asset_url(''fonts/akagi-th-webfont.ttf'') format(''truetype''),
asset_url(''fonts/akagi-th-webfont.svg#akagithin'') format(''svg'');
font-weight: 300;
font-style: normal;
}

Este es un ejemplo de cómo debería usar archivos scss para cargar activos dinámicamente. Estos archivos se compilan (antes de pulsar o durante el inicio) en sus archivos .css, todos con sus activos sincronizados correctamente.

Tuvimos un problema similar para ti con Heroku, y logramos que funcionase al poner nuestros archivos en /stylesheets/layout/fonts.css.scss y luego llamar

@import ''/layout/fonts'';

También llamamos a nuestra application.css -> application.css.scss para que admita la función @import

Answer 2

Aquí hay una forma genérica de solucionar este problema para cualquier biblioteca.

Reproducir error en local

1. Ejecutar servidor de rieles en producción

   1. En rake assets:precompile terminal rake assets:precompile

   2. Esto en config/environments/production.rb

       # Rails 4 production
      # config.serve_static_files = true
      # Rails 5, Uncomment to run production on local
      # config.log_level = :debug
      config.public_file_server.enabled = true

   3. En el terminal RAILS_ENV=production rails s
2. Debería ver un error en el navegador web

Override familia de fuentes

1. application.css necesita ser renombrado a application.scss ya que se usará asset-url

2. Agregue fuentes para precompilar en el archivo config/initializers/assets.rb :

   Rails.application.config.assets.precompile << //.(?:svg|eot|woff|ttf)$/

3. Busque la definición de la cara de la fuente dentro de su biblioteca CSS y cópielo a application.scss . Debería ser algo así como:

   @font-face {
   font-family: ''my-library'';
   src: url(''../fonts/my-library.eot'');
   src:
   url(''../fonts/my-library.eot?#iefix'') format(''embedded-opentype''),
   url(''../fonts/my-library.woff2'') format(''woff2''),
   url(''../fonts/my-library.ttf'') format(''truetype''),
   url(''../fonts/my-library.woff'') format(''woff''),
   url(''../fonts/my-library.svg?#my-library'') format(''svg'');
   font-weight: normal;
   font-style: normal;
   }

4. Cambiar a:

   @font-face {
   font-family: ''my-library'';
   src: asset-url(''my-library/fonts/my-library.eot'');
   src:
   asset-url(''my-library/fonts/my-library.eot?#iefix'') format(''embedded-opentype''),
   asset-url(''my-library/fonts/my-library.woff2'') format(''woff2''),
   asset-url(''my-library/fonts/my-library.ttf'') format(''truetype''),
   asset-url(''my-library/fonts/my-library.woff'') format(''woff''),
   asset-url(''my-library/fonts/my-library.svg?#my-library'') format(''svg'');
   font-weight: normal;
   font-style: normal;
   }

Qué cambios se hicieron

1. Usar asset-url lugar de url
2. Cambie ../fonts o similar a una ruta que asset-url comprenda.

Qué camino poner en assets-url

Para saber qué camino entiende asset-url , vaya a la consola de rails e ingrese Rails.application.assets.paths . Obtendrás algo como:

[
''/path/1'',
''/path/2'',
''/path/3'',
]

Si tus fuentes están en /path/2/my-library/fonts/ entonces usa asset-url(''my-library/fonts/my-library.eot'') .

es decir, elimina la ruta de acceso de la parte que encontró en Rails.application.assets.paths .

Compruebe que escribió el camino correcto

En la consola de Rails en desarrollo:

helper.asset_url(''my-library/fonts/my-library.eot'')

Debería regresar:

"/assets/my-library/fonts/my-library-2517b97e2c0e1e6c8ceb9dd007015f897926bc504154137281eec4c1a9f9bdc9.eot"

Tenga en cuenta el final /assets/ y el resumen en la última parte.