[Resolved] Local Font URL

Home Forums Support [Resolved] Local Font URL

Home Forums Support Local Font URL

Viewing 15 posts - 16 through 30 (of 37 total)
  • Author
    Posts
  • #1230797
    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?

    #1231547
    Tom
    Lead Developer
    Lead Developer

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

    #1231597
    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?

    #1231994
    Tom
    Lead Developer
    Lead Developer

    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.

    #1232269
    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

    #1232894
    Tom
    Lead Developer
    Lead Developer
    #1232995
    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;
    }
    #1233000
    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.

    #1233346
    Tom
    Lead Developer
    Lead Developer

    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).

    #1233641
    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 πŸ™‚

    #1234093
    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>';
    }
    #1234228
    Tom
    Lead Developer
    Lead Developer

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

    #1234337
    Michael

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

    #1236529
    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.

    #1236686
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working πŸ™‚

Viewing 15 posts - 16 through 30 (of 37 total)
  • You must be logged in to reply to this topic.