[Resolved] Local Font URL

[Michael]

Hi Tom,

Looks like I spoke too soon. I’m getting these errors:

https://www.dropbox.com/s/jhzaju7uhdvncxo/broken-theme-errors.jpg?dl=0

I’ve also added the fonts to the child theme folder and adjusted the urls, but they don’t seem to be working:

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	src: local("Open Sans Regular"), local("OpenSans-Regular"),
	   url("fonts/open-sans-v17-latin-regular.woff2") format("woff2"),
	   url("fonts/open-sans-v17-latin-regular.woff") format("woff");
	font-display: swap;
}

If I type https://www.reclaimdesign.org into the browser the icon fonts show as broken, and I’m not following why:

https://www.dropbox.com/s/0v4zrew3sp0y9ei/broken-ico-fonts.jpg?dl=0

Do I have to change the code snippets I’ve made previously too? Not sure if they will break with the new child theme function php file?

[Tom]

Make sure your child theme has this “Template” line here: https://www.screencast.com/t/ViOpNZ0S

[Michael]

Thanks Tom 🙂 I had initially overwritten that when I copied and pasted (I thought it was just a comment line).

Is simple CSS redundant now that I am using a child theme? And do I need to adjust any of my code snippets at all to point to the new functions.php or will that happen automatically?

[Tom]

If you’ve added your CSS to the child theme, you no longer need to use Simple CSS.

All of your code snippets can go into the functions.php file as well, so you can likely ditch that plugin as well. You’ll need to manually move them.

[Michael]

Thanks a lot Tom 🙂 Is it possible for me to turn off the Did You Know box so it can free up some screen real estate? There’s no X button.

https://www.dropbox.com/s/emesr03iv569nq1/did-you-know-box.jpg?dl=0

[Tom]

For some reason, it doesn’t look like it can be removed: https://wordpress.org/support/topic/notice-at-the-top-of-the-child-theme-stylesheet/

[Michael]

Thanks for that link Tom – I gave that code they suggest a try and it seems to work OK for me (touch wood!):

add_action('admin_head', 'removeMessage');

function removeMessage()
{
    echo <<<EOF
<style>
#message
{
    display: none;
}
</style>
EOF;
}

[Michael]

Hi again Tom, can you suggest why the icon fonts break when entering https://www.reclaimdesign.org/ initially? I cannot work it out at all. I thought it was because the src urls weren’t relative, but they are now, and it still happens.

[Tom]

That code you added will remove all messages from the Dashboard, which isn’t a great idea.

The font icons are broken because you’re visiting the site using www and the files are being served without the www.

You’ll want to 301 redirect www to no-www (or the other way around).

[Michael]

Ah OK, I will disable that snippet in that case. I didn’t realize.

Back to that old chestnut of www to non-www… Pain in the bum with Namecheap that one.

Thanks for your help Tom 🙂

[Michael]

Hi Tom,

I asked on the WP forum and was given this code which seems to work (for anyone else who may want to do the same):

add_action( 'admin_head', 'hide_css_notice' );
function hide_css_notice() {
	echo '<style>.notice-info#message { display: none; }</style>';
}

[Tom]

That code will still hide all notice messages in the Dashboard, which still isn’t ideal.

[Michael]

Ah damn, right then – I’ll disable it again!

[Michael]

Hi Tom,

I managed to get the icon fonts to display now on both www and non-www versions of the site. Obviously it would be best to have a redirect in place on the server, but as Namecheap don’t allow, it will have to be this solution! Anyway, I wanted to share it in case anyone else has need of it.

I moved the font declarations out of style.css, added them to the header and amended the urls:

add_action( 'wp_head', function () { ?>
<style>
	@font-face {
		font-family: "Carrois Gothic";
		font-style: normal;
		font-weight: 400;
		src: local("Carrois Gothic Regular"), local("CarroisGothic-Regular"),
		   url("/wp-content/themes/generatepress_child/fonts/carrois-gothic-v10-latin-regular.woff2") format("woff2"),
		   url("/wp-content/themes/generatepress_child/fonts/carrois-gothic-v10-latin-regular.woff") format("woff");	
		font-display: swap; /* Avoid showing invisible text while custom font loads */
	}	
	@font-face {
		font-family: "Open Sans";
		font-style: normal;
		font-weight: 400;
		src: local("Open Sans Regular"), local("OpenSans-Regular"),
		   url("/wp-content/themes/generatepress_child/fonts/open-sans-v17-latin-regular.woff2") format("woff2"),
		   url("/wp-content/themes/generatepress_child/fonts/open-sans-v17-latin-regular.woff") format("woff");
		font-display: swap;
	}	
	@font-face {
		font-family: "Open Sans";
		font-style: italic;
		font-weight: 400;
		src: local("Open Sans Italic"), local("OpenSans-Italic"),
		   url("/wp-content/themes/generatepress_child/fonts/open-sans-v17-latin-italic.woff2") format("woff2"),
		   url("/wp-content/themes/generatepress_child/fonts/open-sans-v17-latin-italic.woff") format("woff");
		font-display: swap;
	}	
	@font-face {
		font-family: "Open Sans";
		font-style: normal;
		font-weight: 700;
		src: local("Open Sans Bold"), local("OpenSans-Bold"),
		   url("/wp-content/themes/generatepress_child/fonts/open-sans-v17-latin-700.woff2") format("woff2"),
		   url("/wp-content/themes/generatepress_child/fonts/open-sans-v17-latin-700.woff") format("woff");
		font-display: swap;
	}	
	@font-face {
		font-family: "Open Sans";
		font-style: italic;
		font-weight: 700;
		src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"),
		   url("/wp-content/themes/generatepress_child/fonts/open-sans-v17-latin-700italic.woff2") format("woff2"),
		   url("/wp-content/themes/generatepress_child/fonts/open-sans-v17-latin-700italic.woff") format("woff");
		font-display: swap;
	}	
	@font-face {
		font-display: block;
		font-family: "Ico Moon";
		src: local("☺"),
		url("/wp-content/themes/generatepress_child/fonts/icomoon.eot") format("embedded-opentype"),
		url("/wp-content/themes/generatepress_child/fonts/icomoon.ttf") format("truetype"),
		url("/wp-content/themes/generatepress_child/fonts/icomoon.woff2") format("woff2"),
		url("/wp-content/themes/generatepress_child/fonts/icomoon.woff") format("woff"),
		url("/wp-content/themes/generatepress_child/fonts/icomoon.svg") format("svg");
		font-style: normal;
		font-weight: normal;
	}
</style>
<?php } );

Hope it’s of use to somebody. Keep well 🙂

Michael.

[Tom]

Glad you got it working 🙂

[Author]

Posts