Eigene Typo eingebunden: Falsche mobile Ansicht

Decilla

Seid gegrüßt,

ich habe einen Font auf den Server geladen und das Stylesheet entsprechend editiert, sodass das H1 bis H6, regulärer Text und die Menütexte ausschließlich in dieser Typo angezeigt werden. Funktioniert am Rechner einwandfrei. Habe den Font in sämtlichen Varianten hochgeladen und vorher mit einem Konverter fürs Web fertig gemacht.

Jetzt wird auf auf dem iPhone eine Standard Schrift angezeigt. Gibt es Möglichkeiten - außerdem dem Ausweichen auf Google Fonts - den Font auf auf dem Phone richtig anzeigen zu lassen?

Beste Grüße

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

am3

Ja, gibt es. Wie soll man ohne Link zu deiner Seite den Fehler finden?!

Decilla

Sorry. Dachte es gibt eine Multilösung.

http:http://www.aesparel.de

Decilla

Keine Idee? :(

am3

Deine Font-Dateien
aesparel.de/wp-content/themes/Impreza2/css/fonts/regularmedium-Medium.woff
und
aesparel.de/wp-content/themes/Impreza2/css/fonts/regularmedium-Medium.ttf
werden nicht gefunden.

Sind also falsch verlinkt bzw. liegen nicht auf dem Server bzw. nicht an der richtigen Stelle.

SirEctor

Zitat

Failed to load resource: the server responded with a status of 404 (Not Found)
http://aesparel.de/wp-content/the…ium-Medium.woff

Das gleiche gilt für die .ttf. Ich vermute du hast die Schriften falsch eingebunden.

Decilla

Besten Dank für Euer Feedback. Leider kann ich Euch nicht ganz folgen: Meint Ihr die Schriften liegen falsch oder der Code in der Style.css ist falsch. Anbei mal ein screen wo die Fonts liegen

Decilla

ahh Moment. Die müssen in den Ordner CSS, korrekt?

EDIT: ne ... ändert auch nichts.

maxe

Ich weiß ja nicht, wie du die Schrift eingebunden hast, i.d.R. macht man es z.B. so über die style.css:

Code

@font-face {
  font-family: 'regularmedium';
  src: url('regularmedium-Medium.eot');
  src: url('regularmedium-Medium.eot?#iefix') format('embedded-opentype'),
       url('regularmedium-Medium.woff2') format('woff2'),
       url('regularmedium-Medium.woff') format('woff'),
       url('regularmedium-Medium.ttf') format('truetype'),
       url('regularmedium-Medium.svg#regularmedium') format('svg');
  font-weight: normal;
  font-style: normal;
}

Alles anzeigen

Der url-Pfad muss dann natürlich immer von der style.css ausgehend sein.

am3

den Fonts-ordner in den css-ordner und "Fonts" klein schreiben.

Decilla

Yes. Die letzten Zeilen in der style.css

Ganz falsch kann es ja nicht sein: Auf dem PC ist alles richtig.

Zitat

@font-face {
font-family: 'regularmedium';
src: url('regularmedium-Medium.eot');
src: url('regularmedium-Medium.eot?#iefix') format('embedded-opentype'),
url('regularmedium-Medium.woff2') format('woff2'),
url('regularmedium-Medium.woff') format('woff'),
url('regularmedium-Medium.ttf') format('truetype'),
url('regularmedium-Medium.svg#regularmedium') format('svg');
font-weight: normal;
font-style: normal;
}
/* Headings Font Family */
h1, h2, h3, h4, h5, h6,
.w-counter-number,
.w-logo-title,
.w-pricing-item-title,
.w-pricing-item-price,
.w-tabs-item-title {
font-family: 'regularmedium-Medium' !important;
}

/* Regular Text Font Family */
body {
font-family: 'regularmedium-Medium' !important;
}

/* Main Menu Font Family */
.l-header .w-nav-item {
font-family: 'regularmedium-Medium' !important;
}

Alles anzeigen

maxe

du nennst die Font doch regularmedium, warum sprichst du sie in der Formatierung dann mit regularmedium-Medium an?
Und liegt die Font jetzt in einem extra Ordner oder da wo die style.css liegt?

Decilla

so in etwa? Ich checke das sofort

Monika

wenn du das im Original Theme machst, ist das alles beim nächsten Theme Update weg

ich empfehl dringend ein ChildTheme oder zumindest ein Custom CSS Plugin,
denn wenn du das Theme nicht updatest gehst ein Sicherheitsrisiko ein und irgendwann krachts dann gewaltigst

Decilla

hm =( ne. Es bleibt tatsächlich dabei

Decilla

Zitat von Monika

wenn du das im Original Theme machst, ist das alles beim nächsten Theme Update weg
ich empfehl dringend ein ChildTheme oder zumindest ein Custom CSS Plugin,
denn wenn du das Theme nicht updatest gehst ein Sicherheitsrisiko ein und irgendwann krachts dann gewaltigst

Hallo Monika,

ok. Danke dir.

am3

Zitat von Decilla

Ganz falsch kann es ja nicht sein:

Doch!

Zitat von Decilla

Auf dem PC ist alles richtig.

Weil du auf deinem PC die Schrift installiert hast :D
Auf meinem stimmt die Schrift nämlich nicht.

Decilla

Ach mensch ... Das ist irgendwie ärgerlich. Woran kann denn das nur liegen?

maxe

Zitat von maxe

Der url-Pfad muss dann natürlich immer von der style.css ausgehend sein.

wenn du die Fonts noch in einem fonts Ordner liegen hast, dann musst du überall noch den Ordner in die URL schreiben: url('fonts/regularmedium-Medium.eot ....

SirEctor

Schreib es so:

Code

@font-face {
font-family: 'regularmedium';
src: url('fonts/regularmedium-Medium.eot');
src: url('fonts/regularmedium-Medium.eot?#iefix') format('embedded-opentype'),
url('fonts/regularmedium-Medium.woff2') format('woff2'),
url('fonts/regularmedium-Medium.woff') format('woff'),
url('fonts/regularmedium-Medium.ttf') format('truetype'),
url('fonts/regularmedium-Medium.svg#regularmedium') format('svg');
font-weight: normal;
font-style: normal;
}

Alles anzeigen

Die Dateien heißen dann regularmedium-Medium.eot usw., wobei ich Großbuchstaben, Umlaute und Sonderzeichen in Dateinamen immer vermeiden würde. Im CSS-Ordner gibt es dann noch einen Ordner fonts, wo diese drin liegen.

Bei H1 schreibst du dann z. B.

CSS

h1 {
font-family: 'regularmedium' !important;
}

Denn bei @font-face bestimmst du mit font-family: 'regularmedium'; wie die Schrift angesprochen werden muss.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Eigene Typo eingebunden: Falsche mobile Ansicht

Jetzt mitmachen!