[Support request] Custom font being over ridden on one page

[Marcus Jackson]

Good morning,
I’m having difficulty with one page of our website where the content should be displayed in a font that includes the glyphs for that specific language. We have 9 pages on our site that each display content in a different language, most of them are using the same font to display this content. There is one language that will not display the font correctly which makes the font illegible (incorrect glyphs are being substituted and I have the little boxes where specific glyphs are not being displayed). The other pages using a number of the same glyphs are not having this issue. I tried recreating the page from scratch with the same code that appears on the other but to date have had no luck in getting the text to display all of the correct glyphs. The content displays properly in word with the same font.

All of the language pages can be found here: https://nwthumanrights.ca/home/languages/

Tlicho, North Slavey, and South Slavey all have similar glyphs, however the Chipewyan Page is not cooperating — It appears to be defaulting to “Open Sans”

Fonts that will display the text correctly are Aboriginal_Sans* and WMPrimary SILSophia Dene. I would prefer to update all the pages to the unicode font Aboriginal_Sans (already uploaded to my theme/assets/fonts folder).

There are a number of glyphs that appear in the “private” section of the Unicode map:
U+F3F1
U+F357
U+F531
U+0242 small glottal stop
U+0294 large glottal stop
These are the characters that are not displaying correctly on the Chipewyan Page.

Here is the current code pasted above the content which works on all but the Chipewyan Page:

<style type=”text/css”>
h2 {font-family: WMPrimary SILSophia Dene}<br />p {font-family: WMPrimary SILSophia Dene}<br /></style>

I am hoping that someone would be able to help me code the CSS to use @fontface JUST for the Indigenous language pages (class=”dene”) and how to determine why the Chipewyan text/page does not appear to recognize the class “dene”.

Any and all help is appreciated.
Thanks.

[David]

Hi there,

On the Chipewyan i don’t see the inline <style> and on the pages i do see that i am not seeing the font request for the SILSophia Dene. You may have the font installed on your device which is why you’re seeing that.

First thing i would suggest is to use @font-face CSS to load the necessary font:

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Make sure the url is the full path to the font.

Once its there we can take a look to see if it loads correctly.

[Marcus Jackson]

Hi David,
Thank you for your help.
I have uploaded the font to my website and written the @ font-face as follows:

@font-face {
font-family:”Aboriginal_Sans_REGULAR_939″;
src: url(“https://www.nwthumarights.ca/public_html/wp-content/themes/generatepress/assets/fonts/Aboriginal_Sana_REGULAR_939.woff&#8221;) format(“woff”),
url(“https://www.nwthumarights.ca/public_html/wp-content/themes/generatepress/assets/fonts/Aboriginal_Sana_REGULAR_939.svg&#8221;) format(“svg”);
}

I’m not sure where to add this CSS as I don’t want ALL of the website’s pages to render in Aboriginal Sans — Only the Chipewyan (and potentially other “dene” languages). This font is supposed to support Canadian Indigenous Languages so would consider using it for all Pages under “Official Languages” (https://nwthumanrights.ca/home/languages/) provided I can get all of the characters to load properly (see specific glyphs in first post).

I tried a couple of things but it appears that the font isn’t pre-loading?

Where do I go from here?
Marcus

[Elvin]

Hi Marcus,

You can conditionally add it by page through a hook element.

Example code:

<style>
@font-face {
	font-family:"Aboriginal_Sans_REGULAR_939"; 
	src: url("https://www.nwthumarights.ca/public_html/wp-content/themes/generatepress/assets/fonts/Aboriginal_Sana_REGULAR_939.woff") format("woff"), 
	url("https://www.nwthumarights.ca/public_html/wp-content/themes/generatepress/assets/fonts/Aboriginal_Sana_REGULAR_939.svg") format("svg");
}
</style>

and then set the display rule to the pages you want it to apply on.

Note: I’m not sure you’re using valid URL paths to the font file. I’ve checked them and the font files don’t seem to exist on the specified URL.

[Marcus]

Hi Elvin,
Thanks for your response. I seem to be having some difficulty with the url. I have uploaded the font files to my wordpress file here: wp-content/themes/generatepress/assets/fonts/ as per instructions every place I have looked. I can’t for the life of me figure out what the url is to access the fonts from here as I have to access this folder from my cPanel.
The fonts are available at a couple of different places online however they are only available as .zip archives. I would upload the font files to my website directly but I haven’t been able to figure out how to do this without getting an error message that basically says this file type can’t be uploaded because it’s dangerous.

Which hook field would I put this in?
Is the display rule you mention in the hook element something I need to code? what does that look like for specific pages?
Do I need to alter or delete the div class “dene”? Will it interfere with the @font-face elements?

Any suggestions you have as to where I can put these fonts so that they can be loaded for these few pages would be great.

Thanks,
Marcus

[Elvin]

Which hook field would I put this in?
Is the display rule you mention in the hook element something I need to code? what does that look like for specific pages?
Do I need to alter or delete the div class “dene”? Will it interfere with the @font-face elements?

You can hook it on wp_head. The display rule location can be set within the UI as well. It has its own tab as shown here –
https://docs.generatepress.com/article/hooks-element-overview/#display-rules

Any suggestions you have as to where I can put these fonts so that they can be loaded for these few pages would be great.

There are multiple ways to do this. One is to allow WordPress to take font files for upload on media library. 🙂

Another is, by creating a child theme and put the fonts on its folder through FTP. and then just copy the path. 😀 It’s best to just leave the parent theme untouched as things may get wiped when it updates.

[Marcus Jackson]

Hi Elvin,
I had GP Hooks working to load the correct logo for the site depending on what language the site was displaying, English or French. The instructions you provided earlier said to use Elements and create a new hook. In following the instructions above, I still have no resolution to the font issue on the Chipewyan Page and now I have no logos appearing on my site at all.
I can no longer find the GP hooks (that had been working) since activating the elements module.
I’m going to need some help with this as the suggestions you’ve provided don’t seem to be working and there seems to be elements now contradicting each other?
Please let me know where we go from here.
Marcus

[Elvin]

I had GP Hooks working to load the correct logo for the site depending on what language the site was displaying, English or French. The instructions you provided earlier said to use Elements and create a new hook. In following the instructions above, I still have no resolution to the font issue on the Chipewyan Page and now I have no logos appearing on my site at all.

That’s strange. A newly created Hook element shouldn’t affect an existing Hook element.

If you’ve edited an existing hook element you’re using for your logo then it makes sense if that breaks.

Any chance you can provide us temporary backend access to check what may be going wrong?

You can use the private information text field. Let us know.

[Marcus Jackson]

Hi Elvin,
I provided information for you. Cheers!

[Marcus Jackson]

Hi Elvin,
Apologies, the email address I provided you won’t work on that account. Created a new one for you.
Cheers.
Marcus

[Elvin]

Thanks,

I’ve checked the GP Element list and it makes sense that none are running because they’re both in trash. This effectively deactivates them. https://share.getcloudapp.com/QwuApBle

Try activating both. 😀

[Marcus Jackson]

Hi Elvin,
I’m kind of surprised you didn’t try this when you looked at the site. I reactivated both hooks and there is no change.
Still no logo on either English or French site now, and Chipewyan language is still not displaying correctly.
Can GP fix this issue or no? When I had the GP Hooks (not elements) I had a logo. As soon as I activated Elements the logo disappeared. Why?
The logo CSS is also in the Additonal CSS file. There is something going on that is messing with the logo display.

The font issue is ONLY on the Chipewyan Page and NOT of the other pages that use the same glyphs such as North Slavey which displays correctly. Why is the font displaying correctly on the North Slavey Page and not on the Chipewyan Page?

Hoping we can get this resolved soon.
Thanks

[Tom]

Hi there,

If you had the old GP Hooks module activate, it looks like you deactivated it in “Appearance > GeneratePress”.

You can re-add it to the list so you can activate it again like this:

add_filter( 'generate_premium_deprecated_modules', function( $modules ) {
    return array_diff( $modules, [ 'Hooks' ] );
} );

That will make it so you can see the old module in “Appearance > GeneratePress”, then you can re-activate it.

Instead of using an Element to add your CSS, I suggest using this plugin: https://wordpress.org/plugins/simple-css/

It gives you a metabox while editing the actual page where you can add the CSS.

Also, the current way you’re adding the URL to the CSS is wrong – it needs to be the full address.

Right now, you have this: url('/wp-includes/fonts/Aboriginal_Sans.woff")

It needs to be like this: url('https://yoursite.com/wp-includes/fonts/Aboriginal_Sans.woff')

Also, it needs to download the font when you go to the URL: https://yoursite.com/wp-includes/fonts/Aboriginal_Sans.woff

If it doesn’t download the font/shows a 404, the URL is wrong.

Hope this helps!

[Marcus Jackson]

Hi Tom,
Thanks for your reply. I have created a GP child theme in the hopes that this will help resolve the issues.
When I first built this site, you generously provided me the code to get the English logo to display on the English pages and the French logo to appear on the French language site. This is the code you sent:

/*Site Logo */
.site-logo
<?php if (is_html lang=”fr-FR”(http://nwthumanrights.ca/?lang=fr rel=”home” img class=”header-image”) {echo ‘<img src=”http://nwthumanrights.ca/wp-content/uploads/2015/08/NWTHRC_Horizonta_French.png&#8221;
alt=”Commission des droits de la personne des TNO” title=”Commission des droits de la personne des TNO”}
?>
I have pasted this into the Simple Custom CSS box accessed from the Customizer menu. I have the Simple Custom CSS plugin.

Right now, neither the English nor French logo is not displaying on the site.
I also tried adding the above code to the functions.php file of the child theme. I get a syntax error with the ‘<‘ before ‘?php’

I have not uploaded a logo under the “site identity” section of the customiser because I can only upload a single logo. If I upload the English logo, it appears on both the English and French Sites. Is this because the CSS above is not working for some reason or because I need a logo uploaded to the site identity section?

Both the English and French logos are in the media library. The French PNG file can be found here: wp-content/uploads/2015/08/

Do I need to update the code provided? Place it somewhere else? Is there an easier way to add the logos as header images and indicate on which pages/languages they ought to appear?

Chipewyan and North Slavey use similar glyphs. The Glottal Stop is one of these glyphs. It displays correctly on the North Slavey Page. It does not display correctly in the body of the the Chipewyan Page. H2 appears to be displaying correctly but body content is not.
I had been using an old WinMac font Dene SILSophia to display the fonts correctly. I had a class set as “dene” This appears to still work on all pages except Chipewyan?

I have attempted to update the font with Aboriginal Sans but I just cannot get the 4@font-face code to work.

I have tried using GP elements but the only change is that the code appears in the header of the Chipewyan page. The font is still incorrect. I did update the url as you identified. The ASans font is in the fonts folder.

If you had the old GP Hooks module activate, it looks like you deactivated it in “Appearance > GeneratePress”.

I did not deactivate it. When I activated “elements” for the GP Premium Theme, GP Hooks disappeared. It was no longer present in the options so I assume that elements automatically deletes access to GP Hooks.

You can re-add it to the list so you can activate it again like this:

add_filter( ‘generate_premium_deprecated_modules’, function( $modules ) {
return array_diff( $modules, [ ‘Hooks’ ] );
} );

That will make it so you can see the old module in “Appearance > GeneratePress”, then you can re-activate it.

Where do I put the code you have suggested to reactivate GP Hooks?

Even if I can’t get the Chipewyan page sorted right away I do need the logos up and running again ASAP. I can deactivate the Chipewyan Page and continue working on it if we can’t get it sorted.

Thanks for your time.
Marcus

[Elvin]

Where do I put the code you have suggested to reactivate GP Hooks?

It’s a PHP snippet, here’s how you can add PHP snippets to your site.
https://docs.generatepress.com/article/adding-php/

[Author]

Posts