Recent
Categories
View Replies (9)

Custom Font in Chloe Template issues

  1. Issue
0
Votes
Undo
  1. JudgeD
    JudgeD
  3. Commercial Templates
  4. Friday, 06 January 2023
  5.  Subscribe via email
Hi,
I am customizing the J4 J51 Chloe template (under development on a local VM/Windiows/XAMMP) and adding a couple of custom fonts the Business uses. I have web font files (eot, svg, ttf, woff2, woff) and loaded them to the ./templates/j51_chloe/fonts/ folder and added the Font CSS to the enabled ./tempaltes/j51_chloe/css/custom.css.
Although I am unable to see the Fonts in the template_style, topography styling font list to apply to headings.

I followed the Q/A's: https://www.joomla51.com/forum/custom-font-ariana & https://www.joomla51.com/forum/custom-font-cachet-sophia-template
and added custom H1/H2 css styling, but it still does not pick up the custom fonts on the web page (tried 3 browsers for compatibility: Firefox, MS Edge, and Chrome)

Do I need to add alternative H1/H2 custom css styling elsewhere?

Attached image of custom.css
Any help would be much appreciated.
Chris.
Attachments (1)
custom.css.JPG custom.css.JPG
Responses (9)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

This has changed with recent versions of Joomla however if you have template CSS in your media folder then it is best to place your custom.css there.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

Since you have set important on these CSS rules, they should be applied regardless of the order in which your CSS is loaded (assuming important is not used elsewhere). If you have an online version of the issue I can examine why your fonts are not been applied?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
JudgeD
JudgeD
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,
I'll see what I can do about getting it uploaded to a temp site and get back to you.
There is nothing else that needs to be done to ensure the custom.css file is utilised on the site?

I noticed, as I am configuring a Blog/Articles page that in the standard template and the demo installer the style was not applying the same and noticed that the global configuration settings were different. I changed a few settings, but my images still do not apply the same - apart from the global configuration is there other inline styles I need to apply to ensure the formatting is the same?

Kind regards,
Chris
  1. more than a month ago
  2. Commercial Templates
  3. # 3
JudgeD
JudgeD
Accepted Answer Pending Moderation
0
Votes
Undo
Don't worry about the Blog/Article question - fixed that up with the right menu item category: Category Blog - Alternative. :)
  1. more than a month ago
  2. Commercial Templates
  3. # 4
JudgeD
JudgeD
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,
I have a temp website setup (still in dev) - let me know when you are ready to access and I will switch it on.
Let me know where to send the access credentials.
http://joomla-devtemp.australiaeast.cloudapp.azure.com/
Best regards
Chris.
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

Could I ask you to check the URL provided as it appears to currently give us a timed-out error. Details for temporary administration access to your Joomla installation can be sent to info@joomla51.com. For our reference please paste a link to this post in your email.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 6
JudgeD
JudgeD
Accepted Answer Pending Moderation
0
Votes
Undo
Hey, details were sent and the Website/URL is up.
  1. more than a month ago
  2. Commercial Templates
  3. # 7
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Chris

I have copied your CSS to your media folder and replace relative URLs to absolute URLs. Your font appears to be now displaying correctly...

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 29, 2022 */

/*! Template Custom Font Files for YLP */ 



@font-face {

    font-family: 'CelticBold';

    src: url(''//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic-webfont.eot');

    src: local(''),

		url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic-webfont.eot?#iefix') format('embedded-opentype'),

        url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic-webfont.woff2') format('woff2'),

        url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic-webfont.woff') format('woff'),

        url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic-webfont.ttf') format('truetype'),

        url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic-webfont.svg#CelticBold') format('svg');

    font-weight: normal;

    font-style: normal;

}



@font-face {

    font-family: 'Celtic-MD';

    src: url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic_md-webfont.eot');

    src: local(''),

		url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic_md-webfont.eot?#iefix') format('embedded-opentype'),

        url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic_md-webfont.woff2') format('woff2'),

        url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic_md-webfont.woff') format('woff'),

        url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic_md-webfont.ttf') format('truetype'),

        url('//http://joomla-devtemp.australiaeast.cloudapp.azure.com/templates/j51_chloe/fonts/celtic_md-webfont.svg#Celtic-MD') format('svg');

    font-weight: normal;

    font-style: normal;

}





h1, h1 a:link, h1 a:visited {

	font-family: Celtic-MD !important;

}



h2, h2 a:link, h2 a:visited {

	font-family: CelticBold !important;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 8
JudgeD
JudgeD
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks :) did I have the css in the wrong folder to start with, or does it take precedence being in the media folder?
Much appreciated
Chris.
  1. more than a month ago
  2. Commercial Templates
  3. # 9
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok