wordpress trigger error in browser console

  • shaibustephen

    (@shaibustephen)


    13 hours, 14 minutes ago

    What is the better way to resolve this challenmges in my browser console?
    Here is 

     my wp_enqueue_style( 'genericons-neue', get_template_directory_uri() . '/genericons-neue/icon-font/Genericons-Neue.css', array(), '20251101' );

    .menu-item-has-children a:after,
    .social-navigation a:before,
    .dropdown-toggle:after,
    .bypostauthor > article .fn:after,
    .comment-reply-title small a:before,
    .pagination .prev:before,
    .pagination .next:before,
    .pagination .nav-links:before,
    .pagination .nav-links:after,
    .search-submit:before {
    	-moz-osx-font-smoothing: grayscale;
    	-webkit-font-smoothing: antialiased;
    	display: inline-block;
    	font-family: "Genericons-Neue";
    	src:url("icon-font/Genericons-Neue.eot?5d630a71c44ef73497a7242b3bfc0208");
    	font-size: 16px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: normal;
    	line-height: 1;
    	speak: never;
    	text-align: center;
    	text-decoration: inherit;
    	text-transform: none;
    	vertical-align: top;
    }


    GET
    http://localhost/odimbo.com/wp-content/themes/odoba/genericons-neue/icon-font/icon-font/Genericons-Neue.eot?5d630a71c44ef73497a7242b3bfc0208
    [HTTP/1.1 404 Not Found 318ms]

    downloadable font: download failed (font-family: "Genericons-Neue" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost/odimbo.com/wp-content/themes/odoba/genericons-neue/icon-font/icon-font/Genericons-Neue.eot?5d630a71c44ef73497a7242b3bfc0208
Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator threadi

    (@threadi)

    12 hours, 36 minutes ago

    According to the message, the mentioned font file does not exist in your theme’s directory. If you’re using a custom theme, check to see if the file has exactly the same name. Be sure to check for case sensitivity and adjust either the filename or the reference in your code accordingly.

    Zahid Abbasi

    (@zahidabbasi1987)

    12 hours, 23 minutes ago

    First check if this file exist or not.

    /wp-content/themes/odoba/genericons-neue/icon-font/Genericons-Neue.eot

    If this file exist and you are still getting error than update here so we can guide you properly.

    Thread Starter shaibustephen

    (@shaibustephen)

    12 hours, 13 minutes ago

    I clicked on the error message and this is what is shows me as the url below is what it shows me. I indeed have the Genericons-Neue.eot in the folder genericons-neue. But the said Genericons-Neue.eot is inside the icon-font in the parent of genericons-neue. But with the look of the error message, i have /icon-font/icon-font/. I only used this under this style below. What should be the solution now? 

    themes/odoba/genericons-neue/icon-font/icon-font/Genericons-Neue.eot
    .menu-item-has-children a:after,
    .social-navigation a:before,
    .dropdown-toggle:after,
    .bypostauthor > article .fn:after,
    .comment-reply-title small a:before,
    .pagination .prev:before,
    .pagination .next:before,
    .pagination .nav-links:before,
    .pagination .nav-links:after,
    .search-submit:before {
    	-moz-osx-font-smoothing: grayscale;
    	-webkit-font-smoothing: antialiased;
    	display: inline-block;
    	font-family: "Genericons-Neue";
    	src:url("/genericons-neue/icon-font/Genericons-Neue.eot");
    	font-size: 16px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: normal;
    	line-height: 1;
    	speak: never;
    	text-align: center;
    	text-decoration: inherit;
    	text-transform: none;
    	vertical-align: top;
    }
    e_style( 'genericons-neue', get_template_directory_uri() . '/genericons-neue/icon-font/Genericons-Neue.css', array(), '20251101' );
    Thread Starter shaibustephen

    (@shaibustephen)

    12 hours, 10 minutes ago

    The file Genericons-Neue.eot does exist. Does it means i have to wp_enqueue_style it too?

    Moderator threadi

    (@threadi)

    12 hours, 4 minutes ago

    The path used with url() in CSS is relative. If the CSS file is located in /genericons-neue/icon-font/Genericons-Neue.css, you’ll likely only need to specify Genericons-Neue.eot rather than icon-font/Genericons-Neue.eot.

    Zahid Abbasi

    (@zahidabbasi1987)

    12 hours ago

    The font file is not missing. The problem is that the browser is looking in the wrong place.

    Think of it like this:

    The CSS file is already inside the icon-font folder:

    genericons-neue/
    └── icon-font/    
        ├── Genericons-Neue.css   
        └── Genericons-Neue.eot

    But inside the CSS, it says:

    url("icon-font/Genericons-Neue.eot")

    So the browser thinks:

    “I’m already in icon-font, now go into another icon-font folder.”

    That makes it look for:

    icon-font/icon-font/Genericons-Neue.eot

    which does not exist, so you get a 404 error.

    The fix is to edit Genericons-Neue.css and remove the extra icon-font/ from the font URLs.

    Change:

    url("icon-font/Genericons-Neue.eot")

    to:

    url("Genericons-Neue.eot")

    Also make sure the src: lines are inside an @font-face block, not inside the normal icon CSS selectors.

    In easy words, the file exists but the CSS is telling the browser to look in the wrong folder.

    Hopefully this will fix your problem.

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.