Can’t change default font

Hi, @tanyakorteling.

On my end I can see your site’s font using “Verdana” font family.

In fact, inspecting your site I can see your custom Additional CSS added to your code.

Clear your browser cache and / or other navigation data and try again.

Trying from a different browser / computer may help. You can also try with a Private Navigation Tab or Incognito Mode.

Hope that helps

Hi;

I’ve manually changed the font in all my current posts which is probably why you can see Verdana you end.

The problem is when I create a new post – the default font is showing as Helvetica, I have to change it every time I write anything.

I previously had this problem in the past and fixed it with the css code – however something must have happened behind the scenes in the last few weeks to revert it to Helvetica – I haven’t done anything my end to cause it so maybe it was an update??

I’ve already tried clearing the caches several times over the last couple of days and that’s not working. I’ve also tried incognito mode.

Any other ideas please?

Thanks
Tanya

Tanya.

It would be good if you created a new post without changing the font to see the behaviour.

On my end I see the custom CSS, and if I disable it through the inspector, the font changes. That’s why I insisted on this.

Another thing you could try is by programmatically changing the font using javascript. Here’s a small function that could help you achieve that:

window.onload = function(){
var body = document.getElementsByTagName("BODY");
    body[0].style.fontFamily = "Verdana,sans-serif";
}

I’d advice you remove the custom CSS in case you want to try the javascript way, to make sure if it produces any changes.

—————————————————————-

@paulbarrett1952 Thanks for reporting your issue.

I’d advice you to create a separate thread explaining this issue, in order to respect Tanya’s thread and follow the forum guidelines.

Thanks!

Hi;

I’ve already tried creating several new posts to test this, before I raised this query and since. As I mentioned in my last message when I create a new post the default is Helvetica; the only way I can change it is to manually change it which I don’t want to have to do with every post.

Up until recently my default text was always Verdana – so when I went into create a new post, Verdana was showing in the font dropdown (this was changed over a year ago) but for some reason, in the last few weeks, it’s reverted to Helvetica.

All I need to be able to do is for when I write a new post the default is Verdana as that’s the font I always use. How can I get this to work again please? It was a really simple change last time from what I remember (it was using the custom css) BUT as you can see the custom CSS isn’t doing what I need it to now.

I look forward to your suggestions.

Thanks
Tanya

Hi;

I’ve already tried creating several new posts to test this, before I raised this query and since. As I mentioned in my last message when I create a new post the default is Helvetica; the only way I can change it is to manually change it which I don’t want to have to do with every post.

Up until recently my default text was always Verdana – so when I went into create a new post, Verdana was showing in the font dropdown (this was changed over a year ago) but for some reason, in the last few weeks, it’s reverted to Helvetica.

All I need to be able to do is for when I write a new post the default is Verdana as that’s the font I always use. How can I get this to work again please? It was a really simple change last time from what I remember (it was using the custom css) BUT as you can see the custom CSS isn’t doing what I need it to now.

I look forward to your suggestions.

Thanks
Tanya

Hi @paulbarrett1952

Ah I see what you mean – when I check preview the font looks like it’s Verdana. Iassume because of my custom css code.

However, this still isn’t ideal, because I want to be able to see the correct font when I’m writing a post so I can see what it looks like. This didn’t used to be a problem when the default was changed to Verdana previously. I used to open a new post, the font showing in the drop down would be Verdana and all the text I typed would show in Verdana in my draft post – not Helvetica like it does for both now.

I’m hoping someone from WordPress will jump in and help resolve this so it acts like it used too. I think there must have been an update that’s caused problems because I’m also having issues with my social media icons showing as empty squares (top right of website), I’ve opened another thread for this; plus some of my affiliate search boxes and widgets are no longer showing on desktop (I’ve raised this with their tech team first). This all suggests that something has happened behind the scenes to mess up my website.

I’ve tried all the things you’ve mentioned re: the font issue too – but still isn’t sorted out!

@juan2machado Anything you can do to help me resolve this asap would be great please. This is a bit of a nightmare as my website was functioning with no issues at all until recently and now all of this has gone wrong. I’ve made no changes except for write new posts and install Ginger Cookie plugin to be GDPR compliant (could that be the issue)?

Thanks
Tanya

@juan2machado I’d be happy to try the java script approach you mention above but I’m certainly not a ‘coder’ is there any one who can tell me how to do this as I’m scared I may mess my site up even more!

Hi @paulbarrett1952.

Even though essentially is the same issue, the main reason for ask you to create a separate ticket is to abide by the forum rules. (Nothing personal).

Secondly, it allows us to track easily each issue separately and a is easier for people to find the issue in the future.

I hope to count on you for this.

———————————————————————————-

Hi, @tanyakorteling.

You can apply the javascript code within your functions.php file.

First and foremost, please make a backup clone of your functions.php file and keep it in your PC desktop.

Then, in your WordPress Dashboard go to Appearance > Editor. Locate the functions.php file in the right hand sidebar.

In the functions.php file, go to the last line and do two line breaks. Add the code as follows:

function change_body_font_to_verdana(){
echo '
window.onload = function(){
var body = document.getElementsByTagName("BODY");
    body[0].style.fontFamily = "Verdana,sans-serif";
}';
}

add_action('wp_footer','change_body_font_to_verdana');

I applied it on your site from the Chrome Inspector console and it worked just nice.

Let me know if that works for you.

Hi, Paul.

Awesome, man. You rock!

Let’s say you want to modify all H1 elemtns. To cater to them specifically, check out this code:

function change_headings_font_style(){
echo '
window.onload = function(){
var heading1 = document.getElementsByTagName("h1");
    heading1[0].style.fontFamily = "Verdana,sans-serif";
}';
}

add_action('wp_footer','change_headings_font_style');

Let me know what do you think

@juan2machado

Thanks before I touch the code you suggest I’ve just also heard back about my other issues with my social media icons – support message #8211 and this sounds like it could be caused by the same issue!

I’ve also been told by my affiliate brand the following: the problems there are being caused by a few javascript errors in the console.
The search box seems present on desktop but is not showing due to some conflict with the jquery migrate’

Could these issues all be being caused by the same thing? I’m just worried about making changes to fix / work around one problem if it could then make all the others worse!

Are you able to help/ advise on this please?

Thanks
Tanya

Paul,

To select all headings, do the following procedure:

Replace this code:

function change_headings_font_style(){
echo '
window.onload = function(){
var heading1 = document.getElementsByTagName("h1");
    heading1[0].style.fontFamily = "Verdana,sans-serif";
}';
}

add_action('wp_footer','change_headings_font_style');

With this:

function change_headings_font_style(){
echo '
window.onload = function(){
var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
    headings[0].style.fontFamily = "Verdana,sans-serif";
}';
}

add_action('wp_footer','change_headings_font_style');

In regards of your second question, the way we are integrating fonts in here is by injecting them directly into the frontend by CSS. By selecting all Headings, I’m guess it will affect the backend too (I’m not 100% sure though).

Let me know

Hi Tanya!

Yes, it could be related to a conflict with jQuery.

As you describe it, it looks like there’re different plugins including jQuery at the same time, creating a redundance.

I’d advice you to deactivate all plugins and check if this works. In case it works, activate them gradually one by one until you find the culprit.

Also, try switching to a default WordPress Theme like Twenty Seventeen to rule out a theme conflict.

Look forward to your response.

Paul.

In the javascript code you pasted are some misspellings with the apostrophes and double quote when setting BODY var FontFamily to “Roboto”.

Check it out.

Another way you may try is by using “Use Any Font” plugin.

Let me know

@juan2machado

So it appears it was the custom CSS causing all my other problems (social media icons and affiliate search boxes not appearing.

These are all now fixed.

So I added the function.php code you suggested in editor and it hasn’t made any difference to the font that is shown in visual editor or the front end. It’s also now showing the code at the top of my website both front-end and back end!

Please can you check and advise?

I’ve left the function.php code in for now so you can see what I mean.

So to clarify I just want ALL font on my website (visual editor and all the content text – inc. headings to be Verdana.)

Thanks
Tanya

@paulbarrett1952 thanks for updating me on this – I’ll give these a go.

I’m actually going to remove the php code now until I get a reply from Juan as it doesn’t look good for visitors.

Thanks
Tanya