Siquando-Forum.de

#1

Hallo Ihr,

gerade arbeite ich an einer kleinen Website mit Orlando. Die Titel sollen mit einem speziellen Font gezeigt werden. Ich habe mir vom Webfont in tff eine woff-Datei konvertiert, sie in kristen-regular-webfont.woff benannt und in das Verzeichnis ngplugintyphography/fonts geladen. Anschließend habe ich eine CSS-Datei wie folgt erstellt:

@font-face {
  font-family: 'Kristen ITC';
  font-style: normal;
  font-weight: normal;
  src: local('Kristen ITC'), local('Kristen-ITC'), url(./../fonts/kristen-regular-webfont.woff) format('woff');
}

Die CSS-Datei liegt unter dem Namen kristenitc.css in ngplugintyphography/css/. Anschließend in ngpluginlayout/styles/Orlando/typography.xml alle Einträge von Roboto Slab für h1 abgeändert in Kristen ITC.

Ich habe sicherlich etwas übersehen aber die Schrift wird mir unter Schriftformate nicht angezeigt. Hat jemand von Euch das schon mal erfolgreich durchgzogen und hat einen Tipp?

Vielen Dank im voraus fürs mitdenken!

Gutes Gelingen!
Regine

Diepold-Webdesign

10.10.2015, 13:23

#2

Hallo Regine,

ich freue mich sehr, Dich mal wieder hier zu sehen! :-)

Es ist leider nicht möglich, weitere Fonts so einzubinden, daß sie in Pro Web unter "Schriftformate" angezeigt werden. Warum?

Es wäre zwingend notwendig, daß der gewünschte Font auf dem Windows-System auch als TrueType-Font vorliegt.
Es wäre ebenfalls zwingend notwendig, daß Siquando diesen TrueType-Font auch nativ unterstützt und in Pro Web in der Auswahlliste zur Verfügung stellt.

Punkt 1 könntest Du sicherlich irgendwie selbst hinbekommen. Bzgl. Punkt 2 besteht leider keine für Dich/uns umsetzbare Lösung. Hierzu wärst Du zwingend auf die technische Unterstützung von Siquando angewiesen.

Ersatz-Lösung:

Binde den gewünschten Font ausschließlich via CSS in Dein Projekt ein. Schau Dir unter www.warmers.de den Quelltext und dort die inline-Styles im <head>...</head> an. Dort habe ich mir für mein Projekt die Schriftart "Segoe UI" (sowie einige Ersatz-Schriftarten, falls "Segoe UI" auf dem System nicht vorliegt) von Hand eingebunden.

Viel Erfolg! ;-)

Viele Grüße,
Volker

Über mich · Volker W. Musik & Sounds · Facebook · Twitter · Instagram · StayFriends · LinkedIn · XING

Hilfe-Anfragen via PN, E-Mail, Kontaktformular usw. werden nicht beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

10.10.2015, 13:40

#3

Hallo Volker,

ich denke schon dass das so klappen müsste - vermutlich habe ich irgendwo einen Fehler gemacht oder etwas übersehen. Damit sollte die Schrift eigentlich in der Auswahl auftauchen.

Mit der Einbindung zwischen den Head-Tags funktioniert das natürlich, danke für diesen Hinweis! Leider handelt es sich auch noch um mehrere Schriften die in verschiedenen Größen zur Verfügung gestellt werden sollen. Nicht wirklich spaßig. Wenn ich Zeit habe, schaue ich mir das noch mal ganz in Ruhe an.

Gutes Gelingen!
Regine

Diepold-Webdesign

10.10.2015, 21:22

#4

Hallo Regine,

ich bin der Meinung, daß es nicht möglich ist, weitere Schriften so einzubinden, daß sie auch in der Schriftauswahl von Pro Web zur Verfügung stehen. Im Gegensatz zu den dort befindlichen Schriften sind bspw. auf meinem System ja noch viel mehr TrueType-Fonts vorhanden, bspw. die Familie "Segoe UI" und andere.

Sprich Siquando stellt in der Auswahlliste nur bestimmte TrueType-Fonts zur Verfügung, und zwar Arial, Calibri, Cambria, Corbel, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS und Verdana. Viele andere TTFs wie eben Segoe UI jedoch nicht. Alle diese Schriften stehen in Windows (ab Vista) aber standardmäßig bereits zur Verfügung.

D.h. das Hinzufügen irgendwelcher weiteren TTFs in den Windows Fonts-Ordner (C:\Windows\Fonts) führen nicht dazu, daß Pro Web diese anzeigt, und zwar unabhängig davon, ob diese auf dem Server als WOFF eingebunden sind oder nicht (was ja bei Standard-Systemfonts wie den o.g. auch nicht notwendig ist, sondern lediglich bei spezielleren Schiften wie Dosis, Lobster, Railway usw.).

Falls Du jedoch wider Erwarten doch noch eine Lösung zu dieser Angelegenheit finden solltest, wäre ich Dir natürlich sehr dankbar, wenn Du diese dann hier mitteilst.

Danke Dir!

Dir einen schönen Rest-Sonntag. :-)

Viele Grüße,
Volker

Über mich · Volker W. Musik & Sounds · Facebook · Twitter · Instagram · StayFriends · LinkedIn · XING

Hilfe-Anfragen via PN, E-Mail, Kontaktformular usw. werden nicht beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

11.10.2015, 16:00

#5

Hallo Volker,

ich denke inzwischen auch dass man es sich einfacher machen sollte und die entsprechenden .woff Dateien einkauft. Wenn auch Google Fonts die Schrift nicht anbietet, liegen wohl ohne lizenzrechtliche Probleme vor wenn man die Schriften einfach in das Programm "würgt".

TTF Dateien einzubinden macht keinen Sinn - ich habe es mit Kristen mal getestet weil lt. Auftraggeber der Font auch bei Windows eingebunden ist - aber natürlich wird so etwas schon auf einem beliebigen Tablet oder Handy gar nicht angezeigt.

Geht also nur durch externes Hosting wie von Google oder Einkauf der Schrift und Hosting auf dem eigenen Webserver.

Gutes Gelingen!
Regine

Diepold-Webdesign

Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Regine« (11.10.2015, 20:51)

11.10.2015, 20:51

#6

Hallo Regine,

von den lizenzrechtlichen Angelegenheiten mal völlig abgesehen... - m.M.n. ist es technisch nicht möglich, irgendwelche anderen Schriften in die Auswahlliste von Pro Web zu bekommen als die von Siquando vorgesehenen (und allgemein allen Pro Web Usern bekannten).

Schade!

Da bleibt nur die manuelle Einbindung via CSS, welche aber natürlich problemlos funktioniert.

Viele Grüße,
Volker

Über mich · Volker W. Musik & Sounds · Facebook · Twitter · Instagram · StayFriends · LinkedIn · XING

Hilfe-Anfragen via PN, E-Mail, Kontaktformular usw. werden nicht beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

11.10.2015, 21:06

#7

Hallo Volker,

natürlich gibt es einen Weg, die Schriften einzubinden - bisher ist uns nur nicht komplett bekannt, welche Dateien und ggf. Datenbanktabellen angesprochen werden.

Die Lösung per CSS gefällt mir nicht wirklich aber meine Zeit kostet auch Geld. Vielleicht bekommen wir ja mal eine Routine, die .woff Dateien installiert.

Gutes Gelingen!
Regine

Diepold-Webdesign

11.10.2015, 21:48

#8

Hallo Regine,

das sehe ich nicht so, da ich aus DB-Zeiten, in welchen ich (wie alle DB-Setups) auch das Setup von NG erstellt habe, die Struktur ziemlich genau kenne.

Alle Nicht-Standard-Schriften (z.B. Dosis, Lobster, Railway usw.) mußten mit dem Setup als TTFs mitinstalliert werden, alle Standard-Schriftarten (z.B. Arial, Times New Roman, Verdana usw.) natürlich nicht. Die nahm NG sich einfach aus dem System.

Aber halt nicht alle, denn Standard-Schriften wie z.B. Arial Black, Comic Sans MS, Consolas, Impact, Lucida Console oder Segoe UI werden in der Auswahlliste nicht angezeigt, obwohl sie genau wie die o.g. anderen Standard-Schriften auf dem System ja vorhanden sind.

Sprich die in der Auswahlliste vorhandenen Schriften sind von Siquando so ausgewählt bzw. vorgesehen. Weitere bekommt man / bekommen wir da nicht rein. Das kann nur Siquando selbst.

Wie gesagt - falls Du das dennoch hinbekommst, wäre ich Dir sehr dankbar über Deinen Bericht / Dein HowTo über die genaue Vorgehensweise.

Danke Dir!

Viele Grüße,
Volker

Über mich · Volker W. Musik & Sounds · Facebook · Twitter · Instagram · StayFriends · LinkedIn · XING

Hilfe-Anfragen via PN, E-Mail, Kontaktformular usw. werden nicht beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

11.10.2015, 22:25

#9

Schon Mal so probiert ?

ngplugintypography/css/
öffnen und ganz am Anfang diese Zeile einfügen:
@import url("kristen.css");

kristen.css anlegen und woff,tt,svg,eot in Design kopieren:
@font-face {
font-family: 'KristenITCwebfontSansRegular';
src: url('../<cc:print value="&Kristen-ITCeot.url">');
src: url('../<cc:print value="&Kristen-ITCeot.url">#') format('eot'),
url('../<cc:print value="&Kristen-ITCwof.url">') format('woff'),
url('../<cc:print value="&Kristen-ITCttf.url">') format('truetype'),
url('../<cc:print value="&Kristen-ITCsvg.url">#kristen-regular-webfontSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}

HTML, BODY, TD, INPUT, SELECT, TEXTAREA {
font-family :'KristenITCwebfontSansRegular', Arial, Helvetica, sans-serif;
font-size: 18px;
}

oder Ähnliches.....

ngplugintypography/css/
CSS entsprechend der Ausgabe natürlich noch anpassen.

12.10.2015, 13:21

#10

Wir sind im Bereich Designs & Anpassungen [ Siquando Pro Web ]. Bei Siquando Web oder Shop 8 wäre es in dieser oder ähnlicher Form sicherlich möglich, auch als Combo bzw. DropDown zur Auswahl.

Bei Pro Web hingegen ist mir kein Weg bekannt, wie man eigene Fonts in die Auswahl bekommt, es sei denn man ersetzt bestehende, aber das halte ich für irreführend.

Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

12.10.2015, 14:23

#11

Es gibt hierfür ein kleiner Trick, mit dem es dennoch möglich ist das System teilweise auszutricksen. Es wird allerdings im SPW Interface jedoch nicht sichtbar, doch die Einbindung erfolgt dennoch sauber. Als Testschrift habe ich die Lizenzfreie Schrift "Rabiohead" verwendet, da man den Unterschied gut erkennen kann.

Beispielseite >>

"Willkommen" wird dann tatsächlich richtig eingebunden.

1.) Wie Regine, habe ich die Schrift (rabiohead-webfont.woff) im Font-Verzeichnis eingebunden - auf dem Server unter:

/classes/plugins/ngplugintypography/fonts/

2.) Folgende rabiohead.css-Datei habe ich im CSS-Ordner eingefügt (/classes/plugins/ngplugintypography/css/)

@font-face {
  font-family: 'RabioheadRegular';
  font-style: normal;
  font-weight: normal;
  src: local('Rabiohead'), local('Rabiohead'), url(./../fonts/rabiohead-webfont.woff) format('woff');
}

3.) Der letzte Schritt ist über die PHP-Datei ngfontutil.php bei der Zuweisung der CSS-Datei (/classes/util/) beim Constructor:

private function __construct() {
		$this->fonts ['Arial'] = array ('stack' => 'Arial,\'Helvetica\',sans-serif' );
		$this->fonts ['Calibri'] = array ('stack' => 'Calibri,Candara,\'Segoe\',\'Segoe UI\',Optima,Arial,sans-serif' );
		$this->fonts ['Cambria'] = array ('stack' => 'Cambria,Georgia,serif' );
		$this->fonts ['Corbel'] = array ('stack' => 'Corbel,\'Lucida Grande\',\'Lucida Sans Unicode\',\'Lucida Sans\',Verdana,sans-serif' );
		$this->fonts ['Courier New'] = array ('stack' => '\'Courier New\',Courier,monospace' );
		$this->fonts ['Georgia'] = array ('stack' => 'Georgia,Times,\'Times New Roman\',serif' );
		$this->fonts ['Lato'] = array ('stack' => 'Lato,Verdana,Helvetica,sans-serif', 'style' => 'lato' );
		$this->fonts ['Open Sans'] = array ('stack' => '\'Open Sans\',Verdana,Helvetica,sans-serif', 'style' => 'opensans' );
		$this->fonts ['Tahoma'] = array ('stack' => 'Tahoma,Verdana,Segoe,sans-serif' );
		$this->fonts ['Times New Roman'] = array ('stack' => '\'Times New Roman\',Times,Georgia,serif' );
		$this->fonts ['Trebuchet MS'] = array ('stack' => '\'Trebuchet MS\',\'Lucida Grande\',\'Lucida Sans Unicode\',\'Lucida Sans\',Tahoma,sans-serif' );
		$this->fonts ['Verdana'] = array ('stack' => 'Verdana,Geneva,sans-serif' );
		$this->fonts ['Dosis'] = array ('stack' => 'Dosis,Verdana,Helvetica,sans-serif', 'style' => 'dosis' );
		$this->fonts ['Raleway'] = array ('stack' => 'Raleway,Verdana,Helvetica,sans-serif', 'style' => 'raleway' );
		$this->fonts ['Roboto Slab'] = array ('stack' => '\'Roboto Slab\',Verdana,Helvetica,sans-serif', 'style' => 'robotoslab' );
		$this->fonts ['Arvo'] = array ('stack' => 'Arvo,Verdana,Helvetica,sans-serif', 'style' => 'arvo' );
		$this->fonts ['Fjalla One'] = array ('stack' => '\'Fjalla One\',Verdana,Helvetica,sans-serif', 'style' => 'fjallaone' );
		$this->fonts ['Archivo Black'] = array ('stack' => '\'Archivo Black\',Verdana,Helvetica,sans-serif', 'style' => 'archivoblack' );
		$this->fonts ['Lobster'] = array ('stack' => 'Lobster,Verdana,Helvetica,sans-serif', 'style' => 'lobster' );
		$this->fonts ['Source Sans Pro'] = array ('stack' => '\'Source Sans Pro\',Verdana,Helvetica,sans-serif', 'style' => 'sourcesanspro' );
		$this->fonts ['PT Sans'] = array ('stack' => '\'PT Sans\',Tahoma,Helvetica,sans-serif', 'style' => 'ptsans' );
		$this->fonts ['Roboto'] = array ('stack' => 'Roboto,Tahoma,Helvetica,sans-serif', 'style' => 'roboto' );
		$this->fonts ['Signika'] = array ('stack' => 'Signika,Tahoma,Helvetica,sans-serif', 'style' => 'signika' );
 
	}

Ich habe mir eine Schrift ausgesucht die ich nicht benötige und habe hier am Beispiel von Signika folgendes geändert:

...
...
//		$this->fonts ['Signika'] = array ('stack' => 'Signika,Tahoma,Helvetica,sans-serif', 'style' => 'signika' );
		$this->fonts ['Signika'] = array ('stack' => '\'RabioheadRegular\',Tahoma,Helvetica,sans-serif', 'style' => 'rabiohead' );
...
...

Dadurch erfolgt eine andere Zuweisung. Im SPW wird bei den Schriften immernoch Signika angezeigt, aber durch diese neue Schrift und CSS-Zuweisung, geschieht dennoch die gewollte Darstellung und Einbindung der gewünschten Schrift ...

letztendlich was Thomas bereits sagte:

" es sei denn man ersetzt bestehende ..."

Bye

≡ ••• W2D11 Responsiv COOPERATIVE PRAXIS SÜDWEST ••• ≡ ••• Wordpress Responsiv MEDIATION FREIBURG ••• ≡

Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »harlekin8« (12.10.2015, 15:10)

12.10.2015, 14:57

#12

Ihr seid einfach großartig, vielen Dank für den umfangreichen Input!

Ich habe also eine Lizenz für die .woff Datei und Einbindung per CSS erstanden und es so gemacht wie Volker vorgeschlagen hat.

Da ein kleiner Buchshop über "Sofort Kaufen" eingebunden ist, habe ich das Script von Thomas: http://forum.w2d-siquando.de/Forum/Designs_Anpassungen_Siquando_Pro_Web_/Orlando_Startbild_auf_jeder_Seite-841 eingebunden, mit dem bei Seitenwechsel innerhalb der Kaufabwicklung nicht manuell wieder die Grafik hoch gescrollt werden muss.

Zu guter letzt fehlte mir noch ein "Nach oben" Button den ich dann auch noch in die Seiten integriert habe, die Grafikvorlage war ja schon vorhanden.

Gutes Gelingen!
Regine

Diepold-Webdesign

Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Regine« (13.10.2015, 09:19)

12.10.2015, 16:40

Die Kompetenz-Community für SIQUANDO Web / Shop / Pro und DATA BECKER w2d / s2d / NG

[Erledigt] Orlando - Fonts ergänzen

Regine (†)

Volker W.

Regine (†)

Volker W.

Regine (†)

Volker W.

Regine (†)

Volker W.

Unbekannt

Thomas

harlekin8

Regine (†)