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.
Good [after] morning Backligh2ers...
Grab a nice hot cup of coffee if you wish to read further.
Please note that I have very little coding experience in HTML, so I am being quite long-winded in my post. Appropriate apologies to all!
I have purchased some web fonts from MyFonts.com which I wish to make use of in my BL2 created/managed website.
In the package I received from them, There are a whole bunch of fonts in different flavours (i suspect this is for compatibility between different browsers / platforms) and some instructions as to how to install them as well as a number of lines of code to be added to various files.
I shall quote loosely from the instruction sheet provided in the package I received:
<begin quote>
The MyFonts Webfonts Kit is a collection of code and font files which allow all modern browsers to use webfonts in a standardized way. All you need to do is copy and paste some sample code, and make some edits to your CSS. Three simple steps then you're on your way.
1. Upload fonts to website:
Upload the contents of the Kit to your server. This is typically done using some type of FTP program — the same way that you upload images and other files to your website. Typically it is easiest if you upload all the files and folders to the root folder of your site. You can alternately create a subfolder (or use an existing one) and put the Kit there, put them wherever you want. Be sure to make note of the location you'll need it in step two.
2. Edit your site:
Include a reference to the Kit. Locate the CSS file in the Kit’s main folder. You should place a reference to this file in the head section of your website’s HTML code. Make sure that the reference appears on all HTML pages of your site.
This will link the webfonts from the Kit to your website. If you uploaded the Kit to the root folder of your site, then you can just copy and paste the code below into your site's head. If you uploaded the Kit to a subfolder, you’ll need to adjust the path to the font files in the CSS file.
ed.: many lines of font licensing information all commented out followed by this line of code:
<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">
3. Edit your CSS:
Now for the fun part! You'll need to assign the webfonts (font-family) to tags, classes and other CSS selectors. You need to decide where on your site you would like to use the webfonts. Using CSS, you can assign webfonts to specific areas of your site. There are several ways to do it, here are the basics and we’ll explore more advanced options in the 'Sample code' section below.
A simple method is to make a new class selector and then assign the family names of the webfonts. Whereever you want to use SommetSlabRegular just assign the class in your HTML. Here’s how it is done:
.SommetSlabRegular {
font-family: SommetSlabRegular;
font-weight: normal;
font-style: normal;
}
ed.: This pattern of code was repeated for the 11 other fonts in the kit. Omitted here for brevity (LOL!)
<end quote>
There is also some additional information... I realise that some of the following would be selectable from within the BL2 Page Templates, but I have included the examples here to show how they are used in a 'standardised HTML written' site... quoting yet again:
<begin quote>
Sample CSS
Lets look at some fancy ways you can use CSS & CSS selectors to apply webfonts to your site!
If you'd like to assign a font to the entire site, simply use the body tag selector in your stylesheet.
body { font-family: SommetSlabRegular; }
If you’d like all headings to be formatted using this webfont, you need to assign it to the h1…h5 elements. Remember to assign the weight and style of the font, especially if you don't have the entire family. Use the following CSS declaration in the stylesheet for your website:
h1, h2, h3, h4, h5 {
font-family: SommetSlabRegular;
font-weight: normal;
font-style: normal;
}
You can also assign the webfont to a specific HTML class, which will allow you to easily mix different webfonts on the same page. Use the following CSS declaration in the stylesheet for your website:
.SommetSlabRegular {
font-family: SommetSlabRegular;
font-weight: normal;
font-style: normal;
}
Then, use the class as follows in the body section of your HTML:
<p class="SommetSlabRegular">Hello World!</p>
You can use any valid CSS selector (such as an HTML tag name, a class or an ID, or a combination of those) if you want to format a specific portion of the document. There are tons of different things you can do with CSS, so have some fun!
<end quote>
My question is this:
As BL2 is a website generator, and not a 'standardised HTML web site', Where do I add the code 'referencing the MyFontsWebfontsKit.css 'into the head section of my website's HTML code' as mentioned in Step 2 above, and into which .CSS file do I add the code referenced in Step 3 above - and where in those files (top, bottom, middle somewhere) do I place the relevant code.
FYI:
I use Coda2 to access my site directly.
I have placed the 'MyFontsWebfontsKit.css' file as well as the directory containing all the fonts: 'webfonts' in the root ('public_html').
I have already created and referenced in my templates the following:
1. a custom CSS file based on \backlight\custom\css\custom-sample.css (I have successfully added Rod Barbee's code for the different coloured contact email success message... and removed the hideous red background test- LOL). and,
2. a custom PHP file based on \backlight\custom\phplugins\phplugins-pangolin-sample.php (This file is used unmodified)
<deep breath>
My sincere thanks in advance to anyone who is able to assist me in this matter.
Kind regards,
Pete N
Offline
You’ll need to use phplugins to include the reference to the font kit’s css file.
Use the ttg_head hook.
http://backlight.theturninggate.net/doc … _phplugins
This documentation is actually a little outdated for Backlight 2
Instead of using this syntax:
function __HOOK__( $style, $path ) {
echo 'Use this
function __HOOK__() {
echo '(See this sticky post:
http://community.theturninggate.net/vie … hp?id=8966 )
Full function would be:
function head() {
echo '
<link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">
';
}Change the href= section to reflect the actual location of your web font kit
You’ll need to use custom css to add any classes you wish to create.
http://backlight.theturninggate.net/doc … tylesheets
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Good [after] morning Rod,
I'm not sure where these statements need to be included?... In the custom PHPlugin I copied?... or the custom CSS file I copied? Where should the webfoot kit CSS file and directory containing all he fonts have to be?... in the /public_html/ directory?... or in the /public_html/backlight/custom/css/ subdirectory?
Can you tell I have no idea of what I'm doing? LOL.
Ah...and if it all works, how do I know it worked? Will I see it in the Template under Typography - base font properties - font family dropdown?
Thanks,
Pete
Last edited by Pete_N (2018-11-18 19:44:02)
Offline
Hi Pete,
The php ( function head()...) goes in the phplugins file.
The css goes in your custom css file.
.SommetSlabRegular {
......
h1, h2, h3, h4, h5 {
......
You won’t see your fonts listed in the Backlight interface. Instead, you need to write custom css to replace fonts chosen in Backlight with the ones you’ve purchased. (See what you posted above under “Sample CSS”)
Or you can assign fonts selectively to text. You’ll need to write your text in html for this. (Again, see what you posted above under “Sample CSS”)
You can upload your fonts anywhere under the public_html folder. You just need to write the path to the css file correctly. The easiest place to upload is probably the root of your site (directly in the public_html folder)
If you upload the font kit to the root of your site, then just follow their instructions and use their code in your phplugins function.
Note: if there are ANY single quote marks in that code, you’ll need to “escape” them by preceding them with a backslash, e.g. \’
I know, that’s a lot to jump into all at once: php, css, html.
Be sure to use a plain text editor when editing the phplugins and css files.
Things might not work as expected right away. If your site turns into a blank white screen or you get a php error message, disable phplugins and post the code you’re using here on the forum.
If nothing at all seems to happen (your fonts aren’t showing up), post a link to your site so we can probe it and see where things went screwy.
And if you tell us what you want to accomplish, like replace all fonts with your fonts, apply your fonts selectively, etc., we can help with writing the css/html to do that.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thanks very much for your reply Rod.
Okay... Here we go! I'm going to have a play with a test home page. (this should be fun!)
Pete
Offline
Thanks again for your assistance Rod,
However... To no avail. I may be placing some code in the wrong place, referring to the webfoot CSS using the incorrect syntax, or there may be some difficulty implementing the font vendor's 'number of page views' code that counts the number of times the pages that use my fonts are accessed. There is a licence limitation that allows 10K views per month and there's some code that increments a counter in my account with the webfoot provider.
How would you like me to provide access to BL2 on my website. I shall provide a 'guest updater' login and password and would prefer to do this by direct email contact.
Regards,
Pete.
Offline
you can use the email link under my name, to the left in all my posts.\
but seeing the code you're implementing and how you're doing it is what we really need to see. And a link to your site. That always helps.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline