[Resolved] Local Font Avenir Next Not Loading

Home Forums Support Local Font Avenir Next Not Loading

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1170991
    Bodie

    Hello!

    I believe that I have done all the necessary steps to load a local font to my child theme, however, it isn’t working for me and I am wondering if it is a caching issue. I would love some help!

    I learned a lot from My previous post on a similar issue where I made all the rookie mistakes with self-hosting fonts, but I have learned and grown, and yet still can’t get it to load in the Customizer.

    I am following Tom’s guide for hosting local fonts here, and I have made sure that there aren’t any basic code errors such as trailing commas, etc. I have also double-checked that the links to the fonts are correct.

    However, I am simply not able to see my added font Avenir Next in the customizer.

    Here is my CSS:

    /* Avenir Next THIN */
    @font-face {
      font-family: 'Avenir Next';
      font-style: normal;
      font-weight: 200;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Thin'), local('AvenirNextThin'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next THIN - Italic */
    @font-face {
      font-family: 'Avenir Next';
      font-style: italic;
      font-weight: 200;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin-italic.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Thin Italic'), local('AvenirNextThin-Italic'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin-italic.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-thin-italic.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next REGULAR */
    @font-face {
      font-family: 'Avenir Next';
      font-style: normal;
      font-weight: 300;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Regular'), local('AvenirNextRegular'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next REGULAR - Italic */
    @font-face {
      font-family: 'Avenir Next';
      font-style: italic;
      font-weight: 300;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular-italic.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Regular Italic'), local('AvenirNextRegular-Italic'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular-italic.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-regular-italic.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next MEDIUM */
    @font-face {
      font-family: 'Avenir Next';
      font-style: normal;
      font-weight: 500;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Medium'), local('AvenirNextMedium'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next MEDIUM - Italic */
    @font-face {
      font-family: 'Avenir Next';
      font-style: italic;
      font-weight: 500;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium-italic.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Medium Italic'), local('AvenirNextMedium-Italic'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium-italic.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-medium-italic.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next DEMIBOLD */
    @font-face {
      font-family: 'Avenir Next';
      font-style: normal;
      font-weight: 700;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Demibold'), local('AvenirNextDemibold'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next DEMIBOLD - Italic */
    @font-face {
      font-family: 'Avenir Next';
      font-style: italic;
      font-weight: 700;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi-italic.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Demibold Italic'), local('AvenirNextDemibold-Italic'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi-italic.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-demi-italic.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next BOLD */
    @font-face {
      font-family: 'Avenir Next';
      font-style: normal;
      font-weight: 800;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Bold'), local('AvenirNextBold'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.woff2') format('woff2'), /* Super Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold.ttf') format('truetype'); /* Safari, Android, iOS */
    }
    
    /* Avenir Next BOLD - Italic */
    @font-face {
      font-family: 'Avenir Next';
      font-style: italic;
      font-weight: 800;
      src: url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold-italic.eot'); /* IE9 Compat Modes */
      src: local('Avenir Next Bold Italic'), local('AvenirNextBold-Italic'),
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold-italic.woff') format('woff'), /* Modern Browsers */
           url('http://1j3.bb9.myftpupload.com/wp-content/themes/generatepress_child/fonts/avenir-next-bold-italic.ttf') format('truetype'); /* Safari, Android, iOS */
    }

    and here is my function:

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'Avenir Next';
    
        return $fonts;
    } );

    I am not sure. I have tried everything that I can think of but I cannot get the font to load. Help is much appreciated!

    Thanks so much!

    Bodie

    (post edited with updated code on February 20, 2020)

    #1171830
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This function is responsible for adding the font name to the Customizer:

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'Avenir Next';
    
        return $fonts;
    } );

    I just added it to my test site using the Code Snippets plugin (but you can use your child theme functions.php file), and I’m seeing it at the bottom of the System Fonts section of the dropdown: https://www.screencast.com/t/aQnRzdvD48

    Are you positive that it’s not there?

    #1171870
    Bodie

    It’s so weird, Tom. I am racking my brain as to why it won’t show up!

    https://www.dropbox.com/s/d5w6umdfdk62d6y/No%20Avenir%20Sad%20Panda.png?dl=0

    Right now it is in the functions.php of my child theme. Maybe I should try the plugin instead? This is my entire child theme functions file

    <?php
    /**
     * GeneratePress child theme functions and definitions.
     *
     * Add your custom PHP in this file. 
     * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
     */
    
    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
    
    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'Avenir Next';
    
        return $fonts;
    } );

    I am wondering if this is a caching issue? It doesn’t show up in any browser for me yet. I will keep trying, thanks for responding.

    Bodie

    #1171877
    Bodie

    Ok so it must have been caching because here is what I just did and now it works but I don’t get it:

    Checked again with function in functions.php – Didn’t work
    Deleted from functions.php and moved to Code Snippets plugin – WORKS!

    Then..

    I deactivated Code Snippets and it still worked?
    Deleted Code Snippets, moved the code back to functions.php and now it shows up and works great.

    Moral of the story:

    1. Code Snippets is a magical plugin, solving problems even when it is not activated on a site
    2. I hate hate hate hate cacheing when building sites

    Thanks Tom!

    #1172066
    Tom
    Lead Developer
    Lead Developer

    Definitely sounds like caching. Glad you got it sorted 🙂

    #1655534
    Annamari

    I have a similar problem, and even Code snippets plugin doesn’t help.

    This is my CSS:

    /* pt-sans-regular - latin-ext_latin */
    @font-face {
      font-family: 'PT Sans';
      font-style: normal;
      font-weight: 400;
      src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
    }
    /* pt-sans-italic - latin-ext_latin */
    @font-face {
      font-family: 'PT Sans';
      font-style: italic;
      font-weight: 400;
      src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-italic.svg#PTSans') format('svg'); /* Legacy iOS */
    }
    /* pt-sans-700 - latin-ext_latin */
    @font-face {
      font-family: 'PT Sans';
      font-style: normal;
      font-weight: 700;
      src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
    }
    /* pt-sans-700italic - latin-ext_latin */
    @font-face {
      font-family: 'PT Sans';
      font-style: italic;
      font-weight: 700;
      src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/pt-sans-v12-latin-ext_latin-700italic.svg#PTSans') format('svg'); /* Legacy iOS */
    }
    
    /* open-sans-regular - latin-ext_latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
    }
    /* open-sans-700 - latin-ext_latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 600;
      src: url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
      src: local(''),
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
           url('https://lenorsi.kreanilla.hu/wp-content/uploads/themes/lenardorsi/fonts/open-sans-v18-latin-ext_latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
    }

    and this is my functions.php:

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'Open Sans';
        $fonts[] = 'PT Sans';
    
        return $fonts;
    } );

    and my fonts don’t load… I can see them in the customizer (with system fonts), but after choosing them and publishing the setting, when I get back to this setting option, I can see that it has swapped back to Google fonts.

    What am I doing wrong?

    #1655933
    David
    Staff
    Customer Support

    Hi there,

    can you raise a new topic, where you can share a link to your site, so we can take a look at why they’re not loading.

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