Template fonts selection

I have uploaded my fonts to the site and use squirrel in the template fonts selection menu, followed this tutorial: https://www.gavick.com/documentation/jo ... ional-font

I have assigned the desired fonts in the fonts menu to the selectors I want. When I check the site, the style is not changed. When I check the code with the firebug I see this:

Code: Select all

#gkMainMenu, h1, h2, h3, h4, h5, h6, blockquote, .gkMenu > ul li div.childcontent header, .result-title, #gkMenuOverlayContent, .gk-newsletter input[type="button"], #gkMenuOverlayClose, #gkMenuOverlayHeader, #gkLogo.text, .gkIsWrapper-gk_storefront figcaption, .product-price span.PricesalesPrice, .gkTotal, .products .nspArt, .products .nspHeader, #gkSearch input {
    font-family: my font,Arial,sans-serif;
}

When I delete

Code: Select all

Arial,sans-serif

in the firebug, the site changes the style of the fonts to my font finally.

My question is, why the font is not changed to my font. It clearly adds it to the code, but doesn't use it nevertheless.

Do I have to add the font to the selectors manually via CSS override? E.g. with important? Why doesn't the menu fonts in the template doesn't work as desired?

I see, I have found the problem.

The path in the Overide.css file have to be the precise paths to the font, inlcuding the font directory.

That is

Code: Select all

url('../fonts/my font directory/my font.ttf')

Strangely this doesn't change the problem I experience.

It still shows the same and my font is not used.

Code: Select all

    #gkMainMenu, h1, h2, h3, h4, h5, h6, blockquote, .gkMenu > ul li div.childcontent header, .result-title, #gkMenuOverlayContent, .gk-newsletter input[type="button"], #gkMenuOverlayClose, #gkMenuOverlayHeader, #gkLogo.text, .gkIsWrapper-gk_storefront figcaption, .product-price span.PricesalesPrice, .gkTotal, .products .nspArt, .products .nspHeader, #gkSearch input {
        font-family: my font,Arial,sans-serif;
    }

Hi

.ttf format is only recognised by some browsers. Please read this article to learn more about custom fonts https://css-tricks.com/snippets/css/using-font-face/

I have there the whole set of web fonts...

Hi

Ok, but are You loading all of them as in this example:

Code: Select all

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}


can You present how it's done on Your website? Or show use Your website with pointing to the place the custom font is used ?