Seite 1 von 1

Fremden Font einbinden

Verfasst: 07.11.2014 16:23
von Minusbrain
Guten Abend ihr lieben,

ich habe mir über http://www.fontsquirrel.com einen neuen Font generiert, den ich im Forum bei mir einbinden wollte. Nun habe ich den @font-face in der common.css und in der content.css eingebracht und die font-family: überall wie vorgegeben angeglichen. Allerdings werden nun alle Schriften kursiv dargestellt. Den Pfad zur src: url direkt anzugeben brachte kein Erfolg.

Hier mal den Auszug:

Code: Alles auswählen

/* General Markup Styles
---------------------------------------- */
@font-face {
    font-family: 'dosisregular';
    src: url('dosis-regular-webfont.eot');
    src: url('dosis-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('dosis-regular-webfont.woff2') format('woff2'),
         url('dosis-regular-webfont.woff') format('woff'),
         url('dosis-regular-webfont.ttf') format('truetype'),
         url('dosis-regular-webfont.svg#dosisregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;


}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 101%;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: 'dosisregular';
	color: #828282;
	background-color: #000000;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}
Die Schrift ist hochgeladen, liegt im selben Verzeichnis wie die CSS (theme).

Ich danke euch für die Hilfe.

Re: Fremden Font einbinden

Verfasst: 08.11.2014 16:35
von HabNurNeFrage
Hi,

das CSS sieht korrekt aus.
Es könnte ein Problem Deines PC oder von Chrome sein.
Hast Du schon mal mit unterschiedlichen Browsern getestet?
Ist die Schriftart unter der Adresse in allen angegebenen Formaten verfügbar?
Kann man sich das mal ansehen? => URL
Bei sowas empfielt es sich, immer mindestens eine Standard-Schriftart-Familie als Ausweichmöglichkeit anzugeben,
weil anscheinend auf Windows-PCs eine zufällig neben der anderen liegende Schriftart in C:\WINDOWS\fonts gewählt wird,
wenn aus irgendeinem Grund die @font-face Schriftart nicht geladen wird.


LG

Re: Fremden Font einbinden

Verfasst: 08.11.2014 19:04
von Minusbrain
Hey HabNurNeFrage,

Ich habe das Problem gefunden, die Einbindung benötigt immer den {T_THEME_PATH}/, sonst klappt es nicht. Das heißt es müsste wie folgt aussehen:

Code: Alles auswählen

@font-face {
    font-family: 'dosis';
    src: url('{T_THEME_PATH}/dosis-regular-webfont.eot');
    src: url('{T_THEME_PATH}/dosis-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('{T_THEME_PATH}/dosis-regular-webfont.woff2') format('woff2'),
         url('{T_THEME_PATH}/dosis-regular-webfont.woff') format('woff'),
         url('{T_THEME_PATH}/dosis-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 101%;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: 'dosis';
	color: #828282;
	background-color: #000000;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
Ich danke dennoch für die Mühe :)