I’m pretty sure that I’m using the correct php file and it’s (to my knowledge) correctly written. Is there a way I can let you see the file?
You can copy/paste it here. Or you can copy paste it into a private message.
You can be sure you’re using the correct file by going to your page template and looking in the Advanced Setting section.
I am using pangolin-pideja.php
<?php
function head() {
echo '
<link rel="stylesheet" type="text/css" href="/backlight/custom/css/MyFontsWebfontsKit.css">
';
}
function user_load($style, $path) {
$g_tsvrl = explode(' ', $style); // Extract gallery type
define ('G_STYLE', strtoupper($g_tsvrl[1])); // and set global for later
$g_path = str_ireplace('\\','/',$path); // change \ to /
$chunks = explode('/',$g_path); // and put into array
define ('G_PATH', strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
//define ( 'TTG_SITE', ''); // set new site root for navigation, resources, etc.
}
if (defined('BACKLIGHT_HOOK')) {
require_once(realpath(BACKLIGHT_HOOK).'/modules/module-designer/application/helpers/APHPlugins.php');
}
class PHPlugins extends APHPlugins
{
/* breadcrumbs */
function page_match($gallery) {
if (substr($_SERVER["REQUEST_URI"], 0, strlen($gallery)) == $gallery) {
return 1;
} else {
return 0;
}
}
/* Replace the mobile menu icon with the word "Menu" */
function scripts () {
echo'
<script>
$(".page__toggle__buttons label ul").replaceWith("<p>Menu</p>");
</script>
<script>
jQuery(document).ready(function($){
$(\'#search form\').find("input[type=text]").each(function(ev)
{
if(!$(this).val()) {
$(this).attr("placeholder", "Placer le terme de recherche entre des guillemets");
}
});
});
</script>
';
{
/* No right click */
echo '<script> window.oncontextmenu = function () { return false; } </script> ';
return false;
}
}
/* Display the logo in pallet_top */
function pallet_top_title () {
echo '
<li class="top-pallet-logo"><a href="https://pideja.ca/"></a></li>
';
return false;
}
} ?>
Sorry about the format of the php file…I just copied/pasted it as is but all the formatting is gone!
As it is, the large screen dislplay is correct, as far as I can tell.
On the mobile (iPhone 7), the top pallet title displays correctly the Kabel font. The “menu” and footer are in a serif font, the body text is in Helvetica.
I fixed the format.
You can add code by starting with three back tics followed by the kind of code you’re writing.
start a new line and add your code.
after you’re done hit return and add three more back tics.
```php
your code
```
Here’s a forum topic with a link to a guide on formatting text: Formatting text in the new forum
But to your code. You’ve got it in the wrong place. As I wrote earlier, it needs to be in the USER section of the phplugins file.
You’ve removed all the hook definitions, I guess in an attempt to make the file size smaller, but in doing so, you’ve removed the line that states:
// SET USER FUNCTIONS BELOW
Place the function you’re trying to add in the same area with the rest of your functions. (where you start with a breadcrumbs function.
Something like this:
…<?php
function user_load($style, $path) {
$g_tsvrl = explode(’ ‘, $style); // Extract gallery type
define (‘G_STYLE’, strtoupper($g_tsvrl[1])); // and set global for later
$g_path = str_ireplace(’\’,’/’,$path); // change \ to /
$chunks = explode(’/’,$g_path); // and put into array
define (‘G_PATH’, strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
//define ( ‘TTG_SITE’, ‘’); // set new site root for navigation, resources, etc.
}
if (defined(‘BACKLIGHT_HOOK’)) {
require_once(realpath(BACKLIGHT_HOOK).’/modules/module-designer/application/helpers/APHPlugins.php’);
}
class PHPlugins extends APHPlugins
{
// SET USER FUNCTIONS BELOW
function head() {
echo ’
/* breadcrumbs */
function page_match($gallery) {
if (substr($_SERVER[“REQUEST_URI”], 0, strlen($gallery)) == $gallery) {
return 1;
} else {
return 0;
}
}
/* Replace the mobile menu icon with the word “Menu” */
function scripts () {
echo’
';
{
/* No right click */
echo ’ ';
return false;
}
}
/* Display the logo in pallet_top */
function pallet_top_title () {
echo ’
';
return false;
}
} ?>
…
You are right: just checked on another machine and all the text is either serif (menu & footer) and the rest is Helvetica. So no, it’s not just the mobile but the rest of the world that does not see the Kabel font! Very discouraged.
Since I do have this font installed, why not drop the fonts in the FONT folder, write a link to it in CSS or php?
your custom css is already calling the font (though I think the @font-face rule should come before any use of the font. Right now you call the font for the body and the @font-face rule follows). Assuming the fonts are in the indicated folder (/backlight/custom/fonts/) and the file names are correct, seems like it should work.
I placed the @font-face rule before the .body instruction.
The MyFontsWebfontsKit folder is in the CSS folder as well as the MyFontsWebfontsKit.css file. In the instructions for the WebFontsKit, it is suggested to place the folder in the root of the site or anywhere I deem appropriate. I chose the CSS folder.
But, to be sure, I did place copies of the two font.woff and font.woff2files in the FONTS folder.
So the path to the fonts should be: backlight/custom/css/MyFontsWebfontsKit/MyFontsWebfontsKit.css
What puzzles me is that the code now reads:
/* custom font /
@font-face {
font-family: ‘KabelLTPro-Book’;
src: url(’/backlight/custom/fonts/webfonts/3B0CE6_0_0.eot’);
src: url(’/backlight/custom/fonts/webfonts/3B0CE6_0_0.eot?#iefix’)
format(‘embedded-opentype’),
url(’/backlight/custom/fonts/webfonts/3B0CE6_0_0.woff2’) format(‘woff2’), url(’/backlight/custom/fonts/webfonts/3B0CE6_0_0.woff’) format(‘woff’), url(’/backlight/custom/fonts/webfonts/3B0CE6_0_0.ttf’) format(‘truetype’);
src: url(’/backlight/custom/fonts/KabelLTPro-Book.eot’);
}
The MyWebFontsKit.css file reads
/ @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3b0ce6");
@font-face {font-family: ‘KabelLTPro-Book’;
src: url(‘webfonts/3B0CE6_0_0.eot’);
src: url(‘webfonts/3B0CE6_0_0.eot?#iefix’)
format(‘embedded-opentype’),url(‘webfonts/3B0CE6_0_0.woff2’)
format(‘woff2’),url(‘webfonts/3B0CE6_0_0.woff’)
format(‘woff’),url(‘webfonts/3B0CE6_0_0.ttf’)
format(‘truetype’);}
Should I copy the code from the MyWebFontsKit.css into my own css?
What instructions did you get from MyFonts for installation?
Do they require you to download the fonts and place the files anywhere?
Or do they just ask you to add that css file and provide a reference to it in the head tag?
MyWebFonts installation instructions:`
- Upload the contents of the Kit to your server. 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.
- Edit your site
Include a reference to the Kit. Locate the MyFontsWebfontsKit.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 MyFontsWebfontsKit.css file.`Path:
You'll need to assign the webfonts (font-family) to tags, classes and other CSS selectors. A simple method is to make a new class selector and then assign the family names of the webfonts. Wherever you want to use KabelLTPro-Book just assign the class in your HTML. Here’s how it is done:.KabelLTPro-Book {
font-family: KabelLTPro-Book;
}
If you’d like to assign a font to the entire site, simply use the body tag selector in your stylesheet.
.body { font-family: KabelLTPro-Book; }
In the above reply, there is one line that won’t print. It’s the reference to the webfonts. Because it contains link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css"
and what was the contents of the kit? did it contain the fonts or just the css file?
If the kit contained the fonts, where did you put them?
If you do have the font files, you’ll probably need to change the path to them as noted in the instructions.
So this line in the MyFontsWebfontsKit.css file:
@font-face {font-family: 'KabelLTPro-Book';src: url('webfonts/3B0CE6_0_0.eot');src: url('webfonts/3B0CE6_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3B0CE6_0_0.woff2') format('woff2'),url('webfonts/3B0CE6_0_0.woff') format('woff'),url('webfonts/3B0CE6_0_0.ttf') format('truetype');}
will need to be modified. You’ll need to edit the src:url for each font file so that it contains the path to the font file. For example:
src: url(’/backlight/custom/fonts/webfonts/3B0CE6_0_0.eot’);
or wherever you put them.
From what I can tell in those instructions, you shouldn’t need to add anything to your regular custom css file unless you wanted to make a custom class to apply the font on an as-needed basis.
Otherwise you should be able to pre-pend the font family in the template or apply the font to the body tag in custom css.
If this still doesn’t work I suggest creating a new page template and use a fresh phplugins file to insert the code into the head. Create a test page using this template.
In the page template, use only this phplugins file. No custom css.
If you can get this working without all the distraction or possible conflict from other custom code, then you’ll at least know it works.
Go learn things:
The kit contains a Start Here folder ; a StartHere.html file leading to the online instructions; the MyFontsWebfontsKit.css file and the webFonts folder containing the KabelLTPro-Book folder. In this last folder, there are two files: font.woff and font.woff2.
I put the whole MyFontsWebfontsKit folder in the fonts folder.
My MyFontsWebfontsKit.css file reads: @font-face { font-family: 'KabelLTPro-Book'; src: url('webFonts/KabelLTPro-Book/font.woff2') format('woff2'), url('webFonts/KabelLTPro-Book/font.woff') format('woff');
This precisely where the fonts are.
My css file reads: .body { background-color: #000; font-family: KabelLTPro-Book; }
I already have KabelLTPro-Book as a pre-pend in Backlight.
I’m guessing that you need to modify the src:url to the font locations
probably src:url(‘/backlight/custom/fonts/webFonts/…’)
Created a test page with no formatting and only the PHP in use, within the pideja.ca site.
No CSS. No Kabel font displaying.
The PHP reads:
link to page?
Did you modify the kit’s css file to add the correct path to the font files?
If so:
Did you fill in the prepend fonts field?
have you tried using inline styling to see if the font is picked up that way?