3.1.1 HTTPS Fonts and Blocking Fonts

Tagged: 

  • 3.1.1 HTTPS Fonts and Blocking Fonts
    Viewing 15 posts - 1 through 15 (of 45 total)

  • karelleninc
    Participant
    #9855

    Please see next post


    karelleninc
    Participant
    #9857
    This reply has been marked as private.

    Bassam Tarek
    Keymaster
    #9885

    @karelleninc,

    1- Regarding Google Fonts Blocking issue, Up till now we didn’t find a solution that is free of problems, the link that you shared offers webfonts.js, it loads the font async and removes the error from google page speed however it flashes the font since it loads it randomly in the footer

    – If we add the font in the header and async the error is not removed from google, it still sees the font as a blocker

    Anyway till we find a fix for it please add this function to your child theme

    add_action( 'wp_footer', 'circleflip_get_google_fonts' );
    
    	/* Enque Script of Google Fonts */
    	if ( ! function_exists( 'circleflip_get_google_fonts' ) ) :
    	function circleflip_get_google_fonts() {
    		$link = '';
    		$googleFonts = '';
    		$my_fonts = array(
    			'BebasNeueRegular'	 => 'BebasNeueRegular',
    			'Times New Roman'	 => 'Times New Roman',
    			'Arial'				 => 'Arial',
    			'DroidArabicKufi'	 => 'DroidArabicKufi',
    			'SourceSansSemiBold' => 'SourceSansSemiBold',
    			'sourceSans'		 => 'sourceSans',
                'Helvetica'          => 'Helvetica',
    			'museo_slab500'		 => 'museo_slab500'
    		);
    		$cfOptions = get_option( 'rojo', array() );
    		$faces = array();
    		foreach ( new RecursiveIteratorIterator( new RecursiveArrayIterator( $cfOptions ), RecursiveIteratorIterator::LEAVES_ONLY ) as $k => $value ) {
    			if ( 'face' === $k ) {
    				if ( ! in_array( $value, $my_fonts ) ) {
    					$faces[] = $value;
    				}
    			}
    		}
            $faces = array_unique( $faces );
     	    $result = array_merge($faces, cr_get_option( 'cust_font',array() ));
    	    $result = array_unique($result);
            $googleFonts = implode ( '|' , $result);
            if ( $googleFonts != '' ) {
                // $link = 'https://fonts.googleapis.com/css?family=' . preg_replace( "/ /", "+", $googleFonts );
                // wp_register_style( 'google_fonts', $link );
                // wp_enqueue_style( 'google_fonts' );
    			?>
    			<script type="text/javascript">
    				WebFontConfig = {
    				google: { families: [ '<?php echo $googleFonts;?>' ] }
    				};
    				(function() {
    				var wf = document.createElement('script');
    				// wf.src = '<?php echo get_template_directory_uri(); ?>/js/webfont.js';
    				wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    				wf.type = 'text/javascript';
    				wf.async = 'true';
    				var s = document.getElementsByTagName('script')[0];
    				s.parentNode.insertBefore(wf, s);
    				// WebFont.load(WebFontConfig);
    				})();
    			</script>
    			<?php
            }
    	}
    	endif;

    and it should work but with the flashing effect of the font which we can’t find a proper solution for.

    Regarding the mixed content:

    We fixed the font issue and will be released in the next version

    Best Regards


    karelleninc
    Participant
    #9890

    Thanks!


    karelleninc
    Participant
    #9891

    @bassam,

    Here’s the article describing how to prevent the font refresh flicker.

    http://webdesign.tutsplus.com/articles/quick-tip-avoid-fout-by-adding-a-web-font-preloader–webdesign-8287


    karelleninc
    Participant
    #9892

    karelleninc
    Participant
    #9893

    The solution would be simply to hide everything in the body while fonts are loading and then set visibility once they are done using methodology above.

    .wf-loading h1 {
    /* styles to use while Typekit is loading */
    }

    .wf-active h1 {
    /* styles to use after Typekit is loaded */
    }


    Bassam Tarek
    Keymaster
    #9908

    Hi @karelleninc,

    Unfortunately we can’t add this css to the core theme,

    Please feel free to add it to style.css in your child-theme and for the script mentioned in the article you can add it in the functions.php of the child-theme in an early action like “init”

    Let me know if you need anything else regarding this issue

    Best Regards


    karelleninc
    Participant
    #9909

    @bassam,

    Begging your pardon, but the “wf-inactive” is already in the “html” tag of my theme somehow. Since you are using the dynamic font loading, it seems strange to me you wouldn’t use the above method in the core.


    Bassam Tarek
    Keymaster
    #9910

    Yes, wf-inactive is available because of the code we sent you “dynamic font loading code – webfonts” and we won’t release this code to the public, so nobody will have wf-inactive class

    Hope this helps


    karelleninc
    Participant
    #9911

    I see, ok, thanks, I guess I’ll have to integrate it by myself.

    Just curious, why would you not integrate dynamic font loading for everybody?


    Bassam Tarek
    Keymaster
    #9912

    Because it generates another issue which doesn’t have a clean solution, hiding elements and showing them after a font is loaded is a hack and not a solution


    karelleninc
    Participant
    #9914

    Actually, it’s the official *solution* that stated by both TypeKit and Adobe for FOUT (flash of unstyled text) – https://github.com/typekit/webfontloader

    You hide the rendering of the page while the fonts are not available (i.e. by default) and then switch visibility once. This prevents the page layout oscillation and flicker.


    Bassam Tarek
    Keymaster
    #9915

    Then i see it as a hack that is posted by TypeKit and Adobe, You can use it in your child theme easily so i guess there is no problem here


    karelleninc
    Participant
    #9919

    @bassam 🙂 This how DOM works. Even if you Shadow DOM, changing the fonts will cause re-rendering of the entire layout. Either the fonts have to be blocking (causing delay in page building) or you have to allow the page to build asynchronously but render it several times as components are loaded. The latter will cause the FOUT, unless you hide it. I don’t see how any of it is a hack, since that’s how the browser rendering engine is supposed to operate under DOM/CSSOM rendering pipeline.

Viewing 15 posts - 1 through 15 (of 45 total)

The topic ‘3.1.1 HTTPS Fonts and Blocking Fonts’ is closed to new replies.