0
Votes
Undo
  1. davec62
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 03 October 2022
  5.  Subscribe via email
Hi Ciaran

I have a query ref loading a font locally. I usually load the font into the font folder and then apply the following css.


@font-face {
font-family: 'Courgette';
font-style: normal;
font-weight: 400;
src: url('../fonts/courgette-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/courgette-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/courgette-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/courgette-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/courgette-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/courgette-v13-latin-regular.svg#Courgette') format('svg'); /* Legacy iOS */
font-display: swap; }


However using the code above the font does not load. If I add the full URL inc domain then the font loads as required. The site is under development at the moment so is in /2022 directory. I have already sent you login info for another query on 24/09/22

I did try using the code below in googlefonts.php and calling it from Google which is not something I wanted to do and it still did not work.


$googleFonts['Courgette'] = 'Courgette';


I would appreciate your thoughts?

Thanks

David
Accepted Answer Pending Moderation
0
Votes
Undo
Hi David

I have amended your CSS to the following which will allow you to not have to include the domain to the path. Hopefully this is what you have in mind?

@font-face {
font-family: 'Courgette';
font-style: normal;
font-weight: 400;
src: url('./templates/j51_layla/fonts/courgette-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('./templates/j51_layla/fonts/courgette-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./templates/j51_layla/fonts/courgette-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('./templates/j51_layla/fonts/courgette-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('./templates/j51_layla/fonts/courgette-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('./templates/j51_layla/fonts/courgette-v13-latin-regular.svg#Courgette') format('svg'); /* Legacy iOS */
font-display: swap;
}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

The solution does work. However I would like to add this to a custom.css file and this then doesn't have the desired affect. Appreciate it if you could help please?

It is worth noting that having added the

$googleFonts['Courgette'] = 'Courgette';



The font doesn't load from Google. Maybe this is no longer an option going forward due to privacy laws etc?

Thanks

David
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
I have now resolved this by doing the following.

I created a folder called fonts within the dev website, 2022/fonts and added the font files to that folder. So the folder is not in the template itself. I then used the following in the custom.css file.


@font-face {
font-family: 'Courgette';
font-style: normal;
font-weight: 400;
src: url('../fonts/courgette-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/courgette-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/courgette-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/courgette-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/courgette-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/courgette-v13-latin-regular.svg#Courgette') format('svg'); /* Legacy iOS */
font-display: swap;
}


I have then applied the styles where required which such as H1, H2 etc.

David
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hi David

Excellent work.. your solution looks perfect. Thank you for sharing :)

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Sorry for adding my thoughts to this but if I read this, for me it seems this cannot work.

Why?

If I add a folder to Joomla installation root called "/fonts" and then add a font reference to a custom.css that is located in J4 in /media/templates/site/j51_xxx/css (or in /templates/j51_xxx/css in a J3 installation) and reference looks like
url('../fonts/courgette.....
than the reference points to this folder: /media/templates/site/j51_xxx/fonts (or /templates/j51_xxx/fonts in J3) and not to Joomla root /fonts.
This "../" means: go one folder down in hierachy and go to the folders referenced there.

In the above mentioned path in the custom.css the file (custom.css) must be located in root /whateverfolder/custom.css to work.
Then the reference to "../fonts/" can work .....

Maybe one should check the source code of the webpage to see if the fonts are still referenced by google and not locally?

If I am wrong, let me know pls. I only refer to the above post ;)
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Oliver

thanks for your feedback. You are probably correct. I will take a look tomorrow and check folders etc. The font is loading and working as expected. I will add an update tomorrow.

David :)
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Oliver

I have checked and the fonts folder is in the media/templates/site/j51_layla as well. So your point is correct.

David :)
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • Page :
  • 1


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

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