Schriftart in den Shop einbinden Anleitung

Hallo Michael,

vielen Dank für die Anleitung. Sind die Schriftarten denn einfach so nutzbar? Hab mal gelesen, dass man nicht einfach so eine Schriftart nehmen kann, sondern dafür schon eine Lizenz braucht wenn man das gewerblich nutzen möchte. Und was ist mit den Texten im Shop? Es ist schön wenn man das Layout des Shops auf eine andere Schriftart ändern kann, aber das sieht doch sehr bescheiden aus, wenn der Rest solange noch die andere Schriftart aufweist. Habe das gerade mal getestet und eine Handschrift zum Test genommen, das sieht dann sehr unfertig aus, weil der Rest dann noch Verdana ist. Es wäre schön, wenn du den anderen Weg auch erklären könntest, weil so ist es für bestehende Shop leider nicht sofort nutzbar. Natürlich nur, wenn es nicht so aufwendig für dich wäre

Liebe Grüße
Momo

 

Anmerkung: Ich würde die Standardschrift nicht einfach ganz entfernen, sondern neue Schriften hinzufügen. Das geht in dem man die per Pipezeichen in der URL aneinanderhängt, für Roboto und Sail und Arvo zusätzlich wäre das dann:

"https://fonts.googleapis.com/css?family=Roboto:400,700,300,900|Sail|Arvo"

Danach kann man nicht nur die globale Standardschrift im Styleedit ändern, sondern auch gezielt Bereiche mit nur wenig CSS anfassen und eigene Schriften geben.

 

Schriftkombinationen können sehr reizvoll sein und werden sehr häufig auch im Webdesign eingesetzt.
Wenn jemand nicht viel falsch machen möchte: Verschiedene Schnitte aus der gleichen Familie passen immer gut zusammen. Zum Beispiel Alegreya & Alegreya Sans oder Merriweather & Merrieweather Sans usw. Damit Serifenschriften auf dem Bildschirm gut wirken, sind größere Schrifthöhen zu empfehlen.

Links mit Tipps für Google-Font-Kombinationen:
- webdesign-journal.de
- t3n.de

Es ist einfach, verschieden Schriften im Shop zu verwenden. Beispielcode um H1-Überschriften in Schriftart und Farbe zu verändern:

Code:

h1,.h1 {
     font-family: Cinzel;
     font-weight: 800;
     color: #526c87;
}

 

@Andreas S. vielen Dank für den Tipp. Aber ich hab von Schriften so gar keine Ahnung. Was würde denn zu der Verdana gut passen? Dann würde ich meinen Text im Shop (Artikelbeschreibungen und so weiter) in Verdana lassen und nur das was Michael oben beschrieb ändern. Das müsste dann aber zu Verdana passen. Hast du vielleicht eine Idee für mich?

Herzlichen Dank
Momo

 

@Momo Sehr gut dazu passend finde ich die Schrift von deinem Logo. Vielleicht ist diese ja irgendwo als Webfont erhältlich. Wie heißt den die Schriftart? Habe eben bei Google-Fonts und bei der kostenlosen Fonts von Adobe Typekit nachgesehen. Die Auswahl an Handschriften ist leider sehr klein. Am ehesten noch: Handlee von Google und Realign von Adobe. Passen aber nicht wirklich. Und drei verschiedene Schriften zu verwenden - eher schwierig. Eventuell selbst mal bei Google oder typekit.com nach Schriften stöbern und einfach ausprobieren.

 

@michael_76 Als Content-Vorschlag für dein neues Handbuch: interessant wäre eine kleine Aufstellung wie sich die Schriftarten modfizieren lassen: z.B letter-spacing: 3px; text-transform, text-shadow usw. - Wäre praktisch, auch wenn alles leicht im Web zu finden ist.

 

Vielen Dank für deine Mühe. Welche Schrift mein Logo hat, weiß ich leider nicht mehr. War irgendeine Handschriftart. Ich probier deinen Vorschlag mal aus

 

@Andreas S. wie bekomme ich denn die Schrift in die Auswahl für die Artikeltexte? Da kann ich immer nur die Standardschriftarten auswählen Habe das jetzt mal übernommen, aber ich würde es schon schöner finden, wenn es einheitlich wäre.

Wenn du Lust hast, kannst du gern mal schauen: (Link nur für registrierte Nutzer sichtbar.)

Können mir aber auch gern andere Gambioaner erklären

 

Das ist ein Großer Fehler.
Im Textfeld sollte man die Schrift nur angeben, wenn sie vom Standard abweichen soll.
Nimm in den Texten die Schriftauswahl raus (im Quellcode) und lege die Schrift im Style Editor fest.
Dann ist es immer Einheitlich.

 

Dann habe ich den großen Fehler ÜBERALL gemacht ...heul.. das würde wieder wochenlange Arbeit bedeuten. Gibt es eine Möglichkeit es irgendwie komplett auf den Standard zurückzusetzen?

 

Installiere Dir libreOffice, falls du das noch nicht hast,
Lade Dir die Aritkel einmal als csv runter (z.B. Kategorieweise), öffne die Tabelle in libreOffice
nimm da die Schrift / Schriftgröße aus den Beschreibungen raus
<span style="font:..."> DeinText </span>
<span Style="font-size: ...">DeinText </span>
Oder <span style="font:deinText"><span style="fomnt-size:...">DeinText</span></span>
Das rote muss raus.

Dann machst Du eine Sicherung der Datenbank und danach lädst Du die csv wieder hoch.

 

Suchen/Ersetzen ist da dein Freund, aber überlegen. Erstmal einen Artikel so haben, wie du ihn willst, dann die Keule auf alle. Wenn du nämlich weisst was du wie ersetzen willst, kann das klüger sein als allen alten Kram erstmal durcvh ersetzen mit leer rauszulöschen und dann wieder reinzufummeln.

 

Mit dem normalen Office geht das nicht?

 

Ich hab bammel, das ich das verhaue Ich hab mir noch nie CSV runtergeladen und so

Dann bin ich ja gerade dabei die Tabelle in alle Artikel einzuarbeiten. Da gibt es jetzt auch so ein hübsches Mischverhältnis. Schmuck mit allen Unterkategorien hab ich schon und dann noch Schlüsselanhänger Hunde. Alles andere hat noch gar keine Tabelle. Ich hab jetzt bammel, wenn ich das mit der Datenbank mache, das dann nix mehr geht an die Datenbank geh ich nämlich nicht. Ist für mich ein böhmisches Dorf. Bin gerade total überfordert

 

Hallo Wilken,
bezog sich das auf das LibreOffice?

 

@Momo Also die Schrift vom Logo ist die "Brouet Handwriting" und wird von Linotype als Webfont für einmalig 15 US-Dollar angeboten. Dieser würde auf dem Server installiert und mit @font-face eingebunden werden.

Link zur Schrifttype bei Linotype

Wäre zwar etwas Arbeit, bis es geht. Aber deinen Shop optisch nochmals aufwerten. Und es wären dann nur zwei Schriftarten.

Die Wirkung der Schrift würde sich nochmals erhöhen, wenn du nur die Überschriften in Handschrift machst und den Rest in Verdana. Diese ist für kleinere Texte durch die sehr gute Lesbarkeit eher geeignet.

 

Das klingt total prima und da ich sowieso jeden Artikel für die Tabelle anfassen muss, könnte ich auch gleich die feste Schriftart rausnehmen und dann würde das Verdana aus dem Styleeditor genommen, für den Fall, dass ich mich doch mal umentscheide. Das würde dann keinem auffallen, so hätte ich, wenn ich jetzt die Handlee lasse bis zur Fertigstellung immer zwei verschiedene Schriftarten in den Artikeln (Bearbeitet neu - unbearbeitet noch Verdana). Ich habe gerade mal mit Handlee cursiv getestet. Aber da ist die Lesbarkeit wirklich bescheiden.

Was für Arbeit käme denn da auf mich zu? Für mich ist schon das @font-face unbekannt

Wäre das ein Weg, den ich selbst umsetzen könnte?

 

@Andreas S. ich habe den Webfont, weil ich mir mal das Softmaker Handwriting Pack gekauft habe. Hab mal nachgesehen, in dem Verzeichnis gibt es zu dieser Schrift folgendes:

 

Hilfe! Auf was hab ich mich den nun eingelassen... Hab bis jetzt sowas noch nicht gemacht.

Im Pack müssten Demo-Dateien als Anleitung sein?