Webfont
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
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.
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?
Ist das der gesamte Code ?
Kann es sein dass du das </style> vergessen hast ganz zum Schluss ?
Groß und Kleinschreibung der Fonts beachten wäre auch ein sinnvoller schritt
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!
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.