web-dev-qa-db-fra.com

Les ressources de polices Heroku ne fonctionnent pas

Polices placées dans app/assets/fonts

Ajoutée 

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

Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

en production.rb et développement.rb

Les polices liées en css comme:

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

Semble travailler en développement. Mais dans HEROKU, cela ne semble pas fonctionner. Il ne peut pas trouver /assets/icomoon.eot.

La solution dans ce lien ne semble pas fonctionner

Utilisation de polices avec le pipeline de ressources Rails

ruby-on-railsheroku
20
Sarvesh

Les actifs tels que les polices travailleront sur le développement mais pas sur la production si vous utilisez d'anciens CSS normaux pour localiser vos actifs plutôt que sur les aides de pipeline d'actifs. Rails 4 a ajouté des modifications de rupture au pipeline d’actifs afin d’encourager les utilisateurs à l’utiliser correctement et à ne pas utiliser l’ancienne méthode CSS de référencement des actifs.

Pour résoudre ce problème, vous devez utiliser les nouvelles aides du pipeline d'actifs pour pointer vers les versions mises en cache de vos polices, empreintes digitales. Plutôt que url (qui n'utilise pas le pipeline d'actifs), vous devez utiliser font-url (qui l'utilise). Pour ce faire, vous devrez peut-être utiliser Sass ou incorporer ERB dans votre feuille de style.

Exemple (en utilisant SCSS):

@font-face {
  font-family: 'Icomoon';
  src: font-url("/assets/icomoon.eot");
  src: font-url("/assets/icomoon.eot?#iefix") format("embedded-opentype"), font-url("/assets/icomoon.svg#icomoon") format("svg"), font-url("/assets/icomoon.woff") format("woff"), font-url("/assets/icomoon.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Voir ici: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

29
Aaron Gray

À la lumière des commentaires reçus sur cette réponse (et des votes négatifs inutiles), j'ai modifié ma réponse comme suit:

Il semble que Rails ait maintenant créé un moyen de gérer les polices dans le dossier des actifs. Il s'appelle appelé font-path et fonctionne comme ceci: 

Si vous ajoutez une police personnalisée à votre dossier/assets/fonts, vous pouvez utiliser l’assistant font-path pour accéder aux fichiers qu’il contient. Ceci peut ensuite être utilisé Dans vos feuilles de style et autres éléments à l'aide de l'aide font-path:

|-app/
|---assets/
|-----fonts/
|-----images/
|-----javascripts/
|-----stylesheets/

@font-face {
  font-family:'icofonts';
  src:font-url('icofonts.eot');
  src:font-url('icofonts.eot?#iefix') format('embedded-opentype'),

  ...
}

Cela fonctionne pour les actifs précompilés (ce que fait de toute façon Heroku) et pour les actifs statiques. Si vous voulez le moyen de réaliser cela avant Rails 4, référez-vous à ma réponse ci-dessous:

Nous avons des polices qui travaillent sur Heroku ici: http://firststop.herokuapp.com (c'est toujours en démo)

Voici notre CSS pour cela:

#assets/application.css
/*-- Akagi Font --*/
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-th-webfont.eot'),
    src: url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-th-webfont.woff') format('woff'),
         url('fonts/akagi-th-webfont.ttf') format('truetype'),
         url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;

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

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

}

Nous avons mis nos polices dans le /stylesheets/fonts folder

Nous faisons juste le travail de polices de précompilation standard pour que tous les CSS travaillent sur Heroku, et cela fonctionne. Je soupçonne que vos chemins ne sont pas corrects. Peut-être que essayez de déplacer votre répertoire de polices dans votre dossier/assets/stylesheets :)

13
Richard Peck

En fait, je viens d’essayer la solution proposée dans ce commentaire , et cela a parfaitement fonctionné. Il semble qu'il ne vous reste plus qu'à changer le regex de l'instruction de précompilation pour que Heroku puisse trouver correctement le bien.

c'est-à-dire changer config.assets.precompile += %w( .svg .eot .woff .ttf ) en config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/.

Edit : Il peut également être nécessaire d’ajouter Rails_ENV=production lorsque vous exécutez la tâche rake assets:precompile, conformément à la documentation de Heroku.

9
nicohvi

Essayez de supprimer /assets/ de tous vos chemins de polices. 

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

Essayez également de supprimer scaffolds.css s'il est dans assets/stylesheets.

2
Jeremy Green

Rails 4

# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w(.svg .eot .woff .ttf)

# app/assets/stylesheets/foundation-icons.css.scss
@font-face {
  font-family: "foundation-icons";
  src: asset-url("foundation-icons.eot");
  src: asset-url("foundation-icons.eot?#iefix") format("embedded-opentype"),
       asset-url("foundation-icons.woff") format("woff"),
       asset-url("foundation-icons.ttf") format("truetype"),
       asset-url("foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}
2
araslanov_e

J'ai résolu le problème en combinant toutes les réponses et tous les commentaires. Mon exemple utilise les polices Icon Foundation.

Dans votre fichier application.rb, ajoutez ce qui suit:

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

Renommez votre fichier application.css en application.css.scss et utilisez les directives font-url et asset-path:

@font-face {
  font-family: "foundation-icons";
  src: font-url( asset-path("foundation-icons.eot") );
  src: font-url( asset-path("foundation-icons.eot?#iefix") ) format("embedded-opentype"),
       font-url( asset-path("foundation-icons.woff") ) format("woff"),
       font-url( asset-path("foundation-icons.ttf") ) format("truetype"),
       font-url( asset-path("foundation-icons.svg#fontcustom") ) format("svg");
  font-weight: normal;
  font-style: normal;
}
2
Dex

Vous n'avez pas réellement besoin de changer le chemin de regex ou d'actif de précompilation. Essayez de lancer des actifs rake: précompilez en mode production avant de vous engager dans Heroku.

rake assets:precompile Rails_ENV=production

et assurez-vous de référencer vos ressources dans des fichiers CSS à l'aide de la méthode d'assistance asset_path.

comme:

src: font-url('<%= asset_path("foundation-icons.eot")%>');
1
Dennis Hsieh

Vous n'avez pas besoin d'inclure le répertoire /assets/fonts/ dans config.assets.paths. Selon la documentation, tous les répertoires inclus dans app/assets, lib/assets ou vendor/assets sont automatiquement chargés. 

http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

Les actifs de pipeline peuvent être placés dans une application à l’un des trois emplacements suivants: app/assets, lib/assets ou vendor/assets.

[...]

Outre les chemins d'accès assets/* standard, des chemins d'accès supplémentaires (complets) peuvent être ajoutés au pipeline dans config/application.rb.

config.assets.paths << Rails.root.join("lib", "videoplayer", "flash")

Essayez d’exécuter Rails.application.class.config.assets.paths dans la console et vous verrez un tableau de tous les répertoires dans /assets. Si vous ajoutez un autre répertoire et redémarrez la console, celui-ci sera automatiquement inclus dans le tableau et le contenu sera servi en tant qu'actifs.

Vous n'avez même pas besoin de config.assets.precompile += %w( .svg .eot .woff .ttf ) car tous les fichiers autres que js-css sont déjà inclus via le matcher par défaut Proc. 

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

Le matcher par défaut pour la compilation de fichiers comprend application.js, application.css et tous les fichiers autres que JS/CSS (cela inclut automatiquement tous les actifs image):

[ Proc.new { |path| !%w(.js .css).include?(File.extname(path)) }, /application.(css|js)$/ ]

Essayez d’ajouter uniquement le répertoire des polices dans app/assets/ en laissant toute la configuration par défaut et déployez votre application sur heroku. 

1
marquez
  1. Renommez votre fichier .css en .css.erb
  2. Remplacez tous les url('/assets/icomoon.eot') par url(<%= asset_path 'icomoon.eot' %>), etc.

Vous pouvez obtenir le même résultat en convertissant votre fichier css en SASS/SCSS et en utilisant font-url() helper au lieu de url().

J'ai essayé cela avec Rails 4 et cela fonctionne même sans les éléments que vous avez ajoutés à production.rb/application.rb. 

1
mrt

Après avoir essayé toutes les méthodes ci-dessus, aucune n’a fonctionné pour moi, mais c’est ainsi que j’ai résolu mon problème de police. Si les polices fonctionnent en mode de développement, il suffit de faire 

config.assets.compile = true

dans

config\environments\production.rb
0
Shawn