Font einbinden mit @Font-Face

[Niu]

Hiho,

ich hab Google schon gequält und auch hier leider nichts brauchbares gefunden, also versuch ichs mal offensiv xD.
Ich würd gern für unser Forum einen neuen Font mit dem @Font-Face code einbinden, der neue Font soll am Ende alle bisherigen ersetzen. Den code hab ich über den FontSquirrel Generator erstellen lassen, der schaut dann so aus

Code: Alles auswählen

@font-face {
	font-family: 'GorillaMilkshakeRegular';
	src: url('gm-webfont.eot');
	src: local('☺'), url('gm-webfont.woff') format('woff'), url('gm-webfont.ttf') format('truetype'), url('gm-webfont.svg#webfontLmN0FTvP') format('svg');
	font-weight: normal;
	font-style: normal;
}

Mein Problem ist jetzt das ich nicht weis wo genau in der Stylecheet.css der Code rein muss. Paar versuche den einzubinden sehen so aus..

Code: Alles auswählen

html {
	font-size: 100%;
}

@font-face {
	font-family: 'GorillaMilkshakeRegular';
	src: url('gm-webfont.eot');
	src: local('☺'), url('gm-webfont.woff') format('woff'), url('gm-webfont.ttf') format('truetype'), url('gm-webfont.svg#webfontLmN0FTvP') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Arial, Helvetica, Verdana, Lucida Grande, sans-serif, "GorillaMilkshakeRegular";
	color: #ebb839;
	background-color: #000;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
	background-image: url('./images/wowmaevahempirebackgrounda01.gif'); background-attachment:fixed;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;

}

und bei allen font familys in der stylecheet den font name "GorillaMilkshakeRegular" eingebunden, allerdings ohne erfolg. Über html wills auch nicht gehen und wenn ich den Code gleich als erstes rein schreibe genauso wenig. Die Font files liegen übrigens alle im Hauptverzeichnis vom Server.
Als Grund Style benutzt ich WoWMaevahEmpire.
Hoff Ihr könnt mir weiter helfen

Gruss Niu

[DasDaniel]

Da die Font-Files bei dir ja im Hauptverzeichnis liegen, musst du deine Pfadangaben noch anpassen, denn die .css liegt ja nicht direkt im Hauptverzeichnis sondern in styles/DEIN_STYLE/theme/, somit "sucht" die .css die Font-Files auch in styles/DEIN_STYLE/theme und findet sie dadurch nicht.
Außerdem sollte in body dein Font als erstes in der Liste stehen, da die Liste Alternativen darstellt, d.h. wenn er die erste Möglichkeit gefunden hat (in deinem Fall Arial), dann probiert er die anderen Alternativen gar nicht durch und dein Font wird nicht verwendet.
Du solltest auch beachten, dass @font-face nicht von allen Browsern unterstützt wird. Der Firefox verstehts wohl erst ab Version 3.1, der IE erst seit 8 sauber, Safari auch erst ab 3.1 (benutze den nicht, ist das neu oder alt ) und Opera weigert sich vollständig. Stellt sich also die Frage, wie die Besucher deines Forums so ausgestattet sind und ob sich das ganze überhaupt lohnt und wie es sich auf die Performance auswirkt.
Bitte beachte auch die Lizenz des Font. An verschiedenen Stellen wurde diskutiert, ob man einen Font, wenn er kostenlos ist, einfach so für die eigene Website verwenden darf. Am Besten lieber vorher nochmal nachfragen. (Bei gekauften Fonts stellt sich diese Frage übrigens auch!)

Hoffe, ich konnte dir helfen.

[Niu]

Hammer, du bist spitze !! files in /theme ordner gepackt und alles funzt ..grosses Danke! Die Browser Frage hab ich mir auch schon gestellt, mal schaun wie sich das mit dem neuen Font bewährt, aber hauptsache er is erstmal drin

Vielen Dank nochmal

lg Niu

edit: grad mal Opera auf anderem pc getestet mit dem klappts mittlerweile auch

[DasDaniel]

Freut mich, dass es funktioniert.
Gut, dass Opera das jetzt auch drin hat, vielleicht waren meine Infos etwas veraltet.