Webfont einbinden
Eingetragen von DrupalFan (1646)am 14.04.2016 - 20:01 Uhr in
Gegeben ist ein font auf fonts.net.
Die Einbindung kann nur mittels JavaScript erfolgen in der Form
<script type="text/javascript" src="//fast.fonts.net/jsapi/646...2.js"></script>
Dieser Webfont soll in Drupal eingebunden werden. Und danach sollen z. Bsp. alle Text in <p> <body> oder bestimmen div-Klassen in diesem Font dargestellt werden.
Welche Module gibt es dafür und wie wendet man diese an?
Es gibt zwar Module, allerdings kann man anscheinend mit diesen Modulen keine JavaScript-Einbindung vornehmen wie oben gezeigt. Was tun?
Zum Verständnis:
Wenn man den Webfont händisch einbindet, dann kommt im Header der HTML-Datei dieser Aufruf rein
<head>
...
<script type="text/javascript" src="//fast.fonts.net/jsapi/646...2.js"></script>
</head>Danach kann die neue Schriftart direkt in css-Files verwendet werden:
body, p, .testklasse {
font-family:'Helvetica Neu ...';
}Dennoch funktioniert es nicht. Fehlt hier noch etwas, wenn ja was?
Eine andere Art der Einbindung ist diese:
@font-face { font-family: 'meine-schrift';
src: url('pfad/zu/meinerschrift.ttf') format('truetype'); }
Allerdings benötigt man dann den Pfad zu Schrift-Datei, welche aber in dieser Aufgabenstellung nicht vorhanden ist. Es existiert lediglich diese Rescource:
<script type="text/javascript" src="//fast.fonts.net/jsapi/646...2.js"></script>
Wie geht die Einbindung?
- Anmelden oder Registrieren um Kommentare zu schreiben
vielleicht fragst du einfach
am 15.04.2016 - 04:56 Uhr
vielleicht fragst du einfach mal bei fonts.net
C.A.W. Webdesign
ist das wirklich der Code den
am 15.04.2016 - 07:47 Uhr
ist das wirklich der Code den Du zur Einbindung verwenden willst:
<script type="text/javascript" src="//fast.fonts.net/jsapi/646...2.js"></script>Wo soll das hingehen? Da fehlt doch ein http oder https bei src?
Kannst Du den Font in einer plain HTML Seite unabhängig von Drupal mit Deinem Code einbinden? Wenn das funktioniert, weißt Du schon mal dass der Code richtig ist.
Javascript kannst Du in Drupal 8 in den unterschiedlichste Variante einbinden, auch von externen Quellen. siehe: https://www.drupal.org/developing/api/8/assets - Der Titel spricht zwar von Einbindung in Modulen. Du musst aber nicht unbedingt ein eigenes Modul dafür schreiben (wobei das auch nicht schwer ist), sondern kannst es auch im Theme machen.
// ist das neue http:// :-)
am 15.04.2016 - 09:19 Uhr
Hallo Stefan,
ja, der JavaScript Code ist schon okay, in dem Fall reicht das // am beginn. Google mal nach "src="//fast.fonts.net" unter Anfährungszeichen, Du findest 600.000 Ergebnisse, ganz viele Seiten haben das so eingebunden, es ist korrekt.
Natürlich habe ich es auf einer einfachen Seite (plain wie Du sagst) auch getestet, ohne Erfolg.
JavaScript einzubinden ist in Drupal 8 auch nicht schwer, einfach zwischen im Template html.html.twig (wobei es natürlich auch noch andere Varianten gibt).
Es geht also weniger um Drupal, sondern um das Einbinden dieses Webfonts.
Wenn das mit einem Drupal-Modul ginge, dann wäre das auch okay. Die Module bieten aber, das habe ich alles schon geschrieben, nicht dieMöglichkeit dies per JavaScript einzubinden.
Danke.
das it dem // ist also ok.
am 16.04.2016 - 11:45 Uhr
das it dem // ist also ok. Auch wieder was gelernt :-)
Wenn der Font-Anbieter Dir eine Anleitung liefert wie der Font einzubinden ist und diese Anleitung nicht funktioniert, dann ist da wohl was faul und Du solltest den Font-Anbieter ansprechen wie schon von caw angeregt.
@font-your-face-Modul kann auch Schriften von fonts.com (was auch fonts.net ist?), aber in D8 scheint fonts.com noch nicht implementiert zu sein.
Für einige Projekte verwende
am 16.04.2016 - 12:52 Uhr
Für einige Projekte verwende ich das fontyourface Modul:
https://www.drupal.org/project/fontyourface
Du installierst das Modul und aktivierst die Fontquellen.
Man kann dann unter anderem festlegen welche Elemente, Klassen etc. diese Fonts benutzen.
WEBTRANSFORMER