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.