Back to Questions Page

Google font not recognized with CSS merge on

0 Comment December 14, 2015
Vote Up
0
Vote Down
Answered
Public
Technical Question
Profile photo of powder247 powder247 asked December 14, 2015

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

Vote Up
0
Vote Down
Profile photo of Ziven ⋅ Staff ⋅100720.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
Vote Up
0
Vote Down
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

Further Reading

Comments