Recent
Categories
View Replies (14)

Attempting to add fonts to J51-Ensley

  1. Issue
0
Votes
Undo
  1. keithvb
    keithvb
  2. Sherlock Holmes
  3. Commercial Templates
  4. Saturday, 20 March 2021
  5.  Subscribe via email
Ciaran,

Using j51-Ensley demo files.

Added the following fonts to templates/j51_ensley/fonts

AvenirLTStd-Book.woff
AvenirLTStd-Book.woff2
AvenirLTStd-Medium.woff
AvenirLTStd-Medium.woff2
AvenirLTStd-Roman.woff
AvenirLTStd-Roman.woff2

Added the following text to templates/j51_ensley/css/custom.css

@font-face {
font-family: 'Avenir LT Std';
src: url('../fonts/AvenirLTStd-Medium.woff2') format('woff2');
src: url('../fonts/AvenirLTStd-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;

}

@font-face {
font-family: 'Avenir LT Std';
src: url('../fonts/AvenirLTStd-Roman.woff2') format('woff2');
src: url('../fonts/AvenirLTStd-Roman.woff') format('woff');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'Avenir LT Std';
src: url('../fonts/AvenirLTStd-Book.woff2') format('woff2');
src: url('../fonts/AvenirLTStd-Book.woff') format('woff');
font-weight: normal;
font-style: normal;

}

Enabled custom.css in Templates: Edit Style/Custom CSS/Load http://custom.css/YES

Added woff2 to “Valid Font Formats” (woff2,woff,ttf,otf)

In Templates: Edit Style/General/Logo/Logo Font couldn’t find new Avenir fonts.

What have I left out?

Thanks,
Keith
Responses (14)
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
I've solved 2 of my problems.
1. Thanks Ciaran for the flexbox tip. After digging into flexbox (new to me) I learned enough to work with it.
2. The reason I couldn't see the custom.css rules was due to the browser cache not flushing. I discovered this by removing custom.css which had no effect on my preview until I cleared the cache.

Thanks for all your help.

Keith
  1. more than a month ago
  2. Commercial Templates
  3. # 1
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
I'd like to add that custom.css is not being accessed for other changes I want to make.
It works for me in other templates but for some reason not in Ensley...
Added this to reposition the info box
/* move info box */
.layerslideshow .item-align-center .info {
align-items: left !important;
}
.layerslideshow .info {
top: 200;
left: 0;
right: 0;
bottom: 0;
}
----
Noticed that the new fonts appear correctly in "Templates customize: j5-Ensley" / fonts
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Keith

Please include a URL to your site and I will examine these issues further.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
http://artgallery.keithvb.com/

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

Your font file doesn't not appear to be loaded which would indicate an incorrect path. Try replacing all paths with a full URL...

@font-face {

font-family: 'Avenir LT Std';

src: url('http://www.artgallery.keithvb.com/templates/j51_ensley/fonts/AvenirLTStd-Roman.woff2') format('woff2');

src: url('http://www.artgallery.keithvb.com/templates/j51_ensley/fonts/AvenirLTStd-Roman.woff') format('woff');

font-weight: normal;

font-style: normal;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks. I tried it and no change.
I have discovered that custom.css isn't loading.
In attempting to move the info box on the home page to the left I added

.layerslideshow .item-align-center .info {
align-items: left !important;
}

to custom.css and custom.css doesn't appear in the inspector (see attached image)
Enabled custom.css in Templates: Edit Style/Custom CSS/Load http://custom.css/YES
so I suspect I missed something.

Keith
Attachments (1)
artgallery-keithvb.com.jpg artgallery-keithvb.com.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Keith

Your custom.css appears to be loading without any issue. For your CSS rule try the following instead as 'align-items: left;' is not valid....

.layerslideshow .item-align-center .info {

    align-items: flex-start;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
keithvb
keithvb
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for your help. i suspect I've done something strange...
Nothing is working as I think it should.
I'm starting over.
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Great... thank you for the update.

A quick tip on refreshing your browser with a clean cache is to use CTRL + F5.

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

I am trying to add the same Avenir font to Chloe. I don't see the same custom.css as described by Keith. Can you help me with instructions to load Avenir Next Condensed.ttc, Avenir Next.ttc, and Avenir.ttc please?

Many thanks

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

The custom.css file can be added to your templates CSS folder. Once added you can enable its use via the Custom CSS tab within your template style settings.

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

I have amended the custon.css file as directed, and set load custom.css to Yes, refreshed the browser, but still do no see the fonts. Would you kindly take a look please?
References
  1. https://oasttheatre.com/administrator/index.php nimda/BJ04ume1
  1. more than a month ago
  2. Commercial Templates
  3. # 12
bibbp
bibbp
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
No success, so have gone with Monserrat, hopefully my client will accept that.
  1. more than a month ago
  2. Commercial Templates
  3. # 13
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Peter

I have just checked your font URLs and they appear to be giving me a 404 error for each font (eg. https://oasttheatre.com/public_html/templates/j51_chloe/fonts/avenirltstd-book-webfont.woff). Maybe it should be https://oasttheatre.com/templates/j51_chloe/fonts/avenirltstd-book-webfont.woff instead?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 14
  • 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