Schriftgröße an Auflösung definieren bzw. automatisch anpassen

Hallo,
ich möchte die Überschrift H1 abhängig von der Auflösung “Responsive…” machen. Nun habe ich in der Child-Style.css einige Angaben wie folgt gemacht:

@media screen and (min-width: 768px) {
#content .page .entry-header h1.entry-title {
font-family: ‘Zapfino Extra LT W01’, Trebuchet MS;
font-size: 1.0rem;
color: #be4948;
}
}
@media screen and (min-width: 1024px) {
#content .page .entry-header h1.entry-title {
font-family: ‘Zapfino Extra LT W01’, Trebuchet MS;
font-size: 1.2rem;
color: #be4948;
}
}
@media screen and (min-width: 1180px) {
#content .page .entry-header h1.entry-title {
font-family: ‘Zapfino Extra LT W01’, Trebuchet MS;
font-size: 1.4rem;
color: #be4948;
}
}
Die Größendefinitionen funktionieren im Browser; wenn ich jedoch die URL auf meinem Smartphone mit Chrome öffne, dann wird weder die Schriftart noch die Größe berücksichtigt.
Wie kann ich dies am besten lösen?
Ich habe auch schon mit px gearbeitet- hat auch nichts gebracht.
Wäre für eine Hilfestellung dankbar...

 

Die Schriftart gibt es - mit dieser hängt es nicht zusammen. Es hat ja zuvor auch auf allen Plattformen mit dem Font funktioniert.

 

Hallo zusammen,
also ich betrachte die Site auf meinem Samsung S4 und dieses macht eine Auflösung von 1080px.
Ich habe nun mal die Schriftart auf Courier geändert und mit der Größenangabe auch mit px-Werten gespielt.
Sowohl die Änderungen der Schriftart noch der versch. Größenangaben spielen eine Rolle - das Handy zeigt immer eine einzige Schriftart an und auch immer nur eine Größe

Lasse ich den ganzen Absatz mit "@media screen and (min-width: ...px) ..." weg, dann wird mir ja der Zapfino-Font überall (auch auf dem Handy) angezeigt - nur eben in der Größe viel zu groß.
Werd jetzt bald verrückt

 

Irgendwie habe ich das Gefühl, dass Smartphones die Angaben zu @media screen and (min-width: 768px) {.... überhaupt nicht auswerten. Egal was ich dort deklariere.
Hat da jemand einen Tip?