Hallo,
ich verzweifle gerade etwas an der Einbindung eigener Fonts.
Ich habe diese bereits in die customize.css mit font-face eingebunden und auch die Stylings gesetzt.
Beim laden der Website werden die gewünschten Schriftarten auch in den Entwicklertools jeweils angezeigt.
Gerendert wird jedoch immer nur Times New Roman.
Was mache ich falsch?
Website: eclipse.columbus-verlag.de
Hier die customize.css:
ich verzweifle gerade etwas an der Einbindung eigener Fonts.
Ich habe diese bereits in die customize.css mit font-face eingebunden und auch die Stylings gesetzt.
Beim laden der Website werden die gewünschten Schriftarten auch in den Entwicklertools jeweils angezeigt.
Gerendert wird jedoch immer nur Times New Roman.
Was mache ich falsch?
Website: eclipse.columbus-verlag.de
Hier die customize.css:
Code:
/* basis-grotesque - light */ @font-face { font-family: Basis-Grotesque-Light; font-style: normal; font-weight: 100; src: url('../fonts/basis-grotesque-light.eot'); /* IE9 Compat Modes */ src: url('../fonts/basis-grotesque-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/basis-grotesque-light.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/basis-grotesque-light.woff') format('woff'), /* Modern Browsers */ url('../fonts/basis-grotesque-light.ttf') format('truetype'), /* Safari, Android, iOS */ } /* basis-grotesque - medium */ @font-face { font-family: Basis-Grotesque-Medium; font-style: normal; font-weight: 400; src: url('../fonts/basis-grotesque-medium.eot'); /* IE9 Compat Modes */ src: url('../fonts/basis-grotesque-medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/basis-grotesque-medium.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/basis-grotesque-medium.woff') format('woff'), /* Modern Browsers */ url('../fonts/basis-grotesque-medium.ttf') format('truetype'), /* Safari, Android, iOS */ } /* basis-grotesque - black */ @font-face { font-family: Basis-Grotesque-Black; font-style: normal; font-weight: 700; src: url('../fonts/basis-grotesque-black.eot'); /* IE9 Compat Modes */ src: url('../fonts/basis-grotesque-black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/basis-grotesque-black.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/basis-grotesque-black.woff') format('woff'), /* Modern Browsers */ url('../fonts/basis-grotesque-black.ttf') format('truetype'), /* Safari, Android, iOS */ } /* mixtapro - italic*/ @font-face { font-family: 'MixtaProIt'; font-style: italic; font-weight: 700; src: url('../fonts/MixtaPro-RegularIt.eot'); /* IE9 Compat Modes */ src: url('../fonts/MixtaPro-RegularIt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MixtaPro-RegularIt.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/MixtaPro-RegularIt.woff') format('woff'), /* Modern Browsers */ url('../fonts/MixtaPro-RegularIt.ttf') format('truetype'), /* Safari, Android, iOS */ } /* mixtapro - bold*/ @font-face { font-family: 'MixtaProBold'; font-style: normal; font-weight: 700; src: url('../fonts/MixtaPro-Bold.eot'); /* IE9 Compat Modes */ src: url('../fonts/MixtaPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MixtaPro-Bold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/MixtaPro-Bold.woff') format('woff'), /* Modern Browsers */ url('../fonts/MixtaPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ } /* mixtapro - regular*/ @font-face { font-family: 'MixtaPro'; font-style: normal; font-weight: 700; src: url('../fonts/MixtaPro-Regular.eot'); /* IE9 Compat Modes */ src: url('../fonts/MixtaPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MixtaPro-Regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/MixtaPro-Regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/MixtaPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ } body { font-family: Basis-Grotesque-Light; font-weight: 100; line-height: 1.8rem; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ce_revolutionslider_text.bold, .font_headline { font-family: 'MixtaProBold'; font-weight: 700; } .mainmenu ul li a { font-family: Basis-Grotesque-Black; font-weight: 700; } .mainmenu ul li ul li a { text-transform: uppercase; } .smartmenu-content .mod_navigation li:not(.floatbox) { font-family: Basis-Grotesque-Black; font-weight: 700; } .mainmenu ul li ul li a { font-family: Basis-Grotesque-Black; font-weight: 700; }
Kommentar