WebSite X5Help Center

 
Peter P.
Peter P.
User

Webfont  de

Autore: Peter P.
Visite 2689, Followers 1, Condiviso 0  

Ich möchte den gesamten Textinhalt meiner WebsiteX5 10 Seite auf eine neue

Webfont-Schriftart umändern, dass bei jedem Gerät die selbe Schriftart verwendet wird.
Meine Wunschfont: http://www.fontsquirrel.com/fonts/roboto-slab

Habe nun vergebens versucht, diese auf meinem Server zu installieren. Bitte um hilfe.

Postato il
6 RISPOSTE
Andreas S.
Andreas S.
Moderator
Utente del mese DE

Nun das erfordert ein bisschen Hintergrundwissen und einige Schritte um den Font einzubinden !  Außerdem weis ich nicht ob der Font "Freeware" ist und ob du ihn in deiner Seite verwenden darfst !

Jedenfalls benötigst du die 4 verschiedenen Dateien die du downloaden kannst beim Reiter "Webfont Kid"  Dort sind 4 verschiedene Ordner von verschiedenen Stylerichtungen. Wähle eine aus und nimm die Daten in der Stylesheet Datei und kopiere Sie in den Head auf deiner Seite. Dann die vier Dateien (TTF, EOT, WOFF, SVG) auf deinen Server im Root ablegen. Danach solltest du in Windows noch diese SChriftart installieren dass sie auch in WSX5 verwendbar ist.

Aber eine genauere Beschreibung ist bei uns "unofficialwsx5.de" besser möglich oder schon vorhanden.

Leggi di più
Postato il da Andreas S.
Peter P.
Peter P.
User
Autore

Ich hätte nun den Inhalt der stylesheet.css Übernommen. Ist nun bei den allgemeinen Einstellungen unter: /Erweitert/Vor dem </HEAD< Tag

Ich habe leider keine HTML bzw. CSS-Kenntnisse, bitte dementsprechend um eine Noob-Anleitung!

 Hier der Code:

<style type="text/css">
@font-face {
    font-family: 'robotothin';
    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotolight';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotobold';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

-------------------------------------------------------------------

(Schriftarten sind beim Server unter /fonts abgelegt!!

Habe nun die Webseite geöffnet, nur sehe ich jetzt nur mehr eine weiße Startseite!

Was habe ich falsch gemacht?

Leggi di più
Postato il da Peter P.
Andreas S.
Andreas S.
Moderator
Utente del mese DE

Ist das der gesamte Code ?

Kann es sein dass du das </style> vergessen hast ganz zum Schluss ?

Leggi di più
Postato il da Andreas S.
Der Zwoemti
Der Zwoemti
Moderator

Groß und Kleinschreibung der Fonts beachten wäre auch ein sinnvoller schritt

Leggi di più
Postato il da Der Zwoemti
Peter P.
Peter P.
User
Autore

Das Problem besteht immernoch!! Mein neuer Code:

<style type="text/css">
@font-face {
    font-family: 'robotothin';
    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotoregular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotolight';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'robotobold';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
</style>

--------------------------------------------------------

Die Schreibung der Schriftnamen entsprechen dem Material auf dem Server - an dem kann es also nicht liegen!

Leggi di più
Postato il da Peter P.
Der Zwoemti
Der Zwoemti
Moderator

andy hat schon alles gesagt...

Wir wissen wie es geht...du anscheinend nicht. Wir können aber nicht hellsehen. Bei der Erstellung des Themas wurde extra daraufhingewiesen das du vollständige Angaben machen sollst. Niemand kann auf blauen Dunst eine Fehleranalyse machen.

Leggi di più
Postato il da Der Zwoemti