Moin Albert,
und willkommen bei uns im Forum
Das hat Mobirise so nicht vorgesehen und es wird nur eine Standard-Schrift vom Browser geladen.
Du könntest Deine Schrift dort bei den 3 Bereichen "Head", "Message" und "Input Message" hinzufügen. Ich habe das auf dieser Testseite mit meiner Schrift "Rubik" getan:
https://www.mobirise-tutorials.com/Test ... estseite3/
Natürlich muss die neu gewählte Schrift auch bereits über die CSS-Datei Deines Mobirise-Projektes vom Browser geladen worden sein. Sicherlich ist es dann der einfachste Weg eben den Schrifttyp zu wählen, den Dein Projekt bereits verwendet (wie bei mir eben "Rubik").
Komischerweise müssen die gesamten CSS-Klassen hier nochmals eingetragen werden, damit das funktioniert, nur eben zusätzlich den Font angeben, in meinem Beispiel ist es hier:
font-family: 'Rubik-Regular';
Code: Alles auswählen
/* START Edit Tommy - Fonts */
.floating-wpp .floating-wpp-popup .floating-wpp-head {
text-align: left;
color: white;
margin: 0 -15px 15px -15px;
padding: 15px 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
font-family: 'Rubik-Regular';
}
.floating-wpp .floating-wpp-popup .floating-wpp-message {
background-color: white;
padding: 8px;
border-radius: 7.5px 7.5px 7.5px 7.5px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
opacity: 0;
transition: opacity 0.2s;
transition-delay: 0s;
max-width: 100%;
font-family: 'Rubik-Regular';
}
.floating-wpp .floating-wpp-input-message {
background-color: #e5ddd5;
margin: 5px -15px -15px -15px;
padding: 0 15px;
display: flex;
align-items: center;
font-family: 'Rubik-Regular';
}
/* ENDE Edit Tommy Fonts */
Diese Klassen schreibst Du in den
Globalen Site-Style, da das WhatsApp-Icon ja auf allen Seiten des Projektes erscheint.
> Klicke auf den globalen Style am "
Pinsel Symbol" unten rechts auf der Seite > dann auf den Button "
Edit in Code Editor"
> Trage die oben angegebenen CSS-Klassen dort irgendwo in den Bereich "
Static Styles" ein:
So sieht es dann aus:
P.S.:
Übrigens bei der Erweiterung "
Popup-Chat" von "
ElectricBlaze" habe ich genau aus diesem Grund das Popup-Fenster am Handy ausgeblendet, denn am Handy braucht das kein Mensch, weil man dort ja ohnehin WhatsApp für das Handy installiert hat.
Hier meine Beipielseite:
https://www.mobirise-tutorials.com/Tuto ... -Chat.html
Dazu habe ich diese 3 CSS-Klassen ab einem
Display bis 767px Breite ausgeblendet, wobei die Namen dieser Klassen bei Dir andere sein könnten:
Code: Alles auswählen
@media (max-width: 767px) {
.bRVohJ {
display: none;
}
.jBrikC {
display: none;
}
.hWATBB {
display: none;
}
}
