una - google fonts

Cómo usar fuentes en Rails 4

Question

Tengo una aplicación de Rails 4 y estoy tratando de usar una fuente personalizada.

He seguido muchos tutoriales sobre esto y de alguna manera simplemente no está funcionando para mi aplicación.

Estoy utilizando application.css.less y tengo la siguiente declaración:

@font-face {
    font-family: ''HDVPeace'';
    src: font-url(''HDV_Peace.eot'');
    src: font-url(''HDV_Peace.eot?iefix'') format(''eot''),
        font-url(''HDV_Peace.woff'') format(''woff''),
        font-url(''HDV_Peace.ttf'') format(''truetype''),
        font-url(''HDV_Peace.svg#webfont'') format(''svg'');
}

Nota: He intentado usar url() lugar de font-url() también. El primero genera errores 404 en la consola, donde este último simplemente no parece hacer nada. En las herramientas de desarrollo de Chrome bajo recursos, los archivos de fuentes no aparecen debajo de la carpeta de assets o en cualquier lugar

en mi config/application.rb tengo:

config.assets.paths << Rails.root.join(''app'', ''assets'', ''fonts'')

Y en mi config/environments/development.rb y config/environments/production.rb tengo:

config.assets.paths << Rails.root.join(''app'', ''assets'', ''fonts'')
config.assets.precompile += %w( .svg .eot .woff .ttf)

Mis archivos de fuentes se encuentran en app/assets/fonts y no están en una carpeta debajo de eso ...

¿Qué me estoy perdiendo?

ACTUALIZAR:

estructura de carpetas

app
 |----assets
        |----fonts
               |----HDV_Peace.eot
               |----HDV_Peace.svg
               |----HDV_Peace.ttf
               |----HDV_Peace.woff

Answer 1

A veces, las fuentes no se detectan desde el directorio assets/fonts .

Si la seguridad no es un problema, podemos poner el directorio de fonts en la carpeta pública. Luego estarán disponibles en un public/ nivel.

Answer 2

En Rails 4, hay un ayudante para establecer la ruta de las fuentes.

Si tiene la fuente en / assets / fonts o vendor / assets / fonts, ¡Rails 4 los encontrará! Para aprovechar esto, en el archivo CSS Bootstrap cambie la llamada @font_face a

@font-face {
  font-family: ''Glyphicons Halflings'';
  src: font-url(''glyphicons-halflings-regular.eot'');
  src: font-url(''glyphicons-halflings-regular.eot?#iefix'') format(''embedded-opentype''), 
       font-url(''glyphicons-halflings-regular.woff'') format(''woff''), 
       font-url(''glyphicons-halflings-regular.ttf'') format(''truetype''), 
       font-url(''glyphicons-halflings-regular.svg#glyphicons_halflingsregular'') format(''svg'');
}

Tenga en cuenta que no hay ninguna especificación de carpeta al frente de los archivos de fuente. Esto se completa con los carriles de ayuda.

Answer 3

En caso de que tengas problemas para utilizar las fuentes en Rails 5, solo tienes que editar la app/assets/config/manifest.js

Y luego inserta esto //= link_tree ../fonts

Cómo utilizar:

@font-face { font-family: ''FontAwesome''; src: url(''fontawesome-webfont.eot?v=4.6.3''); src: url(''fontawesome-webfont.eot?#iefix&v=4.6.3'') format(''embedded-opentype''), url(''fontawesome-webfont.woff2?v=4.6.3'') format(''woff2''), url(''fontawesome-webfont.woff?v=4.6.3'') format(''woff''), url(''fontawesome-webfont.ttf?v=4.6.3'') format(''truetype''), url(''fontawesome-webfont.svg?v=4.6.3#fontawesomeregular'') format(''svg''); font-weight: normal; font-style: normal; }

Y tampoco te olvides de reiniciar tu servidor.

Answer 4

Encontré este artículo para resolver todos mis problemas.

http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/

Answer 5

Esto funcionó para mí en una aplicación de Rails 4.1.

1. Agregue las fuentes en `app / assets / fonts`
2. Llámelos desde un archivo `.css.scss` de la siguiente manera:

@font-face {
  font-family: ''icomoon'';
  src: url(font-path(''icomoon.eot'') + "?#iefix") format(''embedded-opentype''),
    url(font-path(''icomoon.woff'')) format(''woff''),
    url(font-path(''icomoon.ttf''))  format(''truetype''),
    url(font-path(''icomoon.svg'') + "#icomoon") format(''svg'');
}
[class^="icon-"], [class*=" icon-"] {
  font-family: ''icomoon'';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Answer 6

Olvídate de cambiar cualquier cosa en Rails 4 en tu application.rb . Simplemente agregue / assets / prefix como @Parker dijo Selbert y lo siguiente funcionará:

@font-face {
  font-family: ''custom-font-name'';
  src: font-url(''/assets/_folder_/fontX-webfont.eot'');
  src: font-url(''/assets/_folder_/fontX-webfont.eot?#iefix'') format(''embedded-opentype''),
       font-url(''/assets/_folder_/fontX-webfont.woff'') format(''woff''),
       font-url(''/assets/_folder_/fontX-webfont.ttf'') format(''truetype''),
       font-url(''/assets/_folder_/fontX-webfont.svg#sociconregular'') format(''svg'');
  font-weight: normal;
  font-style: normal;

}

Answer 7

Por favor , no codifique su directorio de fuentes ya que la ubicación es dinámica.

Al igual que hay ayudantes incorporados para las imágenes, también hay ayudantes incorporados para las fuentes: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

Ejemplo:

@font-face {
    font-family: ''QuicksandOTF'';
    src: font_url(''Quicksand-Regular.otf'') format(''opentype'');
    font-weight: normal;
    font-style: normal;
}

Answer 8

Reinicie ''rails server'' después de crear el directorio app / assets / fonts

Answer 9

Su declaración @font-face está muy cerca, solo le falta el prefijo /assets dentro de la declaración de url.

@font-face {
    font-family: ''HDVPeace'';
    src: url(''/assets/HDV_Peace.eot'');
    src: url(''/assets/HDV_Peace.eot?iefix'') format(''eot''),
         url(''/assets/HDV_Peace.woff'') format(''woff''),
         url(''/assets/HDV_Peace.ttf'') format(''truetype''),
         url(''/assets/HDV_Peace.svg#webfont'') format(''svg'');
}

Todo lo que se ha agregado a assets.paths está disponible directamente en la ruta /assets , tanto en desarrollo como en producción. Solo necesita la línea de modificación de ruta de activos en application.rb , volver a hacerlo en development.rb y production.rb es simplemente redundante.

Además, todos los formatos de fuente son esencialmente binarios. No es necesario assets.precompile , por lo que puede eliminar de forma segura la adición assets.precompile .

Aquí hay una nueva aplicación de Rails 4 que sirve fuentes personalizadas. Además de la declaración de importación de la fuente en el css y la adición de una página para mostrar, no se le ha hecho nada más:

https://github.com/sorentwo/font-example