Joomlart Simpli Template with a local Custom Font?

kmminer

I am trying out the Joomlart Simpli Template, it looks great, but is there a way to use a custom local font instead of a google font? I haven't figured out how to do that and I don't have it on a live site yet for anyone to see it.

Thanks.

Joshua-M

Hi,

You have to upload your font files into template directory and use @font-face declaration within your css file.
Please check example here:
https://www.gavick.com/documentation/joomla/templates/customization/how-to-add-use-additional-font
It's for gavick templates, so please use custom.css file instead of override.css

Hope it helps..

Cheers
Joshua

kmminer

Thank you for your help, that information was great, and I think that I had implemented most of that. However I am still having a issue. When I inspect the text that I want to have a custom h1 font, it references a file "13.css" that overrides the custom.css font for <h1> Cachet Bold with the Google font that is set in the style of the template. I have three custom fonts: Cachet Book, Cachet Bold, Cachet Medium.

I made a temporary page on our website, to try out the simpli template: http://fairacresymca.com/our-y
I am trying to make the text "Fair Acres Family YMCA" an <h1> with the Cachet Bold Font. All text has to be Cachet or Verdana, so I will not be using any google fonts.

Any help is appreciated.
Thank you.

aman204

kmminer I am trying to make the text "Fair Acres Family YMCA" an <h1> with the Cachet Bold Font. All text has to be Cachet or Verdana, so I will not be using any google fonts.

You can change this in custom.css file :

h1 {font-family: "Cachet-Bold", Verdana, Sans-Serif;}

h1 {font-family: "Cachet-Bold", Verdana, Sans-Serif !important;}

as the specific css declaration is being supersuded so necessary to add !important for it to apply

Kindly ensure to clear your browser cache if changes dont reflect

kmminer

Thank you for the suggestion. It still did not work for me, but I put the css in the template style->Advanced->Custom Code->After Head and that worked.

I would prefer to find a way to just make custom changes in the custom.css file, but I don't know enough to understand why it is getting superceded by the other css file. At least I can make it work for now.

Joshua-M

Hi,
It doesn't work from your custom.css file, because of typo, I can see:

h1 {
font-family: "Cachet-Bold", Verdana, Sans-Serif; !important; 
}

but it should be:

h1 {
font-family: "Cachet-Bold", Verdana, Sans-Serif !important; 
}

!important is ignored, because it's after semicolon.

Hope it helps..

Cheers
Joshua

kmminer

Thank you sooo much! That was the problem! I should have know it would be a syntax error...arrgh!

Thank you both again!