WebSite X5Help Center

 
Peter P.
Peter P.
User

Webfont  de

Autor: Peter P.
Besucht 2682, Followers 1, Geteilt 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.

Gepostet am
6 ANTWORTEN
Andreas S.
Andreas S.
Moderator
Nutzer des Monats 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.

Mehr lesen
Gepostet am von 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?

Mehr lesen
Gepostet am von Peter P.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Ist das der gesamte Code ?

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

Mehr lesen
Gepostet am von Andreas S.
Der Zwoemti
Der Zwoemti
Moderator

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

Mehr lesen
Gepostet am von 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!

Mehr lesen
Gepostet am von 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.

Mehr lesen
Gepostet am von Der Zwoemti