Verwenden von Schriftarten mit der Rails-Asset-Pipeline

345

Ich habe einige Schriftarten in meiner Scss-Datei wie folgt konfiguriert:

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

Die eigentliche Schriftartdatei wird in / app / assets / fonts / gespeichert.

Ich habe config.assets.paths << Rails.root.join("app", "assets", "fonts")meiner application.rb-Datei hinzugefügt

und die kompilierte CSS-Quelle lautet wie folgt:

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

Aber wenn ich die App starte, werden die Schriftdateien nicht gefunden. Die Protokolle:

GET "/assets/icoMoon.ttf" für 127.0.0.1 wurde am 05.06.2012 um 23:21:17 Uhr gestartet. +0100 Serviertes Asset /icoMoon.ttf - 404 Nicht gefunden (13 ms)

Warum reduziert die Asset-Pipeline die Schriftdateien nicht auf nur / Assets?

Irgendwelche Ideen Leute?

Herzliche Grüße, Neil

Zusatzinformation:

Wenn ich die Rails-Konsole auf Assets-Pfade und Asset-Vorkompilierung überprüfe, erhalte ich Folgendes:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil
rctneil
quelle
3
Sie haben einen font-urlHelfer in SCSS in Rails.
Hauleth
Das macht leider keinen Unterschied. Daher steht meine Frage immer noch
rctneil
Ich habe unter stackoverflow.com/a/40898227/1197775 einen allgemeinen Weg zur Diagnose und Lösung dieses Problems geschrieben .
Websites

Antworten:

651
  1. Wenn sich Ihre Rails-Version zwischen > 3.1.0und befindet < 4, platzieren Sie Ihre Schriftarten in einem der folgenden Ordner:

    • app/assets/fonts
    • lib/assets/fonts
    • vendor/assets/fonts


    Für Rails - Versionen > 4, Sie müssen Ihre Schriften im platzieren app/assets/fontsOrdner.

    Hinweis: Verwenden Sie die folgende Konfiguration, um Schriftarten außerhalb dieser festgelegten Ordner zu platzieren:

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

    Für Rails-Versionen > 4.2wird empfohlen , diese Konfiguration hinzuzufügen config/initializers/assets.rb.

    Sie können es jedoch auch entweder zu config/application.rboder zu hinzufügenconfig/production.rb

  2. Deklarieren Sie Ihre Schriftart in Ihrer CSS-Datei:

    @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;
    }

    Stellen Sie sicher, dass Ihre Schriftart genau den gleichen Namen hat wie im URL-Teil der Deklaration. Großbuchstaben und Satzzeichen sind wichtig. In diesem Fall sollte die Schriftart den Namen haben icomoon.

  3. Wenn Sie Sass oder Less mit Rails verwenden > 3.1.0(Ihre CSS-Datei hat .scssoder .lessErweiterung), ändern Sie die url(...)in der Schriftartdeklaration in font-url(...).

    Andernfalls sollte Ihre CSS-Datei die Erweiterung .css.erbund die Schriftartdeklaration habenurl('<%= asset_path(...) %>') .

    Wenn Sie Rails verwenden > 3.2.1, können Sie font_path(...)anstelle von verwenden asset_path(...). Dieser Helfer macht genau das Gleiche, aber es ist klarer.

  4. Verwenden Sie schließlich Ihre Schriftart in Ihrem CSS, wie Sie sie im font-familyTeil deklariert haben . Wenn es als groß geschrieben deklariert wurde, können Sie es folgendermaßen verwenden:

    font-family: 'Icomoon';
Ashitaka
quelle
36
Haben Sie Ihren Server neu gestartet?
Ashitaka
9
@NadeemYasin Danke für deinen Kommentar, ich hatte das gleiche Problem. Die Dateinamen enthielten Hypens und als ich entfernte, dass die hier vorgeschlagenen Lösungen funktionierten.
Tsega
35
config.assets.precompile += %w( .svg .eot .woff .ttf )ist eigentlich falsch, müssen Sie hinzufügen, um etwas vorkompilieren, das mit dem vollständigen Asset-Namen übereinstimmt. Ein regulärer Ausdruck hat für mich funktioniert:config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
Sunny
2
Nun, so wie es jetzt ist, funktioniert es für mich. Entweder wird diese Codezeile überhaupt nicht benötigt oder die Art und Weise, wie diese Konfiguration festgelegt wird, hängt von der Rails-Version (oder etwas anderem) ab. @ Jim hatte bereits gesagt, dass er die Konfigurationen in Schritt 2 entfernen musste, also fehlt uns hier vielleicht etwas. Mann, es sollte einfacher sein, Schriftarten mit der Asset-Pipeline zu verwenden.
Ashitaka
3
Schritt 2 sollte entfernt werden. Nach Rails Guides , config.assets.pathsist für Ketten Referenzen, hier nicht relevant. config.assets.precompileist auch nutzlos, weil "Der Standard-Matcher zum Kompilieren von Dateien application.js, application.css und alle Nicht-JS / CSS-Dateien (dies schließt alle Bild-Assets automatisch ein) aus App- / Assets-Ordnern umfasst" (siehe hier )
Eric L.
38

Hier ist eine Wendung:

Sie sollten alle Schriftarten in platzieren , app/assets/fonts/wie sie WILL in Inszenierung und Produktion von get vorkompilierte default-sie werden vorkompilierte erhalten , wenn sie gedrückt Heroku .

Font - Dateien in platziert vendor/assetswerden NICHT werden vorkompilierte auf Staging oder die Produktion von Standard - sie scheitern Heroku . Quelle!

- @plapier, Gedankenbot / Bourbon

Ich bin der festen Überzeugung, dass das Einfügen von Hersteller-Schriftarten vendor/assets/fonts viel sinnvoller ist als das Einfügen app/assets/fonts. Mit diesen 2 zusätzlichen Konfigurationszeilen hat dies für mich (auf Schienen 4) gut funktioniert:

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

- @jhilden, Gedankenbot / Bourbon

Ich habe es auch getestet rails 4.0.0. Tatsächlich reicht die letzte Zeile aus, um Schriftarten sicher aus dem vendorOrdner vorkompilieren zu können . Es dauerte ein paar Stunden, um es herauszufinden. Hoffe es hat jemandem geholfen.

Jibiel
quelle
2
+1 edgeguides.rubyonrails.org/… erklärt das Layout der Asset-Pipeline und hilft zu verstehen, wie dies funktioniert. Richtig ab 04.07.2014
Zachary Moshansky
Benötigen Sie beide? app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts') app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/Ein Kommentar zu einer anderen Antwort besagt, dass letztere sich um beide kümmert.
Ahnbizcad
Selbst in Rails 4.2 + -land denke ich wirklich, dass app/assetsEingaben in Kettenräder und Freunde als Ausgaben verarbeitet werden public/assets, während vendor/assetses immer noch nützlich sein kann, Assets ohne Änderungen bereitzustellen. beide haben ihre Anwendungsfälle. Die gesamte Konvention des Verkaufs basiert auf der Garantie, dass nichts passiert vendor/*. (Ja, vendor/pluginswurde mit Code-Hoarding, Closed-Source-Mania-Pre-Gem-Ära missbraucht und die Leute haben einfach nicht versionierte Js in vendor/assets/javascriptsPre- Bower / Rails-Assets
2
Für diejenigen, die sich fragen; werfen Sie dieses inconfig/initializers/assets.rb
TJ Biddle
23

Wenn Sie nicht verfolgen möchten, wie Sie Ihre Schriftarten verschieben:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}
Nathan Colgate
quelle
1
Ich denke, das ist die beste Lösung. Sofern Sie die Schriftarten nicht erstellt haben, gehören sie wahrscheinlich zu / vendor / assets / fonts - nicht zu / app / assets / fonts. Dieser Ansatz löst für beide, die oben nicht
Casey
5
@Casey: Mit dieser Lösung können Sie Schriftarten in Anbieter / Assets einfügen. @ Nathan Colgate: Dies kann vereinfacht werden, um:config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
Sunny
@ Sunny - ich weiß, deshalb denke ich, es ist besser als die akzeptierte Antwort
Casey
2
Außerdem sollten Sie Ihre Regex mit \ Z beenden
Casey
1
Wie gehen Sie mit den Hashes um, die Rails an die Schriftartdatei anfügt?
James McMahon
21

Sie müssen font-urlin Ihrem @ font-face-Block verwenden, nichturl

@font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

sowie diese Zeile in application.rb, wie Sie erwähnt haben (für Schriftarten in app/assets/fonts

config.assets.paths << Rails.root.join("app", "assets", "fonts")
craic.com
quelle
Sie müssen auch die Vorkompilierung für die Produktion
aktivieren
Auf einer brandneuen Rails 4.2 App funktionierte beides src: url(someFont.ttf)und src: font-url(someFont.ttf)funktionierte beim Einlegen von Dateien app/assets/fonts. Ich habe .scssstandardmäßig Erweiterungen. Ich musste nicht zu den config.assets.paths hinzufügen.
Danny
9

Hier mein Ansatz zur Verwendung von Schriftarten in der Asset-Pipeline:

1) Legen Sie Ihre gesamte Schriftartdatei unter app/assets/fonts/, tatsächlich sind Sie nicht darauf beschränkt, sie unter dem fontsOrdnernamen abzulegen. Sie können einen beliebigen Unterordnernamen eingeben. ZB app/assets/abcoder app/assets/anotherfonts. Aber ich empfehle Ihnen dringend, es app/assets/fonts/für eine bessere Ordnerstruktur unter zu setzen .

2) Verwenden Sie aus Ihrer sass-Datei den sass-Helfer font-path, um Ihre Schriftarten wie folgt anzufordern

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

3) Führen Sie es bundle exec rake assets:precompilevon Ihrem lokalen Computer aus aus und sehen Sie das Ergebnis Ihrer application.css. Sie sollten so etwas sehen:

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

Wenn Sie mehr über die Funktionsweise der Asset-Pipeline erfahren möchten, können Sie die folgende einfache Anleitung besuchen: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

Tim
quelle
5

Ich hatte dieses Problem auf Rails 4.2 (mit Ruby 2.2.3) und musste die font-awesome _paths.scss teilweise bearbeiten, um Verweise auf $fa-font-pathund einen führenden Schrägstrich zu entfernen . Folgendes wurde gebrochen:

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

Und die folgenden Arbeiten:

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

Eine Alternative wäre, einfach den Schrägstrich nach der Interpolation zu entfernen $fa-font-pathund dann zu definieren$fa-font-path als leere Zeichenfolge oder Unterverzeichnis mit Schrägstrich (nach Bedarf) zu definieren.

Denken Sie daran, die Assets neu zu kompilieren und den Server nach Bedarf neu zu starten. Zum Beispiel bei einem Passagier-Setup:

prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart

Laden Sie dann Ihren Browser neu.

markeissler
quelle
5

Ich verwende Rails 4.2 und konnte die fußbaren Symbole nicht anzeigen. Anstelle des (+) in reduzierten Reihen und der kleinen Sortierpfeile, die ich erwartet hatte, wurden kleine Kästchen angezeigt. Nachdem ich die Informationen hier studiert hatte, nahm ich eine einfache Änderung an meinem Code vor: Entfernen Sie das Schriftverzeichnis in CSS. Ändern Sie also alle CSS-Einträge wie folgt:

src:url('fonts/footable.eot');

so aussehen:

src:url('footable.eot');

Es funktionierte. Ich denke, Rails 4.2 übernimmt bereits das Schriftartenverzeichnis. Wenn Sie es also erneut im CSS-Code angeben, werden die Schriftdateien nicht gefunden. Hoffe das hilft.

Brian Doherty
quelle
3

Ich hatte ein ähnliches Problem, als ich kürzlich meine Rails 3-App auf Rails 4 aktualisiert habe. Meine Schriftarten funktionierten nicht richtig wie in Rails 4+, wir dürfen die Schriftarten nur im app/assets/fontsVerzeichnis behalten . Aber meine Rails 3-App hatte eine andere Schriftorganisation. Daher musste ich die App so konfigurieren, dass sie weiterhin mit Rails 4+ funktioniert und meine Schriftarten an einem anderen Ort als app/assets/fonts. Ich habe verschiedene Lösungen ausprobiert, aber nachdem ich ein nicht dummes Digest-Assets- Juwel gefunden hatte, war es einfach so einfach.

Fügen Sie diesen Edelstein hinzu, indem Sie Ihrer Gemfile die folgende Zeile hinzufügen:

gem 'non-stupid-digest-assets'

Dann renne:

bundle install

Fügen Sie abschließend die folgende Zeile in Ihre Datei config / initializers / non_digest_assets.rb ein :

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

Das ist es. Dies hat mein Problem gut gelöst. Hoffe das hilft jemandem, der auf ein ähnliches Problem wie ich gestoßen ist.

KM Rakibul Islam
quelle
3

Hier ist ein Repo, das demonstriert, wie eine benutzerdefinierte Schriftart mit Rails 5.2 bereitgestellt wird, die auf Heroku funktioniert. Es geht weiter und optimiert das Bereitstellen der Schriftarten so schnell wie möglich, so https://www.webpagetest.org/

https://github.com/nzoschke/edgecors

Zu Beginn habe ich Stücke aus den obigen Antworten ausgewählt. Für Rails 5.2+ sollten Sie keine zusätzliche Asset-Pipeline-Konfiguration benötigen.

Asset Pipeline und SCSS

  • Platzieren Sie Schriftarten in app/assets/fonts
  • Platzieren Sie die @font-faceDeklaration in einer scss-Datei und verwenden Sie den font-urlHelfer

Von app/assets/stylesheets/welcome.scss:

@font-face {
  font-family: 'Inconsolata';
  src: font-url('Inconsolata-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Inconsolata";
  font-weight: bold;
}

Mit CORS von CDN servieren

Ich verwende CloudFront, das mit dem Heroku Edge-Addon hinzugefügt wurde .

Konfigurieren Sie zuerst ein CDN-Präfix und Standardheader Cache-Controlin production.rb:

Rails.application.configure do
  # e.g. https://d1unsc88mkka3m.cloudfront.net
  config.action_controller.asset_host = ENV["EDGE_URL"]

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=31536000'
  }
end

Wenn Sie versuchen, von der herokuapp.com-URL auf die CDN-URL auf die Schriftart zuzugreifen, wird in Ihrem Browser ein CORS-Fehler angezeigt:

Der Zugriff auf die Schriftart unter ' https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf ' vom Ursprung ' https://edgecors.herokuapp.com ' wurde durch die CORS-Richtlinie blockiert: Nein 'Zugriffskontrolle zulassen -Origin 'Header ist auf der angeforderten Ressource vorhanden. edgecors.herokuapp.com/ GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net :: ERR_FAILED

Konfigurieren Sie CORS so, dass von Heroku aus auf die CDN-URL auf die Schriftart zugegriffen werden kann:

module EdgeCors
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.middleware.insert_after ActionDispatch::Static, Rack::Deflater

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource "*", headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

Servieren Sie gzip Font Asset

Die Asset-Pipeline erstellt eine .ttf.gzDatei, stellt sie jedoch nicht bereit. Dieser Affen-Patch ändert die gzip-Whitelist der Asset-Pipeline in eine Blacklist:

require 'action_dispatch/middleware/static'

ActionDispatch::FileHandler.class_eval do
  private

    def gzip_file_path(path)
      return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
      gzip_path = "#{path}.gz"
      if File.exist?(File.join(@root, ::Rack::Utils.unescape_path(gzip_path)))
        gzip_path
      else
        false
      end
    end
end

Das ultimative Ergebnis ist eine benutzerdefinierte Schriftartdatei, app/assets/fontsdie aus einem langlebigen CloudFront-Cache bereitgestellt wird.

Noah Zoschke
quelle
2

In meinem Fall wurde die ursprüngliche Frage asset-urlohne Ergebnisse anstelle der einfachen urlCSS-Eigenschaft verwendet. Die Verwendung von asset-urlendete für mich in Heroku. Außerdem legen Sie die Schriftarten im /assets/fontsOrdner fest und rufen auf, asset-url('font.eot')ohne einen Unterordner oder eine andere Konfiguration hinzuzufügen.

Bartoindahouse
quelle
1

Wenn Sie eine Datei mit dem Namen scaffolds.css.scss haben, besteht die Möglichkeit, dass alle benutzerdefinierten Aktionen in den anderen Dateien überschrieben werden. Ich habe diese Datei auskommentiert und plötzlich hat alles funktioniert. Wenn diese Datei nichts Wichtiges enthält, können Sie sie auch einfach löschen!

Katfa
quelle
-7

Platzieren Sie Ihre Schriftarten einfach im Ordner app / assets / fonts und legen Sie den Pfad für das automatische Laden fest, wenn die App den Code in application.rb schreibt

config.assets.paths << Rails.root.join ("App", "Assets", "Schriftarten") und

Verwenden Sie dann den folgenden Code in CSS.

@Schriftart {

 font-family: 'icomoon';
 src: asset-url('icomoon.eot');
 src: asset-url('icomoon.eot') format('embedded-opentype'),
      asset-url('icomoon.woff') format('woff'),
      asset-url('icomoon.ttf') format('truetype'),
      asset-url('icomoon.svg') format('svg');
 font-weight: normal;
 font-style: normal;

}}

Versuche es.

Vielen Dank

Shoaib Malik
quelle
Wie fügt dies etwas zu den vorhandenen Antworten hinzu?
Cimmanon