3.1.1 HTTPS Fonts and Blocking Fonts

Tagged: 

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

  • karelleninc
    Participant
    #9920

    I also would like to point out that the above script does not work. WebFonts wf-loading is triggered, followed by wf-inactive, whereas the fonts are supposed to be active, i.e. wf-active should be the class assigned to html tag.


    Bassam Tarek
    Keymaster
    #9936

    One of the most important factors for any website is to have the content visible as fast as possible, We don’t believe in delaying the load of a font and delaying the content in return, So the default will be the normal font loading.

    Regarding wf-inactive:

    Please use this code instead of the previous one

    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 != '' ) {
    			?>
    			<script type="text/javascript">
    				WebFontConfig = {
    				google: { families: [ '<?php echo $googleFonts;?>' ] }
    				};
    				(function() {
    				var wf = document.createElement('script');
    				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);
    				})();
    			</script>
    			<?php
            }
    	}
    	endif;

    Also please update Circle Flip to version 3.1.2 in order to fix the https issue

    Let me know if there is anything else is missing
    Best Regards


    karelleninc
    Participant
    #9951

    @bassam, thanks, I’ll try it out.

    The blocking font loading that you currently use now prevents not only the rendering of the website, but also the assembly of DOM/CSSOM and rendering will not occur until the font is loading either.

    When you use async font loading, the DOM/CSSOM are actually built and layouts can be computed for some of the elements. With visibility set to false WHILE the fonts are loading you’re only preventing the FOUT, not the actual DOM/CSSOM processing, which may result in faster rendering in the end.

    That’s why Google penalizes synchronous font loading that you have and doesn’t penalize the WebFont one.


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

    karelleninc
    Participant
    #9957

    Furthermore the code above contained syntax errors in:

    google: { families: [ ‘<?php echo $googleFonts;?>’ ] }

    (the ‘ have to be removed around) and it still does not work as expected AND does not disable static font loading by CF.


    Bassam Tarek
    Keymaster
    #10002

    @karelleninc,

    I opened the main.css that you linked to and there is no single http:// in the file, please recheck and confirm

    Thanks


    karelleninc
    Participant
    #10003

    @bassam,

    Rechecked:

    /** MISC **/
    @import url(http://fonts.googleapis.com/css?family=Raleway:400);
    .cf:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
    }


    Bassam Tarek
    Keymaster
    #10004

    Weird, this is how i see it in your file

    /** MISC **/
    @import url(https://fonts.googleapis.com/css?family=Raleway:400);
    .cf:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
    }

    Please make sure to clear your cache


    karelleninc
    Participant
    #10005

    @bassam,

    Maybe you should clear the cache 😉
    I’m running in Incognito with cache disabled in network settings of Chrome dev tools 🙂


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

    karelleninc
    Participant
    #10008

    The URL that actually appears in the page has the ?ver=4.6 query string.


    Bassam Tarek
    Keymaster
    #10009

    Because the first url is cached, please clear your cache and it will be ok


    Bassam Tarek
    Keymaster
    #10010

    Ah and btw i didn’t open this link before so i’m not the one who should clear the cache 😉


    karelleninc
    Participant
    #10011

    You’re right, it’s CloudFlare cache screwing up even in Developer Mode, took several times to clear it. So it’s not an issue.

    The only remaining issue in this thread is to get
    (1) the async font loading working; and
    (2) make sure the fonts are not double-loaded by the browser when async fonts are loaded.


    Bassam Tarek
    Keymaster
    #10193

    Hi Karelleninc,

    1- After you removed the single quotes it should work properly, can you please explain what is the problem ?

    2- I checked it and found that this is a conflict with the revolution slider plugin, if you disabled it then it will work, We are checking what’s wrong here and will get back to you

    Thanks

Viewing 15 posts - 16 through 30 (of 45 total)

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