[Support request] Calibri font causing 404

Home Forums Support Calibri font causing 404

  • This topic has 3 replies, 2 voices, and was last updated 9 months ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1112467
    Robyn

    Hi,
    I have 1 issue, and 1 question.

    Issue: I keep getting 404 errors on the installed font and I’m not certain I installed it correctly. I followed the @font-face directions and I can see/use the font in customizer and it shows properly in Chrome. In Firefox, it’s defaulting to Times New Roman in the menu, but using Calibri in the off panel canvas menu on mobile. It uses Times in some sections/titles in Firefox as well.
    The fonts have been loaded to public_html/wp-content/themes/generatepress_child/fonts/

    I have this snippet:

    add_filter( ‘generate_typography_default_fonts’, ‘tu_add_local_fonts’ );
    function tu_add_local_fonts( $fonts ) {
    $fonts[] = ‘Calibri’;

    return $fonts;
    }

    and this one:

    add_action( ‘wp_head’, function () { ?>
    <style>

    @font-face {
    font-family: ‘Calibri’;
    font-style: normal;
    font-weight: 300;
    src: url(‘/wp-content/themes/generatepress_child/fonts/calibril.ttf’); /* IE9 Compat Modes */
    src: local(‘Calibri Light’), local(‘Calibri-Light’),
    url(‘/wp-content/themes/generatepress_child/fonts/calibril.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    }
    @font-face {
    font-family: ‘Calibri’;
    font-style: italic;
    font-weight: 300;
    src: url(‘/wp-content/themes/generatepress_child/fonts/calibrili.ttf’); /* IE9 Compat Modes */
    src: local(‘Calibri Light Italic’), local(‘Calibri-LightItalic’),
    url(‘/wp-content/themes/generatepress_child/fonts/calibrili.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    }
    @font-face {
    font-family: ‘Calibri’;
    font-style: normal;
    font-weight: 400;
    src: url(‘/wp-content/themes/generatepress_child/fonts/calibri.ttf’); /* IE9 Compat Modes */
    src: local(‘Calibri Regular’), local(‘Calibri-Regular’),
    url(‘/wp-content/themes/generatepress_child/fonts/calibri.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    }
    @font-face {
    font-family: ‘Calibri’;
    font-style: italic;
    font-weight: 400;
    src: url(‘/wp-content/themes/generatepress_child/fonts/calibrii.ttf’); /* IE9 Compat Modes */
    src: local(‘Calibri Italic’), local(‘Calibri-Italic’),
    url(‘/wp-content/themes/generatepress_child/fonts/calibrii.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    }
    @font-face {
    font-family: ‘Calibri’;
    font-style: normal;
    font-weight: 900;
    src: url(‘/wp-content/themes/generatepress_child/fonts/calibrib.ttf’); /* IE9 Compat Modes */
    src: local(‘Calibri Bold’), local(‘Calibri-Bold’),
    url(‘/wp-content/themes/generatepress_child/fonts/calibrib.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    }
    @font-face {
    font-family: ‘Calibri’;
    font-style: italic;
    font-weight: 900;
    src: url(‘/wp-content/themes/generatepress_child/fonts/calibriz.ttf’); /* IE9 Compat Modes */
    src: local(‘Calibri Bold Italic’), local(‘Calibri-BoldItalic’),
    url(‘/wp-content/themes/generatepress_child/fonts/calibriz.ttf’) format(‘truetype’), /* Safari, Android, iOS */
    }

    </style>
    <?php } );

    However, after checking several forums perhaps it is related to the font choice Calibri? The client is insisting on using it but I can only find the .tff files which seems like they don’t respond well to all browsers. I’ve mentioned they should use a webfont. Any expert advice I could go back with would be great!

    Robyn

    #1112811
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What if you add the full URL to the font instead of starting with /wp-content/?

    Let me know 🙂

    #1115533
    Robyn

    Hi, I appreciate the help over the holidays 🙂

    So I changed the url to:

    @font-face {
    font-family: ‘Calibri’;
    font-style: normal;
    font-weight: 300;
    src: url(‘https://bowenworks.ca/wp-content/themes/generatepress_child/fonts/calibril.ttf&#8217;); /* IE9 Compat Modes */
    src: local(‘Calibri Light’), local(‘Calibri-Light’),
    url(‘https://bowenworks.ca/wp-content/themes/generatepress_child/fonts/calibril.ttf&#8217;) format(‘truetype’), /* Safari, Android, iOS */
    }

    I’ve left it a day or so and am still getting 404 errors:

    December 27, 2019
    1:11 pm /wp/wp-content/themes/generatepress_child/fonts/Calibri.ttf

    Odd path to return an error since the fonts are found in public_html/wp-content/themes/generatepress_child/fonts.. Maybe I didn’t put the url in correctly?

    #1115617
    Tom
    Lead Developer
    Lead Developer

    All looks good to me now – are there any other references you may have forgotten about? Where is that 404 error logged?

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.