The font used throughout this site should be a custom font (KabelLTPro-Book) for which I have purchased a licence. The font seems imbedded in a file called: MyFontsWebfontsKit.css . Works on the larger displays but not on the mobile. In the typography tab of the main page template, I inserted this line in the Google Fonts Statement:
<link rel="stylesheet" type="text/css" href="/backlight/custom/css/MyFontsWebfontsKit.css">
I then Prepend Font-family w/ KabelLTPro-Book
How can I get the mobile device to show this type face?
Youâre not using Google Fonts so that information does not go in the Google Fonts Statement area of the template. That field is for what you copy from the Google Fonts site.
you need to include that code in head section via phplugins.
Iâm not seeing your Font being used on your site (assuming the site your talking about is the same as the one in your other recent threadâitâs always helpful if you can include a link to the site in question)
You would be seeing that font if itâs installed on your computer. On mine, the font being used is Helvetica.
If youâre looking on a mobile device then you wonât see your font because itâs not installed on that device and itâs not being loaded by the site.
1 Like
The website: https://pideja.ca
The font is currently in use on the website. It displays well on the large display, but not on the mobile.
So, I added this code to the PHP file:
function head ( ) {
echo â
link rel=âstylesheetâ type=âtext/cssâ href=âMyFontsWebfontsKit.cssâ
';
}
But still, the font does not show on the mobile.
`
`
In my last reply, I could not get the correct php code to display. Here it is:
Your font is not appearing on the desktop version of the site either.
Iâm not seeing that code in the head section of the page source code.
other than that opening php tag, the code looks correct except for the href to the font css file. It probably should be /backlight/custom/css/MyFontsWebfontsKit.css.
Youâre placing it in the USER area of your phplugins file? Have you enabled phplugins and chosen the correct file in the page template?
Basically, everything Rod has said so far is correct. The href value youâve used above isnât right, and youâre only seeing the font on your own computer because you have it installed. No one is seeing it as a web-font.
I am probably seeing the font locally because I have it installed in my box.
Changed the URL in the PHP file as suggested. But no change.
Worst, something is dreadfully wrong in my CSS because Iâm losing a lot of the formatting.
So, Iâll have to look into this matter before we continue. I have written three CSS files and none display correctly. A typo? A useless line? The fun starts nowâŚ
@Pideja Iâm moving this thread â and maybe some of your others? â to Backlight Customization. Please be conscious of posting threads into the appropriate channel.
The code is not even being inserted into the page. It should show up just before the closing head tag. You can see this by viewing the page source.
Check to make sure that:
- the code is in the correct place in the phplugins file
- your page template is using the phplugins file.
It looks to me that you may be adding the code to the wrong phplugins file or youâre not using phplugins at all.
Will do. Sorry for the confusion.
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?