problem using squirrel font

Support desk for Multipurpose Quark Theme
GK User
Wed Apr 27, 2016 10:40 am
Hi there,

I followed your advice here: https://www.gavick.com/documentation/joomla/templates/customization/how-to-add-use-additional-font

but still does only get Arial although 'mergelight' (which I uploaded in the css) is installed and even showed as first choice when looking at firebug for h1 / h2.

Please have a look here: http://neu.maximize-your-business.de/

Any advice is highly appreciated.

Thanks a lot.
User avatar
Gold Boarder

GK User
Wed Apr 27, 2016 8:37 pm
Hello,

If you will look to the console, then you will see the following message:

Code: Select all
Failed to decode downloaded font: http://neu.maximize-your-business.de/merge.light-webfont.woff2


it seems that your font files are corrupted.
User avatar
Moderator

GK User
Thu Apr 28, 2016 12:19 pm
Thanks a lot for your answer - I started all over again (with a new downloaded font from another distributor) but still - this new font doesn't show up although I don't get the error in the script (at least I can't see an error there).
User avatar
Gold Boarder

GK User
Thu Apr 28, 2016 2:54 pm
Are you sure that font-family should be set as "merge_light"? Because for me it should be "Merge Light" or "MergeLight".
User avatar
Moderator

GK User
Thu Apr 28, 2016 4:39 pm
fonts.jpg
you are so kind to help me out! Your advice is really appreciated.

Let's see:

this is the .css which I put into the override
Code: Select all
@font-face {
    font-family: 'merge_lightregular';
    src: url('merge_light-webfont.eot');
    src: url('merge_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('merge_light-webfont.woff2') format('woff2'),
         url('merge_light-webfont.woff') format('woff'),
         url('merge_light-webfont.ttf') format('truetype'),
         url('merge_light-webfont.svg#merge_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;}


I then put this in the override.css as described in the documentation. (Yes, override is "on").

I copied the webfont files named 'merge_light-webfont.eot' etc. into the folder css of the templace - and because this changed nothing I also created a folder named "merge_lightregular" in /templates/gk_quark/fonts(/merge_lightregular).

In this folder I also copied all the font files.

I have attached 2 screenshots.

I then went back to the joomla backend templates/fonts chose the temlate gk_quark - Default the "tab" Fonts and chose Squirrel/merge_lightregular which is shown in the dropdown menu.

The effect is "Arial".

There must be a mistake but I can't figure out what I am making wrong. :?
User avatar
Gold Boarder

GK User
Fri Apr 29, 2016 9:15 pm
Please try to change the font-family to "merge_lightregular", because in fact it is your font-family name as it is defined in your CSS code.
User avatar
Moderator

GK User
Mon May 02, 2016 9:20 am
I tried this before and repeated the changes again.

I changed the font to merge_lightregular-webfont.eot etc. and tried also merge_lightregular.eot etc. but the font doesn't show up either.

There is still Arial seen.

And I don't understand why the font should named like this. Doesn't the css font name the font:

'merge_light-webfont.eot' etc.?

Just the folder - the font-family - is called merge_lightregular so I did.
User avatar
Gold Boarder

GK User
Wed May 04, 2016 8:17 pm
That's very strange. In fact I have no more ideas what can cause your issue. The easiest solution will be find a similar replacement on the Google Fonts directory. BTW it will be also a better solution for the page speed as Google Fonts uses CDNs which makes font loading much faster.
User avatar
Moderator


cron