ruby on rails - fontface - ¿Forma oficial de agregar fuentes personalizadas a Rails 4?

load font rails

Question

Estoy investigando cómo agregar fuentes personalizadas a mi aplicación Rails, por ejemplo, agregando una carpeta de fonts en la carpeta de activos, y no puedo encontrar una forma "oficial" de Rails sobre cómo hacerlo.

Sí, hay muchas preguntas / respuestas aquí en SO sobre el asunto, todas aparentemente con sus propios hacks. ¿Pero no debería una práctica tan común ir bajo la famosa "convención sobre configuración" de Rails?

O si me lo he perdido, ¿dónde está la referencia de documentación sobre cómo organizar las fuentes en una aplicación de Rails?

Answer 1

Sí, el enlace proporcionado lo explicará bien, sin embargo, si necesita otra explicación detallada, entonces aquí está

• En primer lugar, para utilizar fuentes personalizadas en su aplicación necesita descargar archivos de fuentes, puede intentar http://www.1001freefonts.com/

  http://www.piccsy.com/everything-design/ y busque fuentes

  Pocos de los formatos de archivos de fuentes más populares son principalmente .otf (Formato de tipo abierto) .ttf (Formato de tipo verdadero) .woff (Formato de fuente abierta web)

• Puede mover las fuentes descargadas a su carpeta de aplicaciones en la aplicación / assets / fonts /

• Después de descargar el archivo, necesita "declarar" las fuentes que usará en su CSS como este

  @font-face {
    font-family: "Kaushan Script Regular";
    src: url(/assets/KaushanScript-Regular.otf) format("truetype");
  }

• Finalmente puedes usar la familia de fuentes que acabas de declarar donde quieras así

  #e-registration {
    font-family: "Kaushan Script Regular";
  }

Espero que esto ayude.

Answer 2

Simplemente lo hizo...

1. Descargue y guarde los archivos de fuentes (eot, woff, woff2 ...) en su directorio assets / fonts /

   2. En su config / application.rb agregue esta línea config.assets.paths << Rails.root.join ("app", "assets", "fonts")

Lo que hace es precompilar la carpeta de fuentes como lo hace de forma predeterminada con sus imágenes, hojas de estilo, etc.

3. y asegúrese de que esta línea esté configurada en true config.assets.enabled = true

4. En su sass / scss o incluso en línea con la etiqueta <script>

   @ font-face {font-family: ''Bariol Regular''; src: font-url (''Bariol_Regular_Webfont / bariol_regular-webfont.eot'');
   src: font-url (''Bariol_Regular_Webfont / bariol_regular-webfont.eot? iefix'') formato (''eot''),
   font-url (''Bariol_Regular_Webfont / bariol_regular-webfont.woff'') formato (''woff''),
   font-url (''Bariol_Regular_Webfont / bariol_regular-webfont.ttf'') formato (''truetype''),
   font-url (''Bariol_Regular_Webfont / bariol_regular-webfont.svg # webfont3AwWkQXK'') formato (''svg''); font-weight: normal; estilo de fuente: normal; }

Tenga en cuenta que debe usar font-url helper en lugar de css '' url para abordar la toma de huellas dactilares realizada por Rails cuando precompila los activos

Finalmente, establece la familia de fuentes en tus archivos CSS

body {
   font-family: ''Bariol Regular'', serif;
} 

CONSEJO GRATUITO: Dicho esto, la mejor manera en términos de rendimiento es configurar esto con JS para que estas fuentes se carguen de forma asíncrona. Compruebe este cargador: https://github.com/typekit/webfontloader

Answer 3

Tuve algunos problemas con los enfoques enumerados anteriormente, porque el CSS de producción no apuntaba a la fuente ttf compilada, por lo que luego utilicé con éxito este enfoque alternativo tomado de https://gist.github.com/anotheruiguy/7379570 :

1. Coloca todos los archivos de fuente en assets/stylesheets/fonts . por ejemplo, assets/stylesheets/fonts/digital_7.ttf .

2. Definí en un archivo .scss que usamos:

   @font-face {
       font-family: ''Digital-7'';
       src: asset-url(''fonts/digital_7.ttf'') format(''truetype'');
       font-weight: normal;
       font-style: normal;
   }

3. Aproveché la fuente personalizada en otros archivos .scss:

   .digital-font {
       font-family: ''Digital-7'', sans-serif;
       font-size: 40px;
   }

Dicho esto, una forma mucho más limpia de hacer esto es poner la definición de fuente (digital_7_mono.ttf en este ejemplo) en un sitio separado.

Si está utilizando Cloudfront, por ejemplo, en un directorio de Cloudfront llamado my_path , cargue sus archivos de fuentes, luego defina un archivo css (por ejemplo, digital_fonts.css )

@font-face {
  font-family: ''Digital-7-Mono'';
  font-weight: normal;
  font-style: normal;
  src: local(''Digital 7 Mono''), local(''Digital-7-Mono''), url(''https://mycloudfront_site.com/my_path/digital_7_mono.ttf'') format(''truetype'');
}

En su html, dentro de la etiqueta <head> , agregue: