Jede beliebige Schriftart in die Webseite einbinden, irgendwo hängts

Deutsches Forum
1

Hallo,
ich hänge gerade an dem Versuch, eine eigene Schriftart in die Website einzubinden.
Hat damit schon jemand Erfahrung? Es sollte eigentlich ganz einfach sein, doch ich weiss nicht, wie ich das folgende aus dem Tutorial in mein css umsetzen muss:

Link zum relativ kurzen Tutorial:

Ich habe die beiden Dateien “typeface-0.15.js” und meine Schrift “meineSchrift_regular.typeface.js” im Theme-Ordner “css” gespeichert.
2.
In die Datei _header.tpl folgendes reingeschrieben:
<script type=”text/javascript” src="[{ $oViewConf->getResourceUrl() }]typeface-0.15.js”></script>
<script type=”text/javascript” src="[{ $oViewConf->getResourceUrl() }]meineSchrift_regular.typeface.js”></script>

Hier weiss ich nicht weiter:

  1. aus Tutorial:
    <!– go ahead and specify typeface.js fonts with CSS –>
    <div class=”myclass typeface-js” style=”font-family:meineSchrift">

Wie kann ich in die oxid.css oder gezielt in der Datei “topcategories.tpl” angeben, dass er die Klasse “myclass typeface-js” und den style übernehmen soll.
MeineSchrift soll sich auf die Navigation auswirken.
Zeile 12 in Datei "topcategories.tpl:
<ul id=“navigation” class=“sf-menu”>

Hoffe auf Unterstützung.
Herzlichen Dank
Grüße, Sandra

2

Du musst anstatt “myclass” die gewünschte Klasse angeben - welche das ist für die Beschriftung der Topkategorien findest Du mit Firebug heraus.

Oder Du verwendest dieses Modul, das für die Beschriftung Grafiken verwendet:

aktiviert wird es mit oxoutput => sleightofhand/Sleightofhand_Oxoutput

3

Ich habe meine Schriftarten einfach ins css eingebunden, klappt ganz hervorragend. Nur leider nicht auf der Startseite. Hat da jemand ne Idee, woran es liegen könnte? Kommt auch bei Reload nicht, erst auf der nächsten Seite, die man betritt, völlig egal welche. :confused:

4

Ohne die Seite sehen/prüfen zu können, kann man nur raten…
Ich würde mal sagen fehlerhaft relativ verlinkt…

5

Naja, ich hab ja nur die Schriften in den css Ordner hochgeladen und ins oxid.css eingebunden. Scheinbar wird die Startseite schon aufgebaut, bevor das css gelesen wird?

6

Hallo!
Ihr habt vielleicht mitbekommen, dass in Österreich ein Anwalt mehrere Betreiber (lt. eigenen Angaben 10000) von Websiten mit Kostenforderungen abmahnt, weil diese GoogleFonts verwenden.
Ich habe noch die OXID-Version 4.10.8 (weil das Update auf die Version 6 für mich zu schwierig/teuer war). In welcher Datei (Flow-Theme) kann ich die Schriftarten auf lokale Fonts ändern?
Danke und LG
Michael

7

Moin :slight_smile:

in der komprimierten styles.min.css werden die Fonts zu Beginn referenziert https://github.com/OXID-eSales/flow_theme/blob/master/out/flow/src/css/styles.min.css

Die OXID eSales Standard Themes arbeiten mit grunt der Ablauf um diese zu ändern kannst unter GitHub - OXID-eSales/flow_theme: OXID Flow Responsive Theme lesen oder noch einfacher kannst es Dir über Child-Theme machen und styles.min.css Datei komplett durch Deine eigene CSS-Datei ersetzen.

8

Danke für die Antwort!
Die styles.min.css hatte ich schon offen, jedoch kann ich “google” wenn ich danach suche nicht finden. Wird das eventuell über eine Art weiterleitung gemacht?
Ich befürchte, dass die Lösungsvorschläge meine technischen Fähigkeiten übersteigen…
Es wäre halt sehr schade, da ich wirklich viel Zeit in den Aufbau investiert habe (auch weil wegen eines Fehlers zweimal) und jetzt scheitert alles wiedereinmal an den großen Konzernen…
LG

9

Das kann ich nicht beantworten, weil wahrscheinlich die Version die einsetzt sehr alt und kann abweichen. Dort brauchst letztendlich professionelle Unterstützung. Wo welche findest ist unter OXID Forge – Die Knowledge Base rund um den OXID eShop vermerkt.

10

Hallo Michael,

der Verweis auf die Google Font ist im 4er Shop beim Flow Theme in dem Theme
in der Datei base.tpl

[{block name="base_fonts"}]
            <link href='https://fonts.googleapis.com/css?family=Raleway:200,400,700,600' rel='stylesheet' type='text/css'>
        [{/block}]

Dort kannst du die Font entweder ganz rausnehmen oder sie auf deinen Webserver kopieren und dann den Link einfach auf deinen Server zeigen lassen.
Dann ist das ganze auch nicht mehr abmahnfähig.

Viele Grüße,
(auch) Michael

1 Like
11

Danke an Alle die hier so hilfreich geholfen haben!!!
LG
Michael

1 Like
12

Moin,
ich komme damit nicht so ganz klar. Muss ich noch irgendwo anders was ändern? Da mein Shop dann sonst die Seiten nicht findet.
<link href='../fonts/css?family=Raleway:200,400,700,600' rel='stylesheet' type='text/css'>
und wo müsste ich die anweisung @font-face {
font-family: ‘Raleway’;
font-style: normal;
font-weight: 200;… einfügen?
Fonts habe ich runtergeladen und in den Ordner /fonts gelegt.
Danke
und Grüß John

13

Ich hate auch de Frage gestelt:

Dafür musst eine neue CSS-Datei anlegen und einbinden.
siehe: downloads.foxido.de/Font-Fix.zip
Font-Fix.zip\copy\Application\Views\flow\tpl\layout/base.tpl

In wave funktioniert das etwas anders (s. readme.txt)

14

OK, schade der Link funktioniert leider nicht .-(

15

? https? Also bei mir geht der Link. Und hier wird da als Link doppelt https vorangesetzt. Musst koppieren und im Browser einfügen.

16

Ja, sorry ich Trottel, Danke für die Hilfe

17

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.