Schriftart in den Shop einbinden Anleitung

Code:

body.page-login #main .row-login > div .fieldset-content h4 {
       font-size: 30px;
}

Es ist so, weil die ursprüngliche Schrifthöhe später überschrieben wird.

Oder probier doch mal bei h4 folgendes:

Code:

h4 {
    font-size: 30px !important;
}

Das !important setzt die Priorität höher

 

Das hat sehr gut funktioniert dankeschööööön hat jetzt 24 pt. Ich habe den zweiten Code eingebunden.

 

Jetzt sieht die Eigene CSS in Bezug auf die H*s aber ganz schön voll aus. Kann man das irgendwie zusammenschreiben? Oder sollte ich es lieber so lassen?

Code:

h1 {
    border-bottom: 0 !important;
    font-family: brouet;
    color: #472225;
    font-weight: bold;
}

h2 {
    margin-bottom:  5px;
    margin-top: 1px;
    }
h2 {
    border-bottom: 0 !important;
    font-family: brouet;
    color: #472225;
    font-weight: bold;
}
h3 {
    border-bottom: 0 !important;
}
h3 {
    margin-bottom:  3px;
    }
h3 {
    border-bottom: 0 !important;
    font-family: brouet;
    color: #472225;
    font-weight: bold;
}

h4 {
    border-bottom: 0 !important;
    font-family: brouet;
    color: #472225;
    font-weight: bold;
}
h4 {
    font-size: 24px !important;
}
h4 {
    margin-bottom:  5px;
}

h4 {
    border-bottom: 0 !important;
}

h4 {
   text-transform: none !important;
}

h5 {
    border-bottom: 0 !important;
    font-family: brouet;
    color: #472225;
    font-weight: bold;
}
h5 {
    border-bottom: 0 !important;
}

h5 {
    margin-bottom:  5px;
}
h6 {
    border-bottom: 0 !important;
    font-family: brouet;
    color: #472225;
    font-weight: bold;
}
h6 {
    margin-bottom:  5px;
    }
h6 {
    border-bottom: 0 !important;
}

 

Genau: alle H´s zusammenschreiben. Du brauchst ja nur die Zwischenteile herausnehmen.

 

Du scheinst es hin bekommen zu haben, zumindest sieht es bei mir gut aus.
Tipp:
Wenn Du mehrere Änderungen im gleichen Bereich hast, kannst du die zusammenfassen.
Beispiel:

Code:

h4{
text-transform: none !important;
}
h4 {
border-bottom: 0 !important;
}
h4 {
font-size: 24px !important;
}

kann auch so aussehen:

Code:

h4{
text-transform: none !important;
border-bottom: 0 !important;
font-size: 24px !important;
}

Das ist vielleicht etwas übersichtlicher

jetzt war ich zu langsam

 

@Andreas S. @barbara vielen Dank ihr Lieben, ich mach mich gleich dran und schreib das zusammen.

hab mir schon sowas gedacht, aber bevor ich das wieder falsch mache, dachte ich, frag ich mal die Profis

 

Hmm.

Ich habe mehrere Schriftarten nach folgendem Muster in die usermod css eingebunden.

Code:

@font-face { font-family: 'Klavika-Light';
             src: url('templates/Honeygrid/fonts/Klavika-Light.woff2') format('woff2'), src: url('templates/Honeygrid/fonts/Klavika-Light.woff') format('woff'), src: url('templates/Honeygrid/fonts/Klavika-Light.ttf') format('truetype') ; }

Die Schriftarten sind - soweit vorhanden - jeweils als woff2, woff und ttf eingebunden.

Die Dateien sind alle ins entsprechende Verzeichnis geladen. Groß- und Kleinschreibung habe ich beachtet. Scheint wohl in diesem Fall wichtig zu sein.

Das Ganze mit

Code:

style="font-family: Klavika-Bold, sans-serif;"

eingebunden.

Dann templates_c, cache und jeden Brwosercache geleert.

Nun sieht es überall anders aus. Nur der EDGE stellt die Schrift korrekt dar.

Edge


Chrome


Firefox


Hat dazu jemand möglicherweise eine Idee - vielleicht @Torben (Gambio) ?

Kann es an dem "sans-serif" liegen?

 

Ich empfehle mit Google Webfonts zu arbeiten. Google liefert je nach abrufendem Browser anderes CSS und teilweise andere Webfont Dateien, damit erreicht man einheitliches Styling. Mit lokalen Webfonts zu arbeiten ist deutlich komplizierter wenn man das browserneutral tun will.

 

Also meine Schrift (sind immer nur die Überschriften) Brouet Handwriting wird in Edge, Firefox, Chrome und auch auf den Tablets in Android korrekt dargestellt.

 

Das mit den Googlefonts hatte ich schon probiert und auch nach langem Suchen 2 ähnliche Schriftarten gefunden. Das funktioniert.
Ich hätte ja gern die vom Hersteller zur Verfügung gestellten Schriftarten genommen, die als ttf, svg, woff und woff2 vorliegen.

Laut (Link nur für registrierte Nutzer sichtbar.) müssten die *.woff und *.woff2 Dateien von allen Browsern dargestellt werden können.
Es muss ja einen Grund haben, warum es nur im EDGE und in den beiden anderen nicht klappt.

 

@Devil Etwas irritiert: "Klavika-Light" als "Klavika-Bold" einzubinden?

 

Nein, der Code war nur beispielhaft. Da ging es mir drum, dort vllt einen Syntaxfehler gemacht zu haben, der dann auch in jeder anderen Zeile zu finden wäre.

So sieht das Klavika Gedöns vollständig aus.

Code:

@font-face { font-family: 'Klavika-Light';
             src: url('templates/Honeygrid/fonts/Klavika-Light.woff2') format('woff2'), src: url('templates/Honeygrid/fonts/Klavika-Light.woff') format('woff'), src: url('templates/Honeygrid/fonts/Klavika-Light.ttf') format('truetype') ; }
@font-face { font-family: 'Klavika-Regular';
             src: url('templates/Honeygrid/fonts/Klavika-Regular.woff2') format('woff2'), src: url('templates/Honeygrid/fonts/Klavika-Regular.woff') format('woff'), src: url('templates/Honeygrid/fonts/Klavika-Regular.ttf') format('ttf'); }
@font-face { font-family: 'Klavika-Bold';
             src: url('templates/Honeygrid/fonts/Klavika-Bold.woff2') format('woff2'), src: url('templates/Honeygrid/fonts/Klavika-Bold.woff') format('woff'), src: url('templates/Honeygrid/fonts/Klavika-Bold.ttf') format('ttf'), src: url('templates/Honeygrid/fonts/Klavika-Bold.svg#Klavika-Bold') format('svg'); }

 

Das sans-serif sollte eigentlich kein Problem sein. Das ist nur der Fallback, der verwendet wird, wenn er die eigentliche Schriftart nicht kennt. Spontan wüsste ich jetzt gerade auch nicht, was das Problem sein könnte, das müsste ich mir im Shop ansehen.

 

Hallo nein es liegt daran das die Klavika-Light nicht in den einzelenen Anführungsstrichen ist