nicht angemeldet
Rolf B
Gunnar Bittersmann
Auge
Gunnar Bittersmann
Der Martin
Auge
Gunnar Bittersmann
Hallo zusammen!
Ich bin ausgebildete Mediengestalterin, kenne mich so semi-gut mit HTML, CSS und PHP aus, habe an der Erstellung mehrerer Websites mitgewirkt und auch selbst für den Privatgebrauch und zu Testzwecken schon welche erstellt.
Nun geht es aber um eine Website für die Firma, in der ich arbeite. Wir möchten für einen kleinen Kunden eine von mir erstellte Website über STRATO online stellen. Dazu habe ich ein voll funktionsfähiges Template aus meiner alten Agentur (welches ich verwenden darf, war quasi ein Geschenk zum Abschluss) entsprechend umgestaltet. Die Funktionen im Hintergrund habe ich nicht verändert und auch die Ordnerstruktur ist gleich geblieben.
Fonts von Google wurden lokal über CSS eingebunden, die Pfadangabe ist auch richtig, weil ja wie gesagt an der Struktur im Hintergrund nichts verändert wurde, sondern nur das Design - und auf anderen Websites funktioniert das auch.
Jedenfalls haben wir nun das Template auf den STRATO Server geladen und mit der Domain "verknüpft", doch die Fonts werden komplett falsch angezeigt.
Ein Test mit einer anderen Website (Privates Projekt von mir) mit dem selben Template ergibt ebenfalls dieses Problem.
Natürlich liegt nahe, dass es am Template liegt, doch dasselbe Template funktioniert auf einem anderen Server (dem von der Agentur damals) einwandfrei und da wurden die Fonts auch über CSS eingebunden.
Gibt es evtl. ähnliche Erfahrungen und hilfreiche Tipps? Kann es am STRATO Server liegen, dass dieser die Fonts irgendwie anders abruft? Ich habe leider nicht wirklich eine Ahnung ...
Freue mich über Antwort und sende LG
Hallo VRG,
Natürlich liegt nahe, dass es am Template liegt, doch dasselbe Template funktioniert auf einem anderen Server
Das ist schön und gut, hilft aber nicht wirklich. Es kann ja gut sein, dass ihr bei der Adaption des Templates an den neuen Server was verfummelt habt.
Mein erster Ansatzpunkt wäre das Netzwerk-Tab der Browser-Entwicklertools - bekommst Du HTTP 404 Responses für die Font-Dateien?
Rolf
Hi Rolf, danke für die schnelle Antwort!
Tatsächlich habe ich das schon getestet und auch den Cache von verschiedenen Browsern gelöscht: keine Fehlermeldung und trotzdem falsche Fonts. Ich habe auch schon andere Pfadangaben ausprobiert und kann das Problem leider nicht erkennen. :(
Wüsstet Du noch andere Möglichkeiten?
LG
VRG
Hallo VRG,
höchstens noch, dass Du die falschen Fontdateien kopiert hast und nun unter dem Namen Roboto die Pacifico Schrift (oder schlimmeres) ausgeliefert wird.
Ansonsten, nein. Nicht ohne einen Blick auf das corpus erroris 😉.
Verrätst Du uns die URL der betroffenen Seite? Wichtig zu wissen wäre auch, welche Fonts du erwartest und - falls möglich - welche Du bekommst. Kannst Du Screenshots für Soll und Ist erstellen?
Es könnte ja sein, dass es bei mir aus irgendwelchen Gründen richtig aussieht.
Rolf
keine Fehlermeldung und trotzdem falsche Fonts.
Aha.
Wüsstet Du noch andere Möglichkeiten?
Tausende. Drei davon wären, dass Du die falschen Fonts einbindest, dass Dein CMS dieses oder jenes verweigert, dass Deinem CMS ein Plugin fehlt, …
Hallo Raketenwilli,
was mir grad einfällt: was auch sein kann, ist ein serverseitiger Cache (z.B. Varnish), der aggressiv dazwischenfunkt. Das sehen wir dann nicht. Den könnte man durch Dummy-URL Parameter austricksen.
Rolf
@@VRG
Fonts von Google wurden lokal über CSS eingebunden
Das heißt was?
Ihr habt sowas wie
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=…"/>
in euren Seiten eingebaut oder
@font-face {
font-family: …;
src: url(https://fonts.gstatic.com/…);
}
in eurem Stylesheet zu stehen?
Es machen gerade Abmahnungen die Runde, weil Google dadurch Nutzer ausschnüffeln kann, ohne dass diese der Ausschnüffelung zugestimmt hätten.
Webfonts selbst hosten, nicht von Google nehmen!
doch die Fonts werden komplett falsch angezeigt.
Link zur fraglichen Seite? Sonst stochern wir im Dunkeln.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
das glaub ich gerade nicht, weil da "lokal" steht. Aber der Hinweis ist trotzdem einer Überprüfung wert!
Rolf
@@Rolf B
das glaub ich gerade nicht, weil da "lokal" steht.
Da steht aber auch „von Google“.
Wenn mit „lokal“ gemeint ist, dass die Fonts lokal gehostet werden, gut. Dann ist es aber für das Anzeigeproblem völlig irrelevant, ob die Font-Dateien ursprünglich von Google heruntergeladen wurden oder von woanders.
🖖 Живіть довго і процвітайте
Hallo zusammen! Danke für euren Einsatz.
Unsere Fonts sind über CSS @fontface eingebunden, habe den Code vom Google Webfonts Helper:
https://google-webfonts-helper.herokuapp.com/fonts/maven-pro?subsets=latin
Es geht um folgende Testseite(n) https://www.hanki-testet.de/ (Projekt aus der Arbeit, noch im Aufbau)
http://madlverein-rumeltshausen.de/ (Privates Projekt vom Hackerhof auf eine andere Domain zum Testen)
Folgende Screenshots vom IST- und SOLL-Zustand
Im Übrigen arbeite ich nicht mit einem CMS sondern es ist alles handcodiert.
So viel zu den nötigen Infos, die ihr benötigt.
Die Ordnerstruktur sieht im Moment wie folgt aus:
_template (hier liegt unter anderem die index-Datei) → system (hier liegen auch js-Dateien) → css (hier liegt die CSS-Datei und Dateien für Responsive Design) → fonts
Die Pfadangabe für die eingebundenen Fonts (bei hanki-testet) ist: url('fonts/maven-pro-v32-latin-ext_latin-regular.eot?#iefix')
habe es aber auch schon so probiert:
url('../fonts/maven-pro-v32-latin-ext_latin-regular.eot?#iefix')
oder so url('../../fonts/maven-pro-v32-latin-ext_latin-regular.eot?#iefix')
und den Ordner jeweils verschoben, sodass der Pfad passt, aber es erscheinen trotzem nur die Default-Fonts.
Hallo
Es geht um folgende Testseite(n) https://www.hanki-testet.de/ (Projekt aus der Arbeit, noch im Aufbau)
Die Entwicklertools von Firefox sagen, dass für body die Schrift „Maven“ benutzt wird.
http://madlverein-rumeltshausen.de/ (Privates Projekt vom Hackerhof auf eine andere Domain zum Testen)
Hier sagen die Entwicklertools, die benutzte Schrift sei „Poppins“.
Folgende Screenshots vom IST- und SOLL-Zustand
Die Schrift auf der Spengler-Seite sieht, zumindest auf den ersten Blick, für mich so aus, wie sie soll.
edit: Jetzt erst habe ich in dein benachbartes Posting hinein geschaut. Da ist wohl der Screenshot für den Sollzustand zu sehen. Und nein, so sieht das nicht aus, wenn ich die Seite aufrufe.
Tschö, Auge
@@Auge
Es geht um folgende Testseite(n) https://www.hanki-testet.de/ (Projekt aus der Arbeit, noch im Aufbau)
Die Entwicklertools von Firefox sagen, dass für
bodydie Schrift „Maven“ benutzt wird.
Nein. Bei mir nicht:
Du hast in der mittleren Spalte geschaut, welche Schrift verwendet werden sollte, anstatt rechts, welche Schrift verwendet wird?
🖖 Живіть довго і процвітайте
Die Konsole „sagt“:
GET https://www.hanki-testet.de/%3C?php%20echo%20$homelink;%20?%3Esystem/scripts/apc/apc.css net::ERR_ABORTED 404
www.hanki-testet.de/:631 GET https://www.hanki-testet.de/system/scripts/lightslider/dist/css/lightslider.min.css net::ERR_ABORTED 404
www.hanki-testet.de/:632 GET https://www.hanki-testet.de/system/scripts/lightslider/dist/js/lightslider.min.js net::ERR_ABORTED 404
(index):599 Uncaught SyntaxError: Unexpected token '<' (at (index):599:4)
Ein paar Pics vom „HTML“-Quältext, den der Abruf liefert(e)
Hm. Das PHP hat da nichts zu suchen.
Hallo,
GET https://www.hanki-testet.de/%3C?php%20echo%20$homelink;%20?%3Esystem/scripts/apc/apc.css net::ERR_ABORTED 404 www.hanki-testet.de/:631 GET https://www.hanki-testet.de/system/scripts/lightslider/dist/css/lightslider.min.css net::ERR_ABORTED 404 www.hanki-testet.de/:632 GET https://www.hanki-testet.de/system/scripts/lightslider/dist/js/lightslider.min.js net::ERR_ABORTED 404 (index):599 Uncaught SyntaxError: Unexpected token '<' (at (index):599:4)Ein paar Pics vom „HTML“-Quältext, den der Abruf liefert(e)
Hm. Das PHP hat da nichts zu suchen.
mit anderen Worten: Auf dem Server wird kein PHP ausgeführt.
Einen schönen Tag noch
Martin
Hallo
Hm. Das PHP hat da nichts zu suchen.
mit anderen Worten: Auf dem Server wird kein PHP ausgeführt.
Oder der OP hat seínen Testcode aus einem PHP-basierten HTML-Dokument entnommen und als *.html gespeichert, weswegen der PHP-Code nicht ausgeführt wird, obwohl es der Server zuließe.
Egal wie, der Code hat dort, auch in einer Testumgebung, nichts zu suchen. Entweder es wird dafür gesorgt, dass der PHP-Code ausgeführt wird, oder er wird aus dem Testdokument entfernt.
Tschö, Auge
mit anderen Worten: Auf dem Server wird kein PHP ausgeführt.
Jepp. Jedenfalls nicht das sichtbar gewordene.
@@VRG
Es geht um folgende Testseite(n) https://www.hanki-testet.de/ (Projekt aus der Arbeit, noch im Aufbau)
In deinem Stylesheet https://www.hanki-testet.de/system/css/style.css hast du zu stehen:
/* maven-pro-regular - latin-ext_latin */
@font-face {
font-family: 'Maven Pro', sans-serif;
font-style: normal;
font-weight: 400;
src: url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.svg#MavenPro') format('svg'); /* Legacy iOS */
}
Das local('') kommt mir verdächtig vor. Nimm das mal raus.
(Oder mach local('Maven Pro') draus – oder wie immer die Schriftart heißt, wenn man sie lokal installiert hat. Das haben aber vermutlich die wenigsten, also kannste das weglassen.)
Und wo du gerade beim Rausnehmen bist: alles weg außer WOFF2 – das braucht kein Mensch mehr. Bleibt übrig:
/* maven-pro-regular - latin-ext_latin */
@font-face {
font-family: 'Maven Pro', sans-serif;
font-style: normal;
font-weight: 400;
src: url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.woff2') format('woff2');
}
Bei den anderen Schriftschnitten entsprechend.
Aber wo du gerade beim Rausnehmen bist: Gib im Stylesheet nur die Schriftschnitte an, die du tatsächlich verwendest. Verwendest du tatsächlich die 400er, 500er, 600er, 700er, 800er und 900er?
Und falls du mehrere Schriftstärken verwendest (sagen wir, mehr als 2): Maven gibt es als Variable Font. Du solltest in Betracht ziehen, diesen zu verwenden.
🖖 Живіть довго і процвітайте
In deinem Stylesheet https://www.hanki-testet.de/system/css/style.css hast du zu stehen:
/* maven-pro-regular - latin-ext_latin */ @font-face { font-family: 'Maven Pro', sans-serif; font-style: normal; font-weight: 400; src: url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://www.hanki-testet.de/fonts/maven-pro-v32-latin-ext_latin-regular.svg#MavenPro') format('svg'); /* Legacy iOS */ }
Das haben wir hier auch zu Testzwecken mal geändert, hat aber (natürlich) auch nichts gebracht. Ich probiere gerne mal Deinen Input aus, vielen Dank dafür.
@@VRG
Das haben wir hier auch zu Testzwecken mal geändert, hat aber (natürlich) auch nichts gebracht.
Hätte ja sein können, dass es das local('') ohne Namen ist. Ist es vielleicht auch – auch.
Hab noch was gefunden:
@font-face {
font-family: 'Maven Pro', sans-serif;
In einer @font-face-Regel darf da kein Font-Stack stehen, sondern der Name der einen Schrift, also
@font-face {
font-family: 'Maven Pro';
🖖 Живіть довго і процвітайте
@@Gunnar Bittersmann
Das haben wir hier auch zu Testzwecken mal geändert, hat aber (natürlich) auch nichts gebracht.
Hätte ja sein können, dass es das
local('')ohne Namen ist. Ist es vielleicht auch – auch.
Ich hab das rein aus Interesse mal in diesem Codepen getestet:
local('') funktioniert nicht.
Was in meinem Firefox funktioniert[1]: local() ohne Argument. Da scheint der Browser den Namen aus font-family als Fallback zu nehmen. In der Spec habe ich nichts diesbezüglich gefunden. Ich würde mich also nicht darauf verlassen, dass das alle Browser so tun.
🖖 Живіть довго і процвітайте
Ihr werdet das nicht sehen können, wenn ihr nicht Abril Text lokal installiert habt. Zum Rumspielen eine andere Schrift nehmen. ↩︎
Hallo an alle!
Entschuldigt die späte Antwort, ich habe getüftelt und probiert und das Projekt stand jetzt auch mehrere Tage zwischenzeitlich still.
In Chrome und Firefox habe ich keine Probleme (mehr) mit den Schriften, nur Safari "spackt" noch. Aber da habe ich gelesen, dass das bereits ein bekanntes Problem ist? Wie könnte ich dem entgegenwirken, habt ihr da vielleicht auch Tipps für mich?
Ich bin so dankbar!