WebSite X5Help Center

 
Peter P.
Peter P.
User

Webfont  de

Autor: Peter P.
Visitado 2420, Followers 1, Compartido 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.

Publicado en
6 RESPUESTAS
Andreas S.
Andreas S.
Moderator

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.

Leer más
Publicado en de Andreas S.
Peter P.
Peter P.
User
Autor

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?

Leer más
Publicado en de Peter P.
Andreas S.
Andreas S.
Moderator

Ist das der gesamte Code ?

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

Leer más
Publicado en de Andreas S.
Der Zwoemti
Der Zwoemti
Moderator

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

Leer más
Publicado en de Der Zwoemti
Peter P.
Peter P.
User
Autor

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!

Leer más
Publicado en de 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.

Leer más
Publicado en de Der Zwoemti