I’ve tried to use the new guidance to load Raleway which was and is my preferred font for my website.
Currently I’m calling the Google API and it works but I’m trying the new GDPR proof way and have uploaded Raleway-VariableFont_wght.ttf to a webfonts folder sitting at
public_html/sub-domain/backlight/custom/webfonts
I’ve added the code as in the example to my default css file
@font-face {
font-family: ‘Raleway’;
font-style: normal;
src: local(‘Raleway-VariableFont_wght’),
url(’…/backlight/custom/webfonts/Raleway-VariableFont_wght.ttf’) format(‘ttf’);
}
.font-raleway {
font-family: Raleway, sans-serif;
}
I’ve referenced this css file in the Kookaburra template I’m testing it on and saved it, cleared the cache and tried viewing the change in the Kookaburra test page but the font does not load.
If I disable the Google api on the site then my published pages fall back to the default font and no changes happen to the Kookaburra test page
I tried creating a new Kookaburra template and applying that to the test page and again, the change does not come through.
I have to assume that I’m at fault here somewhere.
I have presumed that the relative pathing …/ is OK as in the sample code as the instance of Backlight is sitting one level beneath the default domain as hosted.
I’ve also looked up Rod’s Tips&Tricks and that calls for PHP Head statement - I’ve asked him via his website about that.
As always any suggestions will be welcome.
Thanks
TomO
For some unexplained reason this is now working after the nth time although I did move the @font-face to the beginning of my CSS file
Sorry is anyone has wasted any time on this.
TomO
Forget that last comment. It only worked because I had installed Raleway on the laptop. Testing on the phone shows Tahoma fallback position. Will revert to Google API in the meantime.
That’s only needed if you’re using a css file provided by a font vendor and you don’t want to add their css to your main custom css file.
can you post a link to a page that should be using the font?
Do you want me to remove the google api first? The test page is not visible on the site so if I remove the google api then the edited css should apply.
I’ll remove the PHP head statement from the plugins file also.
Hi Rod,
now has the google api removed but with the css file containg th ecode to point to the webfonts folder sitting under the domain.
Thanks
TomO
I’ve noticed that the Blog and Photo-Essays are displaying Raleway but the ‘normal pages’ are not. Cannot see where Pangolin Essay picks up the css.
what’s the exact location. It seems like it should be public_html/backlight/custom/webfonts/ (no subdomain).
public_html/tjowens.com/backlight/custom/webfonts
Just found where pangolin Essay picked up the font - it was still pointing at google on that template
I’m not running a site anymore at the top level as the business ceased trading but my photo site was always in a sub domain from a hosting perspective
I can see in the Inspector that Raleway is listed as the first font choice. Not sure why it’s not being used other than it can’t be found.
Can you post a screen shot of the folder structure and what’s inside the /backlight/custom/webfonts/ folder
Are you using redirects then?
Hi Rod,
Would they be in the .htaccess file - it has been a while since we ever had to touch that.
the redirects? I think so.
I’ve just tested a Kookuburra and a Pangolin page trying to add the webfonts. No luck here either.
This is the content of the .htaccess file
text/x-generic .htaccess ( UTF-8 Unicode text )
Header set Access-Control-Allow-Origin "*"
RewriteEngine On
#RewriteCond %{REQUEST_URI}::$1 ^(.*?/)(.*)::\2$
#RewriteRule ^(.*)$ - [E=BASE:%1]
##RewriteRule ^(.*)$ - [E=BASE:]
RewriteBase /
RewriteCond $0#%{REQUEST_URI} ([^#]*)#(.*)\1$
RewriteRule ^.*$ - [E=BASE:%2]
RewriteRule ^(.*)$ - [E=QS:mod_rewrite=on]
RewriteRule ^([^\/.]*)-single.php$ %{ENV:BASE}single.php?%{ENV:QS}&id=$1 [QSA,L]
RewriteRule ^([^\/.]*).css$ %{ENV:BASE}index.php?%{ENV:QS}&extension=css&name=$1 [QSA,L]
RewriteRule ^([^\/.]*).js$ %{ENV:BASE}index.php?%{ENV:QS}&extension=js&name=$1 [QSA,L]
RewriteRule ^([^\/.]*).gif$ %{ENV:BASE}index.php?%{ENV:QS}&extension=gif&name=$1 [QSA,L]
RewriteRule ^([^\/.]*).png$ %{ENV:BASE}index.php?%{ENV:QS}&extension=png&name=$1 [QSA,L]
RewriteRule ^([^\/.]*).jpg$ %{ENV:BASE}index.php?%{ENV:QS}&extension=jpg&name=$1 [QSA,L]
#RewriteCond %{QUERY_STRING} !mod_rewrite=on
#RewriteRule ^index.php$ %{ENV:BASE}index.php?%{ENV:QS} [QSA,L]
RewriteCond %{QUERY_STRING} !mod_rewrite=on
RewriteRule ^mobile.php$ %{ENV:BASE}mobile.php?%{ENV:QS} [QSA,L]
RewriteCond %{QUERY_STRING} !mod_rewrite=on
RewriteRule ^(.*)download.php %{ENV:BASE}download.php?%{ENV:QS} [QSA,L]
#RewriteRule ^/?$ index.php [QSA,L]
RewriteRule ^$ %{ENV:BASE}index.php?%{ENV:QS} [QSA,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ %{ENV:BASE}index.php?%{ENV:QS}&page=$1 [QSA,L]
php – BEGIN cPanel-generated handler, do not edit
Set the “ea-php74” package as the default “PHP” programming language.
AddHandler application/x-httpd-ea-php74___lsphp .php .php7 .phtml
# php -- END cPanel-generated handler, do not edit
Thanks for testing your end. That is a relief. I’ve been doing this for hours thinking I’ve got something wrong waiting for the sun to rise in Seattle!
TomO
I don’t know that any redirect has anything to do with it (and I don’t know much about .htaccess). As mentioned above, I’m not able to get it to work either.
I’ll listen out for Matt or Ben to chime in. Thanks for looking into it.
TomO