Problem with google and squirrel fonts

Hi, I need to put this font but can not find or google font or Squirrel

How should I put it to work in the menu?

windsor_hand

thanks

Hallo.
Few days ago, was exactly this same questions, please check:
1) https://www.gavick.com/forums/shop-and- ... 30483.html
and here:
2) https://www.gavick.com/forums/music-sta ... 30520.html

I used the font I want to put is "Windsor Hand" and this is not in goolge font, I need a way this can be seen in the menu properly

It means that you have to use custom fonts.
Few steps

1) You have create Web Fonts from "Windsor-Hand.otf" using this tool --> http://www.fontsquirrel.com/tools/webfont-generator

2) This web tool will generate you almost ready to use CSS and few fonts files which you have to use.

3) Now you can use this :

Code: Select all

.gkMenu > ul > li > a, .gkMenu > ul li div.childcontent a

inside Custom CSS code (Advanced settings tab in template configuration) with you css generated by FontSquirrel

And where I write this, in which css file?

.gkMenu > ul > li > a, .gkMenu > ul li div.childcontent a

and sources folders I created do I add in what folder?

Does the folder template?

And where I write this, in which css file?

I've wrote you before (post from 13 Nov 2013, 19:55 - at the bottom) ,
but okey here you got full manual for custom css: http://www.gavick.com/documentation/joo ... -template/

Does the folder template?

In most cases yes,
but you can insert fonts near - override.css file in this same folder, little mess don't harm no one.

Ok, I will help you more.

You override.css should include this code:

Code: Select all

 @font-face {
    font-family: 'windsor_handregular';
    src: url('windsor-hand-webfont.eot');
    src: url('windsor-hand-webfont.eot?#iefix') format('embedded-opentype'),
         url('windsor-hand-webfont.woff') format('woff'),
         url('windsor-hand-webfont.ttf') format('truetype'),
         url('windsor-hand-webfont.svg#windsor_handregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.gkMenu > ul > li > a, .gkMenu > ul li div.childcontent a
{font-family: 'windsor_handregular';}

And all fonts files should be in this same folder as override.css.

2) Template Manager --> GK Shop&Buy --> Advanced settings --> CSS override [ON] --> Save & Close

Now your menu uses Windsor font.

Remember to increase font-size : http://www.gavick.com/documentation/gen ... -the-menu/

very nice!

thanks so much!



sorry I have some difficulties to understand



I need to change other font in the template, should I do the same and put them in the override.css?

wrote .... and not working

Code: Select all

@font-face {
    font-family: 'asapregular';
    src: url('asap-regular-webfont.eot');
    src: url('asap-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('asap-regular-webfont.woff') format('woff'),
         url('asap-regular-webfont.ttf') format('truetype'),
         url('asap-regular-webfont.svg#asapregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'asapbold_italic';
    src: url('asap-bolditalic-webfont.eot');
    src: url('asap-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('asap-bolditalic-webfont.woff') format('woff'),
         url('asap-bolditalic-webfont.ttf') format('truetype'),
         url('asap-bolditalic-webfont.svg#asapbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'asapitalic';
    src: url('asap-italic-webfont.eot');
    src: url('asap-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('asap-italic-webfont.woff') format('woff'),
         url('asap-italic-webfont.ttf') format('truetype'),
         url('asap-italic-webfont.svg#asapitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'asapbold';
    src: url('asap-bold-webfont.eot');
    src: url('asap-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('asap-bold-webfont.woff') format('woff'),
         url('asap-bold-webfont.ttf') format('truetype'),
         url('asap-bold-webfont.svg#asapbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
body, #gkTopMenu, #btnCart, #gkFooter, .catProductPrice, .gkNspPM-ProductGallery2 .PricetaxAmount, .gkNspPM-ProductGallery2 .gkAddToCart input.addtocart-button, .gkNspPM-ProductGallery2 .gkReadon, .gkMenu > ul li div.childcontent li, #com-form-login > h4, .pane-sliders .panel h3

{font-family: 'asapregular';}


ie 11 no work font menu in overrider.css



in firefox is ok
in chrome is ok
in other

You're not first, check "web fonts ie 11" in Google - but with this I can not help now.

I have to also read more about this IE issue.

p.s.
I have found this information:

Is it possible that IE10 does not render web fonts if Security Mode is activated? After deactivating (Internet options -> security) my websites were displayed correctly.

So maybe you have to check this settings on your IE11 also.


Second tip: https://github.com/keithclark/selectivizr/pull/49

(Internet options -> security)

What else?




Please answer the question below also

I have no idea, I send you info what I have found.
If this is a bug of IE 11 - nobody will help you right now, until they fix it.

New info links:
1) http://stackoverflow.com/questions/3694 ... work-in-ie
2) http://connect.microsoft.com/IE/feedbac ... -dont-work
3) http://connect.microsoft.com/IE/feedbac ... ts-problem

Hi,

if not open another topic, but I need to change the font of the titles of the products

.productdetails-view h1


for a font google

I've done it this way




this is title i need change



and this is url the web-site


http://petbox.cl/index.php/polerones/po ... lar-detail


and not work...

ok,
try to insert only : Shadows Into Light
in font-family field, without ' or , or second font name.

not work

Because, you still have wrong Font URL:
must be

Code: Select all

http://fonts.googleapis.com/css?family=Shadows+Into+Light

hmm, why you added wrong? Next time use : http://www.google.com/fonts - generator

I have described all procedure in details few months ago ---> http://www.gavick.com/documentation/gen ... -the-menu/


Thanks to your problem I have found that we had small error on our other wiki document (old one), which probably was(?) your inspiration.
Sorry for that. I will update it in next few minutes.

Done.
Updated , now should be clear : http://www.gavick.com/documentation/joo ... gle-fonts/

I need to use the font just says

and I can not mark or unmark



that means serving me?

i live latin america and I need the characters to Spanish


but I can not find the link that says something like

+ latino + latino

the font is that

http://www.google.com/fonts/specimen/Shadows+Into+Light

but does not work

Maybe this font have only one setting. We don't have control under Google Fonts settings

hello, not seen in the IE11 source correctly, but you just replied to google font, in this case I'm not taking google font if I uploaded a source

and other browsers works perfectly

Code: Select all

 @font-face {
   font-family: 'windsor_handregular';
    src: url('windsor-hand-webfont.eot');
    src: url('windsor-hand-webfont.eot?#iefix') format('embedded-opentype'),
         url('windsor-hand-webfont.woff') format('woff'),
         url('windsor-hand-webfont.ttf') format('truetype'),
         url('windsor-hand-webfont.svg#windsor_handregular') format('svg');
    font-weight: bolder;
    font-style: normal;

}

.gkMenu > ul > li > a, .gkMenu > ul li div.childcontent a
{font-family: 'windsor_handregular'; font-size:50px; color: #ffffff;}

thanks!

I've read than IE have problems with Google fonts, but I don't know why - political issues, or maybe just those companies do not like each other ?

As you see "this is not a bug it's a feature" as people from Apple would say.

but I placed typography is not google font, but that went by fontsquirrel

http://www.fontsquirrel.com/tools/webfont-generator


and how I can fix that? ... or at least not look so great in this specific case for this browser

Could you send me a link to your page + access to back-end + package created fontsquirrel (PM)
I will check it.

I have checked under following browser (Win7):
1) Firefox 27 - 'windsor_handregular' and others seems to be loaded, menu looks nice
2) Chrome - ok
3) Opera - ok
4) IE 11 -- not woking

But I saw in your override.css that you have links to all type of fonts,
but in /css folder was only one type TTF e.g. windsor-hand-webfont.ttf - where is rest ???! hello !!!

Fonts with .eot , .svg and .woff -- must be in this same folder and must have this same filenames !!! as you had here in CSS file, for example

Code: Select all

    src: url('windsor-hand-webfont.eot');
    src: url('windsor-hand-webfont.eot?#iefix') format('embedded-opentype'),
         url('windsor-hand-webfont.woff') format('woff'),
         url('windsor-hand-webfont.ttf') format('truetype'),
         url('windsor-hand-webfont.svg#windsor_handregular') format('svg');
    font-weight: bolder;
    font-style: normal;


Try again, don't worry.

I copied for you font for menu -- windsor - and now works under IE 11

ie11.png

PLEASE ! Do this same as I did for rest of fonts and all will be working fine !

I did not understand what I did, please explain it better

1) In /css - folder you have to have all fonts not only with .tff extension.
2) IE request .eof fonts in this same folder ! You forgot about them
3) Name of files have to be this same as you add in override.css -- exactly this same , no big letters etc.
4) Please add rest of font files in css folder.

Please login into your hosting account in template folder in CSS folder there you will see what files I have added yesterday night.

fonts.png

fonts-2.png

Now do this same for rest of fonts : amaticsc-regular-webfont, shadowsintolight-webfont. etc.
You are "Expert Boarder" , right. I hope that now all is clear.

p.s.
Remember to update your Joomla to 2.5.27 - probably you have to use manually method.