<?php class ReduxFramework_typography extends ReduxFramework{

    /**
     * Field Constructor.
     *
     * Required - must call the parent constructor, then assign field and value to vars, and obviously call the render field function
     *
     * @since ReduxFramework 1.0.0
     */
    function __construct($field = array(), $value ='', $parent){

        parent::__construct($parent->sections, $parent-&gt;args, $parent-&gt;extra_tabs);&#13;
        $this-&gt;field = $field;&#13;
        $this-&gt;value = $value;&#13;
        $this-&gt;parent = $parent;&#13;
&#13;
    }//function&#13;
&#13;
    /**&#13;
     * Field Render Function.&#13;
     *&#13;
     * Takes the vars and outputs the HTML for the field in the settings&#13;
     *&#13;
     * @since ReduxFramework 1.0.0&#13;
     */&#13;
    function render(){&#13;
&#13;
        global $wp_filesystem;&#13;
&#13;
        // Initialize the Wordpress filesystem, no more using file_put_contents function&#13;
        if (empty($wp_filesystem)) {&#13;
            require_once(ABSPATH .'/wp-admin/includes/file.php');&#13;
            WP_Filesystem();&#13;
        }&#13;
&#13;
        // No errors please&#13;
        $defaults = array(&#13;
            'font-family' =&gt; true,&#13;
            'font-size' =&gt; true,&#13;
            'subsets' =&gt; true,&#13;
            'font-weight' =&gt; true,&#13;
            'font-style' =&gt; true,&#13;
            'font-backup' =&gt; false,&#13;
            'color' =&gt; true,&#13;
            'preview' =&gt; true,&#13;
            'line-height' =&gt; true,&#13;
            'word-spacing' =&gt; false,&#13;
            'letter-spacing' =&gt; false,&#13;
            'google' =&gt; true,&#13;
            'update_weekly' =&gt; false // Enable to force updates of Google Fonts to be weekly&#13;
        );&#13;
        $this-&gt;field = wp_parse_args( $this-&gt;field, $defaults );&#13;
&#13;
        $defaults = array(&#13;
            'font-family'=&gt;'',&#13;
            'font-backup'=&gt;'',&#13;
            'line-height'=&gt;'',&#13;
            'word-spacing' =&gt; '',&#13;
            'letter-spacing' =&gt; '',&#13;
            'subsets'=&gt;'',&#13;
            'google'=&gt;false,&#13;
            'font-script'=&gt;'',&#13;
            'font-weight'=&gt;'',&#13;
            'font-style'=&gt;'',&#13;
            'color'=&gt;'',&#13;
            'font-size'=&gt;'',&#13;
        );&#13;
&#13;
        $this-&gt;value = wp_parse_args( $this-&gt;value, $defaults );&#13;
&#13;
        if (empty($this-&gt;field['units']) &amp;&amp; !empty($this-&gt;field['default']['units'])) {&#13;
            $this-&gt;field['units'] = $this-&gt;field['default']['units'];&#13;
        }          &#13;
        if ( empty( $this-&gt;field['units'] ) || !in_array( $this-&gt;field['units'], array( 'px', 'em', '%' ) ) ) {&#13;
            $this-&gt;field['units'] = 'px';&#13;
        }&#13;
        $unit = $this-&gt;field['units'];&#13;
&#13;
		if ($this-&gt;field['font-family'] === true):&#13;
        &#13;
	        echo '<div id="'.$this-&gt;field['id'].'" class="redux-typography-container" data-id="'.$this-&gt;field['id'].'" data-units="'.$unit.'">';&#13;
&#13;
    	        /**&#13;
    	        Font Family&#13;
    	         **/&#13;
            &#13;
            	if ( filter_var($this-&gt;value['google'], FILTER_VALIDATE_BOOLEAN) ) {&#13;
                $fontFamily = explode(', ', $this-&gt;value['font-family'],2);&#13;
    	        	if (empty($fontFamily[0]) &amp;&amp; !empty($fontFamily[1])) {&#13;
    	        		$fontFamily[0] = $fontFamily[1];&#13;
    	        		$fontFamily[1] = "";&#13;
    	        	}    		&#13;
            	}&#13;
&#13;
              if (!isset($fontFamily)) {&#13;
            		$fontFamily = array();&#13;
            		$fontFamily[0] = $this-&gt;value['font-family'];&#13;
    	        	$fontFamily[1] = "";&#13;
            	}&#13;
&#13;
              echo '<input type="hidden" class="redux-typography-font-family '.$this-&gt;field['class'].'" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][font-family]" value="'.$this-&gt;value['font-family'].'" data-id="'.$this-&gt;field['id'].'">';&#13;
              echo '<div class="select_wrapper typography-family" style="width: 220px; margin-right: 5px;">';&#13;
              echo '<select data-placeholder="'.__('Font family','redux-framework').'" class="redux-typography redux-typography-family '.$this-&gt;field['class'].'" id="'.$this-&gt;field['id'].'-family" data-id="'.$this-&gt;field['id'].'" data-value="'.$fontFamily[0].'">';&#13;
              echo '<option data-google="false" data-details="" value=""></option>';&#13;
              if ( isset($this-&gt;field['update_weekly']) &amp;&amp; $this-&gt;field['update_weekly'] === true &amp;&amp; $this-&gt;field['google'] === true &amp;&amp; !empty( $this-&gt;parent-&gt;args['google_api_key'] ) ) {&#13;
                  echo '<optgroup label="'.__('Standard Fonts', 'redux-framework').'">';&#13;
                  if( file_exists( ReduxFramework::$_dir.'inc/fields/typography/googlefonts.html' )) {&#13;
                    // Keep the fonts updated weekly&#13;
                    $weekback = strtotime( date('jS F Y', time() + (60 * 60 * 24 * -7) ) );&#13;
                    $last_updated = filemtime( ReduxFramework::$_dir.'inc/fields/typography/googlefonts.html' );&#13;
                    if ( $last_updated field['fonts'])) {&#13;
                  $this-&gt;field['fonts'] = array(&#13;
                      "Arial, Helvetica, sans-serif" =&gt; "Arial, Helvetica, sans-serif",&#13;
                      "'Arial Black', Gadget, sans-serif" =&gt; "'Arial Black', Gadget, sans-serif",&#13;
                      "'Bookman Old Style', serif" =&gt; "'Bookman Old Style', serif",&#13;
                      "'Comic Sans MS', cursive" =&gt; "'Comic Sans MS', cursive",&#13;
                      "Courier, monospace" =&gt; "Courier, monospace",&#13;
                      "Garamond, serif" =&gt; "Garamond, serif",&#13;
                      "Georgia, serif" =&gt; "Georgia, serif",&#13;
                      "Impact, Charcoal, sans-serif" =&gt; "Impact, Charcoal, sans-serif",&#13;
                      "'Lucida Console', Monaco, monospace" =&gt; "'Lucida Console', Monaco, monospace",&#13;
                      "'Lucida Sans Unicode', 'Lucida Grande', sans-serif" =&gt; "'Lucida Sans Unicode', 'Lucida Grande', sans-serif",&#13;
                      "'MS Sans Serif', Geneva, sans-serif" =&gt; "'MS Sans Serif', Geneva, sans-serif",&#13;
                      "'MS Serif', 'New York', sans-serif" =&gt;"'MS Serif', 'New York', sans-serif",&#13;
                      "'Palatino Linotype', 'Book Antiqua', Palatino, serif" =&gt; "'Palatino Linotype', 'Book Antiqua', Palatino, serif",&#13;
                      "Tahoma, Geneva, sans-serif" =&gt;"Tahoma, Geneva, sans-serif",&#13;
                      "'Times New Roman', Times, serif" =&gt; "'Times New Roman', Times, serif",&#13;
                      "'Trebuchet MS', Helvetica, sans-serif" =&gt; "'Trebuchet MS', Helvetica, sans-serif",&#13;
                      "Verdana, Geneva, sans-serif" =&gt; "Verdana, Geneva, sans-serif",&#13;
                  );&#13;
              }&#13;
&#13;
              // Standard sizes for normal fonts&#13;
              $font_sizes = urlencode( json_encode( array( '400'=&gt;'Normal 400', '700'=&gt;'Bold 700', '400italic'=&gt;'Normal 400 Italic', '700italic'=&gt;'Bold 700 Italic' ) ) );&#13;
              foreach ($this-&gt;field['fonts'] as $i=&gt;$family) {&#13;
                  echo '<option data-google="false" data-details="'.$font_sizes.'" value="'. $i .'" . selected>value['font-family'], $i, false) . '&gt;'. $family .'</option>';&#13;
              }&#13;
              if ($this-&gt;field['google'] == true &amp;&amp; !empty( $this-&gt;parent-&gt;args['google_api_key'] ) ) {&#13;
                  echo '</optgroup>';&#13;
&#13;
                  if( !file_exists( ReduxFramework::$_dir.'inc/fields/typography/googlefonts.html' ) ) {&#13;
                      $this-&gt;getGoogleFonts($wp_filesystem);&#13;
                  }&#13;
                  &#13;
                  if( file_exists( ReduxFramework::$_dir.'inc/fields/typography/googlefonts.html' )) {&#13;
                    echo $wp_filesystem-&gt;get_contents( ReduxFramework::$_dir.'inc/fields/typography/googlefonts.html' );&#13;
                  }&#13;
              }&#13;
&#13;
              echo '</select></div>';&#13;
&#13;
              if ($this-&gt;field['google'] === true) { &#13;
              	// Set a flag so we know to set a header style or not&#13;
                  echo '<input type="hidden" class="redux-typography-google'.$this-&gt;field['class'].'" id="'.$this-&gt;field['id'].'-google" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][google]" value="'. $this-&gt;field['google'] .'" data-id="'.$this-&gt;field['id'].'">';            &#13;
              }&#13;
&#13;
            endif;&#13;
&#13;
&#13;
&#13;
            /**&#13;
            Font Style/Weight&#13;
             **/&#13;
            if ($this-&gt;field['font-style'] === true || $this-&gt;field['font-weight'] === true):&#13;
                echo '<div class="select_wrapper typography-style" original-title="'.__('Font style','redux-framework').'">';&#13;
            	$style = $this-&gt;value['font-weight'].$this-&gt;value['font-style'];&#13;
                echo '<input type="hidden" class="typography-font-weight" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][font-weight]" val="'.$this-&gt;value['font-weight'].'" data-id="'.$this-&gt;field['id'].'"> ';&#13;
                echo '<input type="hidden" class="typography-font-style" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][font-style]" val="'.$this-&gt;value['font-style'].'" data-id="'.$this-&gt;field['id'].'"> ';&#13;
                echo '<select data-placeholder="'.__('Style','redux-framework').'" class="redux-typography redux-typography-style select'.$this-&gt;field['class'].'" original-title="'.__('Font style','redux-framework').'" id="'. $this-&gt;field['id'].'_style" data-id="'.$this-&gt;field['id'].'" data-value="'.$style.'">';&#13;
                if (empty($this-&gt;value['subset'])) {&#13;
                    echo '<option value=""></option>';&#13;
                }&#13;
                $nonGStyles = array('200'=&gt;'Lighter','400'=&gt;'Normal','700'=&gt;'Bold','900'=&gt;'Bolder');&#13;
                if (isset($gfonts[$this-&gt;value['font-family']])) {&#13;
                    foreach ($gfonts[$this-&gt;value['font-family']]['variants'] as $v) {&#13;
                        echo '<option value="'. $v['id'] .'" . selected>value['subset'], $v['id'], false) . '&gt;'. $v['name'] .'</option>';&#13;
                    }&#13;
                } else {&#13;
                    foreach ($nonGStyles as $i=&gt;$style){&#13;
                        if (!isset($this-&gt;value['subset']))&#13;
                            $this-&gt;value['subset'] = false;&#13;
                        echo '<option value="'. $i .'" . selected>value['subset'], $i, false) . '&gt;'. $style .'</option>';&#13;
                    }&#13;
                }&#13;
&#13;
                echo '</select></div>';&#13;
&#13;
            endif;&#13;
&#13;
&#13;
            /**&#13;
            Font Script&#13;
             **/&#13;
            if ($this-&gt;field['subsets'] === true &amp;&amp; $this-&gt;field['google'] === true):&#13;
                echo '<div class="select_wrapper typography-script tooltip" original-title="'.__('Font subsets','redux-framework').'">';&#13;
                echo '<select data-placeholder="'.__('Subsets','redux-framework').'" class="redux-typography redux-typography-subsets'.$this-&gt;field['class'].'" original-title="'.__('Font script','redux-framework').'" id="'.$this-&gt;field['id'].'-subsets" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][subsets]" data-value="'.$this-&gt;value['subsets'].'" data-id="'.$this-&gt;field['id'].'">';&#13;
                if (empty($this-&gt;value['subsets'])) {&#13;
                    echo '<option value=""></option>';&#13;
                }&#13;
                if (isset($gfonts[$this-&gt;value['font-family']])) {&#13;
                    foreach ($gfonts[$this-&gt;value['font-family']]['subsets'] as $v) {&#13;
                        echo '<option value="'. $v['id'] .'" . selected>value['subset'], $v['id'], false) . '&gt;'. $v['name'] .'</option>';&#13;
                    }&#13;
                }&#13;
                echo '</select></div>';&#13;
&#13;
            endif;&#13;
&#13;
&#13;
            /**&#13;
            Font Size&#13;
             **/&#13;
            if ($this-&gt;field['font-size'] === true):&#13;
                echo '<div class="input-append"><input type="text" class="span2 redux-typography-size mini'.$this-&gt;field['class'].'" placeholder="'.__('Size','redux-framework').'" id="'.$this-&gt;field['id'].'-size" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][font-size]" value="'.str_replace($unit, '', $this-&gt;value['font-size']).'" data-value="'.str_replace($unit, '', $this-&gt;value['font-size']).'"><span class="add-on">'.$unit.'</span></div>';&#13;
            	echo '<input type="hidden" class="typography-font-size" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][font-size]" value="'.$this-&gt;value['font-size'].'" data-id="'.$this-&gt;field['id'].'">';&#13;
            endif;&#13;
&#13;
&#13;
            /**&#13;
            Line Height&#13;
             **/&#13;
            if ($this-&gt;field['line-height'] === true):&#13;
                echo '<div class="input-append"><input type="text" class="span2 redux-typography redux-typography-height mini'.$this-&gt;field['class'].'" placeholder="'.__('Height','redux-framework').'" id="'.$this-&gt;field['id'].'-height" value="'.str_replace($unit, '', $this-&gt;value['line-height']).'" data-value="'.str_replace($unit, '', $this-&gt;value['line-height']).'"><span class="add-on">'.$unit.'</span></div>';&#13;
                echo '<input type="hidden" class="typography-line-height" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][line-height]" value="'.$this-&gt;value['line-height'].'" data-id="'.$this-&gt;field['id'].'">';&#13;
            endif;&#13;
&#13;
            /**&#13;
            Word Spacing&#13;
             **/&#13;
            if ($this-&gt;field['word-spacing'] === true):&#13;
                echo '<div class="input-append"><input type="text" class="span2 redux-typography redux-typography-word mini'.$this-&gt;field['class'].'" placeholder="'.__('Word Spacing','redux-framework').'" id="'.$this-&gt;field['id'].'-word" value="'.str_replace($unit, '', $this-&gt;value['word-spacing']).'" data-value="'.str_replace($unit, '', $this-&gt;value['word-spacing']).'"><span class="add-on">'.$unit.'</span></div>';&#13;
                echo '<input type="hidden" class="typography-word-spacing" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][word-spacing]" value="'.$this-&gt;value['word-spacing'].'" data-id="'.$this-&gt;field['id'].'">';&#13;
            endif;&#13;
&#13;
            /**&#13;
            Letter Spacing&#13;
             **/&#13;
            if ($this-&gt;field['letter-spacing'] === true):&#13;
                echo '<div class="input-append"><input type="text" class="span2 redux-typography redux-typography-letter mini'.$this-&gt;field['class'].'" placeholder="'.__('Letter Spacing','redux-framework').'" id="'.$this-&gt;field['id'].'-letter" value="'.str_replace($unit, '', $this-&gt;value['letter-spacing']).'" data-value="'.str_replace($unit, '', $this-&gt;value['letter-spacing']).'"><span class="add-on">'.$unit.'</span></div>';&#13;
            	echo '<input type="hidden" class="typography-letter-spacing" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][letter-spacing]" value="'.$this-&gt;value['letter-spacing'].'" data-id="'.$this-&gt;field['id'].'">';&#13;
            endif;&#13;
&#13;
            &#13;
            /**&#13;
            Backup Font&#13;
             **/&#13;
            if ($this-&gt;field['font-family'] === true &amp;&amp; $this-&gt;field['google'] === true) { &#13;
              // Set a flag so we know to set a header style or not&#13;
                echo '<input type="hidden" class="redux-typography-google'.$this-&gt;field['class'].'" id="'.$this-&gt;field['id'].'-google" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][google]" value="'. $this-&gt;field['google'] .'" data-id="'.$this-&gt;field['id'].'">';            &#13;
            &#13;
                if ($this-&gt;field['font-backup'] === true) {&#13;
                  echo '<div class="select_wrapper typography-family-backup" style="width: 220px; margin-right: 5px;">';&#13;
                  echo '<select data-placeholder="'.__('Backup Font Family','redux-framework').'" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][font-backup]" class="redux-typography redux-typography-family-backup '.$this-&gt;field['class'].'" id="'.$this-&gt;field['id'].'-family-backup" data-id="'.$this-&gt;field['id'].'" data-value="'.$this-&gt;value['font-backup'].'">';&#13;
                  echo '<option data-google="false" data-details="" value=""></option>';&#13;
                  foreach ($this-&gt;field['fonts'] as $i=&gt;$family) {&#13;
                      echo '<option data-google="true" data-details="'.$font_sizes.'" value="'. $i .'" . selected>value['font-backup'], $i, false) . '&gt;'. $family .'</option>';&#13;
                  }&#13;
                  echo '</select></div>';               &#13;
                }&#13;
            }&#13;
&#13;
            /**&#13;
            Font Color&#13;
             **/&#13;
            if ($this-&gt;field['color'] === true):&#13;
                $default = "";&#13;
                if (empty($this-&gt;field['default']['color']) &amp;&amp; !empty($this-&gt;field['color'])) {&#13;
                    $default = $this-&gt;value['color'];&#13;
                } else if (!empty($this-&gt;field['default']['color'])) {&#13;
                    $default = $this-&gt;field['default']['color'];&#13;
                }&#13;
                echo '<div id="' . $this-&gt;field['id'] . '_color_picker" class="colorSelector typography-color"><div style="background-color: '.$this-&gt;value['color'].'"></div></div>';&#13;
                echo '<input data-default-color="'.$default.'" class="redux-color redux-typography-color'.$this-&gt;field['class'].'" original-title="'.__('Font color','redux-framework').'" id="'.$this-&gt;field['id'].'-color" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][color]" type="text" value="'. $this-&gt;value['color'] .'" data-id="'.$this-&gt;field['id'].'">';&#13;
            endif;&#13;
&#13;
            /**&#13;
            Font Preview&#13;
             **/&#13;
            if (!isset( $this-&gt;field['preview'] ) || $this-&gt;field['preview'] !== false):&#13;
                if(isset($value['preview']['text'])){&#13;
                    $g_text = $value['preview']['text'];&#13;
                } else {&#13;
                    $g_text = '0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz';&#13;
                }&#13;
                if(isset($value['preview']['font-size'])) {&#13;
                    $g_size = 'style="font-size: '. $value['preview']['font-size'] .';"';&#13;
                } else {&#13;
                    $g_size = '';&#13;
                }&#13;
&#13;
                echo '<p class="clear '.$this-&gt;field['id'].'_previewer typography-preview" .>'. $g_text .'</p>';&#13;
                &#13;
            echo "</div>";&#13;
        endif;&#13;
&#13;
    }//function&#13;
&#13;
    /**&#13;
     * Enqueue Function.&#13;
     *&#13;
     * If this field requires any scripts, or css define this function and register/enqueue the scripts/css&#13;
     *&#13;
     * @since ReduxFramework 1.0.0&#13;
     */&#13;
    function enqueue(){&#13;
        wp_enqueue_script( 'select2-js' );&#13;
        wp_enqueue_style( 'select2-css' );&#13;
        wp_enqueue_style( 'wp-color-picker' );&#13;
&#13;
        wp_enqueue_script(&#13;
            'redux-field-color-js', &#13;
            ReduxFramework::$_url . 'inc/fields/color/field_color.min.js', &#13;
            array( 'jquery', 'wp-color-picker' ),&#13;
            time(),&#13;
            true&#13;
        );&#13;
&#13;
        wp_enqueue_style(&#13;
            'redux-field-color-css', &#13;
            ReduxFramework::$_url . 'inc/fields/color/field_color.css', &#13;
            time(),&#13;
            true&#13;
        );&#13;
&#13;
        wp_enqueue_script(&#13;
            'redux-field-typography-js',&#13;
            ReduxFramework::$_url.'inc/fields/typography/field_typography.min.js',&#13;
            array('jquery', 'wp-color-picker', 'redux-field-color-js', 'select2-js', 'jquery-numeric'),&#13;
            time(),&#13;
            true&#13;
        );&#13;
&#13;
        wp_enqueue_style(&#13;
            'redux-field-typography-css',&#13;
            ReduxFramework::$_url.'inc/fields/typography/field_typography.css',&#13;
            time(),&#13;
            true&#13;
        );&#13;
&#13;
&#13;
    }//function&#13;
&#13;
    /**&#13;
     * makeGoogleWebfontLink Function.&#13;
     *&#13;
     * Creates the google fonts link.&#13;
     *&#13;
     * @since ReduxFramework 3.0.0&#13;
     */&#13;
    function makeGoogleWebfontLink($fonts) {&#13;
      $link = "";&#13;
      $subsets = array();&#13;
      foreach($fonts as $family=&gt;$font) {&#13;
        if (!empty($link)) {&#13;
          $link .= "|"; // Append a new font to the string&#13;
        }&#13;
        $link .= $family;&#13;
&#13;
        if ( !empty( $font['font-style'] ) ) {&#13;
          $link .= ':';&#13;
          if ( !empty($font['font-style'] ) ) {&#13;
            $link .= implode(',', $font['font-style']);&#13;
          }&#13;
        }&#13;
        if ( !empty( $font['subset'] ) ) {&#13;
          foreach($font['subset'] as $subset) {&#13;
            if ( !in_array( $subset, $subsets) ) {&#13;
              array_push($subsets, $subset);&#13;
            }  &#13;
          }&#13;
          &#13;
        }&#13;
      }&#13;
      if (!empty($subsets)) {&#13;
        $link .= "&amp;subset=".implode(',', $subsets);&#13;
      }&#13;
&#13;
      return '//fonts.googleapis.com/css?family='.$link;&#13;
&#13;
    }&#13;
&#13;
    function output() {&#13;
      global $wp_styles;&#13;
&#13;
      if ( !empty( $this-&gt;parent-&gt;fieldTypographySet ) ) {&#13;
        return; // We only run this function once!&#13;
      }&#13;
      &#13;
      $this-&gt;parent-&gt;fieldTypographySet = true;&#13;
&#13;
      $outCSS = "";&#13;
      $fonts = array();&#13;
      foreach( $this-&gt;sections as $section ) {&#13;
        if( isset( $section['fields'] ) ) {&#13;
          foreach( $section['fields'] as $field ) {&#13;
            if( isset( $field['type'] ) &amp;&amp; $field['type'] == "typography" ) {&#13;
&#13;
              $font = $this-&gt;parent-&gt;options[$field['id']];&#13;
              //echo $font['font-family'];&#13;
              if ( !empty( $font['font-family'] ) &amp;&amp; !empty( $font['font-backup'] ) ) {&#13;
                $font['font-family'] = str_replace( ', '.$font['font-backup'], '', $font['font-family'] );  &#13;
              }&#13;
              if ( !empty( $field['output'] ) ) : // Don't create dynamic CSS if output array is not set&#13;
                $keys = implode(",", $field['output']);&#13;
                $newOutCSS = '';&#13;
                foreach( $font as $key=&gt;$value) {&#13;
                  if (empty($value) &amp;&amp; in_array($key, array('font-weight', 'font-style'))) {&#13;
                    $value = "normal";&#13;
                  }&#13;
                  if ( $key == "google" || $key == "subsets" || $key == "font-backup" || empty( $value ) ) {&#13;
                      continue;&#13;
                  }&#13;
                  $newOutCSS .= $key.':'.$value.';';&#13;
                }&#13;
                if ( !empty( $newOutCSS) ) {&#13;
                  $outCSS .= $keys."{".$newOutCSS.'}';&#13;
                }                 &#13;
              endif;&#13;
              &#13;
              // Google only stuff!&#13;
              if ( !empty( $this-&gt;parent-&gt;args['google_api_key'] ) &amp;&amp; !empty($font['font-family']) &amp;&amp; !empty($this-&gt;parent-&gt;options[$field['id']]['google']) &amp;&amp; filter_var($this-&gt;parent-&gt;options[$field['id']]['google'], FILTER_VALIDATE_BOOLEAN) ) {&#13;
                if ( !empty( $font['font-backup'] ) &amp;&amp; !empty( $font['font-family'] ) ) {&#13;
                  $font['font-family'] = str_replace( ', '.$font['font-backup'], '', $font['font-family'] );&#13;
                }&#13;
                $font['font-family'] = str_replace( ' ', '+', $font['font-family'] );&#13;
                if ( empty( $fonts[$font['font-family']] ) ) {&#13;
                  $fonts[$font['font-family']] = array();  &#13;
                }&#13;
                if ( !empty( $font['font-weight'] ) ) {&#13;
                  if ( empty( $fonts[$font['font-family']]['font-weight'] ) || !in_array( $font['font-weight'], $fonts[$font['font-family']]['font-weight'] ) ) {&#13;
                    $style = $font['font-weight'];&#13;
                  }&#13;
                  if ( !empty( $font['font-style'] ) ) {&#13;
                      $style .= $font['font-style'];&#13;
                  }                        &#13;
                  if ( empty( $fonts[$font['font-family']]['font-style'] ) || !in_array( $style, $fonts[$font['font-family']]['font-style'] ) ) {&#13;
                    $fonts[$font['font-family']]['font-style'][] = $style;&#13;
                  }                      &#13;
                }&#13;
                if ( !empty( $font['subsets'] ) ) {&#13;
                  if ( empty( $fonts[$font['font-family']]['subset'] ) || !in_array( $font['subsets'], $fonts[$font['font-family']]['subset'] ) ) {&#13;
                    $fonts[$font['font-family']]['subset'][] = $font['subsets'];&#13;
                  }                      &#13;
                }   &#13;
              }                   &#13;
            }&#13;
          }&#13;
        }&#13;
      } // Typography not set&#13;
&#13;
      $version = '';&#13;
      if (!empty($this-&gt;parent-&gt;options['REDUX_last_saved'])) {&#13;
        $version = $this-&gt;parent-&gt;options['REDUX_last_saved'];&#13;
      }&#13;
&#13;
      if ( !empty( $fonts ) &amp;&amp; filter_var($this-&gt;parent-&gt;args['output'], FILTER_VALIDATE_BOOLEAN) ) {&#13;
        echo '<link rel="stylesheet" id="redux-google-fonts-css" href="'.%24this-&gt;makeGoogleWebfontLink(%20%24fonts%20).'&amp;v='.%24version.'" type="text/css" media="all">';&#13;
        //wp_register_style( 'redux-google-fonts', $this-&gt;makeGoogleWebfontLink( $fonts ), '', $version );&#13;
        //wp_enqueue_style( 'redux-google-fonts' ); &#13;
      }&#13;
      if ( !empty( $outCSS ) ) {&#13;
        echo '<style type="text/css" class="redux-'.$this-&gt;field['type'].'">'.$outCSS.'</style>';  &#13;
      }&#13;
    }&#13;
&#13;
    /**&#13;
     * getGoogleFonts Function.&#13;
     *&#13;
     * Used to retrieve Google Web Fonts from their API&#13;
     *&#13;
     * @since ReduxFramework 0.2.0&#13;
     */&#13;
    function getGoogleFonts($wp_filesystem) {&#13;
&#13;
        /*&#13;
                $sid = session_id();&#13;
                if($sid) {&#13;
                    $googleArray = $_SESSION['googleArray'];&#13;
                } else {&#13;
                    session_start();&#13;
                    $googleArray = array();&#13;
                }&#13;
&#13;
                if (empty($_SESSION['googleArray'])) :&#13;
                    */&#13;
&#13;
        &#13;
&#13;
        if( !file_exists( ReduxFramework::$_dir.'inc/fields/typography/googlefonts.json' ) ) {&#13;
            $result = wp_remote_get( 'https://www.googleapis.com/webfonts/v1/webfonts?key='.$this-&gt;parent-&gt;args['google_api_key']);&#13;
            if ($result['response']['code'] == 200) {&#13;
                $result = json_decode($result['body']);&#13;
                foreach ($result-&gt;items as $font) {&#13;
                    $googleArray[$font-&gt;family] = array(&#13;
                        'variants' =&gt; $this-&gt;getVariants($font-&gt;variants),&#13;
                        'subsets' =&gt; $this-&gt;getSubsets($font-&gt;subsets)&#13;
                    );&#13;
                }&#13;
&#13;
                if ( !empty( $googleArray ) ) {&#13;
                    $wp_filesystem-&gt;put_contents(&#13;
                        ReduxFramework::$_dir.'inc/fields/typography/googlefonts.json',&#13;
                        json_encode($googleArray),&#13;
                        FS_CHMOD_FILE // predefined mode settings for WP files&#13;
                    );&#13;
                }&#13;
&#13;
            }//if&#13;
        }//if&#13;
        if (empty($googleArray)) {&#13;
            $googleArray = json_decode($wp_filesystem-&gt;get_contents(ReduxFramework::$_dir.'inc/fields/typography/googlefonts.json' ), true );&#13;
        }&#13;
        $gfonts = '<optgroup label="'.__('Google Webfonts', 'redux-framework').'">';&#13;
        foreach ($googleArray as $i =&gt; $face) {&#13;
            $gfonts .= '<option data-details="'.urlencode(json_encode($face)).'" data-google="true" value="'.$i.'">'. $i .'</option>';&#13;
        }&#13;
        $gfonts .= '</optgroup>';&#13;
        //endif;&#13;
        if (empty($googleArray)) {&#13;
            $gfonts = "";&#13;
        }&#13;
&#13;
        $wp_filesystem-&gt;put_contents(&#13;
            ReduxFramework::$_dir.'inc/fields/typography/googlefonts.html',&#13;
            $gfonts,&#13;
            FS_CHMOD_FILE // predefined mode settings for WP files&#13;
        );&#13;
    }//function&#13;
&#13;
    /**&#13;
     * getGoogleFonts Function.&#13;
     *&#13;
     * Clean up the Google Webfonts subsets to be human readable&#13;
     *&#13;
     * @since ReduxFramework 0.2.0&#13;
     */&#13;
    function getSubsets($var) {&#13;
        $result = array();&#13;
        foreach ($var as $v) {&#13;
            if (strpos($v,"-ext")) {&#13;
                $name = ucfirst(str_replace("-ext"," Extended",$v));&#13;
            } else {&#13;
                $name = ucfirst($v);&#13;
            }&#13;
            array_push($result, array('id'=&gt;$v, 'name'=&gt;$name));&#13;
        }&#13;
        return array_filter($result);&#13;
    }//function&#13;
&#13;
    /**&#13;
     * getGoogleFonts Function.&#13;
     *&#13;
     * Clean up the Google Webfonts variants to be human readable&#13;
     *&#13;
     * @since ReduxFramework 0.2.0&#13;
     */&#13;
    function getVariants($var) {&#13;
        $result = array();&#13;
        $italic = array();&#13;
        foreach ($var as $v) {&#13;
            $name = "";&#13;
            if ($v[0] == 1) {&#13;
                $name = 'Ultra-Light 100';&#13;
            } else if ($v[0] == 2) {&#13;
                $name = 'Light 200';&#13;
            } else if ($v[0] == 3) {&#13;
                $name = 'Book 300';&#13;
            } else if ($v[0] == 4 || $v[0] == "r" || $v[0] == "i") {&#13;
                $name = 'Normal 400';&#13;
            } else if ($v[0] == 5) {&#13;
                $name = 'Medium 500';&#13;
            } else if ($v[0] == 6) {&#13;
                $name = 'Semi-Bold 600';&#13;
            } else if ($v[0] == 7) {&#13;
                $name = 'Bold 700';&#13;
            } else if ($v[0] == 8) {&#13;
                $name = 'Extra-Bold 800';&#13;
            } else if ($v[0] == 9) {&#13;
                $name = 'Ultra-Bold 900';&#13;
            }&#13;
            if ($v == "regular") {&#13;
                $v = "400";&#13;
            }&#13;
            if (strpos($v,"italic") || $v == "italic") {&#13;
                $name .= " Italic";&#13;
                $name = trim($name);&#13;
                $italic[] = array('id'=&gt;$v, 'name'=&gt;$name);&#13;
            } else {&#13;
                $result[] = array('id'=&gt;$v, 'name'=&gt;$name);&#13;
            }&#13;
        }&#13;
&#13;
        array_push($result, array_pop($italic));&#13;
&#13;
        return array_filter($result);&#13;
    }//function&#13;
&#13;
&#13;
}//class