Front End Font Loader

[darknailblue]

Hi! I'm making a theme that uses the typography field and found that I needed to write a simple font-end compiler

Below is a sample function that grabs all unique font families from all options pages and then calls them on the front end.

function anf_load_custom_fonts ( ) {
    $fields = get_field_objects('option');      // or whatever custom post, id, etc.
    $font_scraper = array();

    // Grab each unique instance of a custom font
    foreach ($fields as $key => $value) {
        if ( $value['type'] == 'typography' ) {
            $family = $value['value']['font-family'];
            if ( !array_search($family, $font_scraper))
                $font_scraper[$key] = $family;
        }
    }

    // create a string
    foreach ($font_scraper as $font) {
        $fonts = implode("|", $font_scraper);
    }

    // enqueue the necessary fonts
    if ( $fonts ) {
        wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=' . $fonts, array(), NULL, false );
    }
}

Just wondering if there is a way that similar code could be introduced into the plugin. Would be very useful!

[davidmcnee]

Thanks for posting this darknailblue. I added weights in and changed the | to %7C

global $post;
    $fonts = '';
    $fields = get_field_objects($post->ID);
    $font_scraper = array();
    foreach ($fields as $key => $value) {
        if ( $value['type'] == 'typography' ) {
            $family = $value['value']['font-family'];
            $weight = $value['value']['font-weight'];
            if ( !array_search($family, $font_scraper)) {
                $family = str_replace(' ', '+', $family);
                if ( !empty($weight)) {
                    $font_scraper[$key] = $family . ':' . $weight;
                } else {
                    $font_scraper[$key] = $family;
                }
            }
        }
    }
    foreach ($font_scraper as $font) {
        $fonts = implode("%7C", $font_scraper);
    }
    if ( $fonts ) {
        wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=' . $fonts, array(), NULL, false );
    }

[darknailblue]

Expanded once again. My final code looks something like. Simply added a urlencode wrapper to the values just incase.

global $post;
    $fonts = '';
    $fields = get_field_objects($post->ID);
    $font_scraper = array();
    foreach ($fields as $key => $value) {
        if ( $value['type'] == 'typography' ) {
            $family = urlencode($value['value']['font-family']);
            $weight = urlencode($value['value']['font-weight']);
            if ( !array_search($family, $font_scraper)) {
                $family = str_replace(' ', '+', $family);
                if ( !empty($weight)) {
                    $font_scraper[$key] = $family . ':' . $weight;
                } else {
                    $font_scraper[$key] = $family;
                }
            }
        }
    }
    foreach ($font_scraper as $font) {
        $fonts = implode("%7C", $font_scraper);
    }
    if ( $fonts ) {
        wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=' . $fonts, array(), NULL, false );
    }