Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
Hi all,
how can I use my own font (not Google or Adobe) for the masthead title instead of a logo.png in Backlight 2?
Thanks in advance.
Best regards,
Oliver
Offline
Rod outlined the steps the other day: http://community.theturninggate.net/vie … 824#p55824
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Daniel, thank you for your help!
I am not using a Webfontkit. I just want to implement 1 font for the title.
Is there an example step1, step2, step3???
Thank you in advance.
Best regards,
Oliver
Offline
1 upload the font to your site
2 reference it in your css using the @font-face rule: https://www.w3schools.com/cssref/css3_p … e_rule.asp
3 use custom css to assign the font to the title
Depending on what you mean by title. If it's one heading on one page, you could just use some inline styling.
If you want to use the same font for all of one type of headings (say, all h2 headings) then custom css for your h2 headings.
If for all headings, you could try adding the name of the font to the Prepend font-family w/ section of Typography in the page template.
If it's a title in metadata or an album title, then custom css for that particular selector.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hi Rod, thank you!
I need it only for the Title/Logo.
I uploaded the font to: backlight/custom/phplugins/fonts/
I referenced it in my custom.css:
@font-face {
font-family: "Xena";
src: url("/backlight/custom/phplugins/fonts/Xena.eot"); /* IE9 Compat Modes */
src: url("/backlight/custom/phplugins/fonts/Xena.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("/backlight/custom/phplugins/fonts/Xena.woff") format("woff"), /* Modern Browsers */
url("/backlight/custom/phplugins/fonts/Xena.ttf") format("truetype"), /* Safari, Android, iOS */
url("/backlight/custom/phplugins/fonts/Xena.svg#svgFontName") format("svg"); /* Legacy iOS */
}
NOW: how to assign to the Title/Logo? By phplugins? If, how???
Best regards,
Oliver
Offline
Fo the Masthead? Try entering it in the Prepend font-family area in the Masthead section of your page template.
Otherwise, custom css
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Doesnt work in Pangolin, but only in the WP-Theme :-(
Have this in the phplugins:
function header_top()
{
echo '
<div data-lang="en">
<div class="masthead masthead-primary">
<div class="content content_width">
<div class="grid_12" style="text-align:left;">
<div class="col_10">
<a href="https://rome-phototours.com/">
<h1>
<span>ROME PHOTO TOURS & WORKSHOPS</span>
<br><span class="site__tagline">Photographing the Eternal City</span></h1></a></a>
</div>
<div class="col_2 omega">
<div align="right" style="margin:0px;">
<div id="TA_certificateOfExcellence51" class="TA_certificateOfExcellence"><ul id="pBNRJ7FIS" class="TA_links qYxwlWPX"><li id="1Nx6RS" class="tguyNf"><a target="_blank" href="https://www.tripadvisor.com/Attraction_Review-g187791-d4420656-Reviews-Rome_Photo_Tours_Workshops_by_Oliver_Blum_Photography-Rome_Lazio.html"><img src="https://www.tripadvisor.com/img/cdsi/img2/awards/CoE2017_WidgetAsset-14348-2.png" alt="TripAdvisor" class="widCOEImg" id="CDSWIDCOELOGO"/></a></li></ul></div><script async src="https://www.jscache.com/wejs?wtype=certificateOfExcellence&uniq=51&locationId=4420656&lang=en_US&year=2017&display_version=2" data-loadtrk onload="this.loadtrk=true"></script></div>
</div>
</div></div></div></div>
<div data-lang="de">
<div class="masthead masthead-primary">
<div class="content content_width">
<div class="grid_12" style="text-align:left;">
<div class="col_10">
<a href="https://rome-phototours.com/">
<h1><span>
<img class="identityplate" alt="ROM FOTOTOUREN & WORKSHOPS" title="ROM FOTOTOUREN & WORKSHOPS - HOME" src="https://rome-phototours.com/backlight/designer/?c=page&a=image&p1=4" srcset="https://rome-phototours.com/backlight/designer/?c=page&a=image&p1=4, https://rome-phototours.com/backlight/d … image&p1=1 2x" width="680" height="53" />
<br /><span class="site__tagline">Fototraining in der Ewigen Stadt</span></span></h1></a>
</div>
<div class="col_2 omega">
<div align="right" style="margin:0px;">
<div id="TA_certificateOfExcellence49" class="TA_certificateOfExcellence"><ul id="eKLhgcW6Coq" class="TA_links 8EEJLP"><li id="ljyi3k99Ck" class="aZA7u1X"><a target="_blank" href="https://www.tripadvisor.de/Attraction_Review-g187791-d4420656-Reviews-Rome_Photo_Tours_Workshops_by_Oliver_Blum_Photography-Rome_Lazio.html"><img src="https://www.tripadvisor.de/img/cdsi/img2/awards/CoE2017_WidgetAsset-14348-2.png" alt="TripAdvisor" class="widCOEImg" id="CDSWIDCOELOGO"/></a></li></ul></div><script async src="https://www.jscache.com/wejs?wtype=certificateOfExcellence&uniq=49&locationId=4420656&lang=de&year=2017&display_version=2" data-loadtrk onload="this.loadtrk=true"></script></div>
</div>
</div></div></div></div>
';
return false;
} // END /**/
Have this in the custom.css:
@font-face {
font-family: Xena;
src: url("backlight/custom/phplugins/fonts/Xena.eot"); /* IE9 Compat Modes */
src: url("backlight/custom/phplugins/fonts/Xena.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("backlight/custom/phplugins/fonts/Xena.woff") format("woff"), /* Modern Browsers */
url("backlight/custom/phplugins/fonts/Xena.ttf") format("truetype"), /* Safari, Android, iOS */
url("backlight/custom/phplugins/fonts/Xena.svg#svgFontName") format("svg"); /* Legacy iOS */
}
Have this in the Prepend font-family area in the Masthead section:
Xena
I am thankful for any hints...
Best regards,
oliver
Last edited by volvoxturbo (2018-11-24 10:16:55)
Offline
Are you trying to assign the font to ROME PHOTO TOURS & WORKSHOPS?
If so:
<h1 style=“font-family: xena;”>.......</h1>
(You can also add fallback fonts if you wish, separating them with commas)
Could be that Prepend font-family isn’t working because you’re replacing the masthead. Just a guess.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Dear Rod,
thank you for your reply.
Yes it is for my site ROME PHOTO TOURS & WORKSHOPS.
You are right, I solved it this way:
<a href="/"><h1 style="font-family:Xena; margin-top:20px;"><span>Rome Photo Tours & Workshops</span></h1></a>
For now it makes no difference if I replace the Masthead by phplugins or not - but I'll check that again later.
Best regards,
Oliver
Offline
Pages: 1