Google font not recognized with CSS merge on

Hi,
I have built my shop based on the Travelgear quickstart package, the site is live now. When turning on CSS merge, the Google font Oswald is not recognized any more.

Please help, I will send you the login details in a private message, thanks.

All the best,
Matthias

7 answers

Profile photo of Ziven Staff 100640.00 $tone December 16, 2015
Public

Hi Matthias,
Yes. CSS merge not recognized with the google. Maybe you need use another way for this issue. Please try to use the font-face. Please try this way https://css-tricks.com/snippets/css/using-font-face/
Best Regards,
Ziven.

#3
Profile photo of powder247 100.00 $tone December 16, 2015
Public

Hi Ziven,
OK, thanks for the hint. I do not quite understand why you do not use Google Fonts via @font-face by default then, as it seems to be a known issue, but however…
For all others who dealt with the same problem: Download Oswald font from github and place the fonts in skin/frontend/default/jm_travelgear/css/fonts -- I downloaded the eot, ttf and woff versions. In styles.css (/skin/frontend/default/jm_travelgear/css), replace in line 8
 
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
 
with
 
@font-face {
  font-family: ‘Oswald’;
  src: url(‘fonts/Oswald-Regular-webfont.eot’); /* IE9 Compat Modes */
  src: url(‘fonts/Oswald-Regular-webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
       url(‘fonts/Oswald-Regular-webfont.woff’) format(‘woff’), /* Pretty Modern Browsers */
       url(‘fonts/Oswald-Regular-webfont.ttf’)  format(‘truetype’); /* Safari, Android, iOS */
  font-weight: normal;
}
 
@font-face {
  font-family: ‘Oswald’;
  src: url(‘fonts/Oswald-Light-webfont.eot’); /* IE9 Compat Modes */
  src: url(‘fonts/Oswald-Light-webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
       url(‘fonts/Oswald-Light-webfont.woff’) format(‘woff’), /* Pretty Modern Browsers */
       url(‘fonts/Oswald-Light-webfont.ttf’)  format(‘truetype’); /* Safari, Android, iOS */
  font-weight: 300;
}
 
@font-face {
  font-family: ‘Oswald’;
  src: url(‘fonts/Oswald-Bold-webfont.eot’); /* IE9 Compat Modes */
  src: url(‘fonts/Oswald-Bold-webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
       url(‘fonts/Oswald-Bold-webfont.woff’) format(‘woff’), /* Pretty Modern Browsers */
       url(‘fonts/Oswald-Bold-webfont.ttf’)  format(‘truetype’); /* Safari, Android, iOS */
  font-weight: 700;
}
 
That’s it.
 
All the best,
Matthias

#4

Please login or Register to Submit Answer

Written By

Comments