PHP Script to load fonts as needed

1
votes

I'm looking for a way to add fonts on an 'as-needed' basis.

I originally had 4 Google API Fonts chosen from when I build this particular site. Now that it's grown, I'd like to up the font selection to 9 choices.

I'm trying to figure out a way to get this done via PHP, but I'm a designer so my php is 'eh'.

Here's the "rough draft" from what I know of php.

Anybody want to help me out real quick?

<?php //This is in an External PHP Command Page
$aladin = "Aladin";
$cardo = "Cardo:400,400italic";
$crimson = "Crimson+Text:700italic";
$euphoria = "Euphoria+Script";
$josefin = "Josefin+Slab:400,700";
$philosopher = "Philosopher:400,400italic";
$redressed = "Redressed";
$rouge = "Rouge+Script";
$vollkorn = "Vollkorn:400,400italic,700";

//Factory Presets
$all = "$aladin, $cardo, $crimson, $euphoria, $josefin, $philosopher, $redressed, $rouge, $vollkorn";
$main = "$cardo, $crimson, $philosopher,";

    function insertFonts ($fonts) {
        echo '<link href=\"//fonts.googleapis.com/css?family=';
        echo $fonts;
        echo '\' rel="stylesheet" type="text/css" />';  
        };
?>

Then this in the web page.

<?php //This goes inside the <head> of X page
insertFonts($main); // OR insertFonts($aladin, $redressed, $euphoria); as needed
?>

Also, the link tag needs a | in between the font names... I have no idea how to do this. The format for all of them provided by google is < link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic|Crimson+Text:700italic|Euphoria+Script|Philosopher:400,400italic|Vollkorn:400,400italic,700|Josefin+Slab:400,700|Redressed|Aladin|Rouge+Script' rel='stylesheet' type='text/css' >

Thanks!

4
phpwebfontsreductionload-time
$main = $cardo."|".$crimson."|".$philosopher."|"; ? does that work? - Green Black

4 Answers

1
votes
function insertFonts($f){
    $output = '';
    $fonts = array(
        'aladin'        =>  "Aladin",
        'cardo'         =>  "Cardo:400,400italic",
        'crimson'       =>  "Crimson+Text",
        'euphoria'      =>  "Euphoria+Script",
        'josefin'       =>  "Josefin+Slab, serif",
        'philosopher'   =>  "Philosopher, italic",
        'redressed'     =>  "Redressed, cursive",
        'rouge'         =>  "Rouge+Script, cursive",
        'vollkorn'      =>  "Vollkorn, serif"
    );

foreach ($f as $val) {
    if(array_key_exists($val, $fonts)){
        if(strlen($output)>0) $output .="|";
        $output .="$fonts[$val]";
    }
}
return strlen($output)>0 ? "<link href=\"//fonts.googleapis.com/css?family=$output\" rel='stylesheet' type='text/css' />" : '';
}

// Usage
echo insertFonts(array('cardo','josefin'));

But if you want to load each fonts seperatey, change the method this way:

foreach ($f as $val) {
    if(array_key_exists($val, $fonts)){
        $output .="<link href=\"//fonts.googleapis.com/css?family=$fonts[$val]\" rel='stylesheet' type='text/css' />\n";
    }
}

return $output;
0
votes
<?php
header('Content-Type: text/plain'); // this is just for the example

$fonts = array();
$fonts['aladin'] = "Aladin";
$fonts['cardo'] = "Cardo:400,400italic";
$fonts['crimson'] = "Crimson+Text:700italic";
$fonts['euphoria'] = "Euphoria+Script";
$fonts['josefin'] = "Josefin+Slab:400,700";
$fonts['philosopher'] = "Philosopher:400,400italic";
$fonts['redressed'] = "Redressed";
$fonts['rouge'] = "Rouge+Script";
$fonts['vollkorn'] = "Vollkorn:400,400italic,700";

//Factory Presets
$all = implode('|', $fonts);
$main = implode('|', array($fonts['cardo'], $fonts['crimson'], $fonts['philosopher']));

function insertFonts ($fonts) {
    echo '<link href="//fonts.googleapis.com/css?family='.$fonts.'" rel="stylesheet" type="text/css" />'.PHP_EOL;
};


insertFonts($all); // <link href="//fonts.googleapis.com/css?family=Aladin|Cardo:400,400italic|Crimson+Text:700italic|Euphoria+Script|Josefin+Slab:400,700|Philosopher:400,400italic|Redressed|Rouge+Script|Vollkorn:400,400italic,700" rel="stylesheet" type="text/css" />
insertFonts($main); // <link href="//fonts.googleapis.com/css?family=Cardo:400,400italic|Crimson+Text:700italic|Philosopher:400,400italic" rel="stylesheet" type="text/css" />

?>
0
votes

Try this

// These are the keys of the array in the `insertFonts` function
// Here only as an example
$which = 'cardo,crimson,philosopher';

function insertFonts ($which = 'all') 
{
    $fonts = array(
        'alladin'     => "Aladin",
        'cardo'       => "Cardo:400,400italic",
        'crimson'     => "Crimson+Text",
        'euphoria'    => "Euphoria+Script",
        'josefin'     => "Josefin+Slab, serif",
        'philosopher' => "Philosopher, italic",
        'redressed'   => "Redressed, cursive",
        'rouge'       => "Rouge+Script, cursive",
        'vollkorn'    => "Vollkorn, serif",
    );

    // $which can be either all (or ommitted) or contain
    // the keys of the fonts defined in the $fonts array above
    $final_fonts = array();
    if ($which == 'all')
    {
        $final_fonts = $fonts;
    }
    else
    {
        $keys = explode(',', $which);
        if (is_array($keys)) 
        {
            foreach ($keys as $item) 
            {
                if (array_key_exists($item, $fonts)
                {
                    $final_fonts[$item] = $fonts[$item];
                }
            }
        }
    }

    if (count($final_fonts) > 0)
    {
        $font_line = implode("|", $final_fonts);
        $output    = '<link href="//fonts.googleapis.com/css?family='
                   . $font_line 
                   . ' rel="stylesheet" type="text/css" />'; 
        echo $output;
    }
};

The above allows you to set different sets of fonts for pages and is not only restricted to the main/all. All you have to do is pass in the function the different keys of the fonts you want included, separated by commas.

0
votes

Thanks for all of the responses! Here is the code I used (based on the answer provided by Hashem Qolami)

<?php 
function insertFonts($f){
$output = '';
$fonts = array(
    'aladin'        =>  "Aladin",
    'cardo'         =>  "Cardo:400,400italic",
    'crimson'       =>  "Crimson+Text:700italic",
    'euphoria'      =>  "Euphoria+Script",
    'josefin'       =>  "Josefin+Slab:400,700",
    'philosopher'   =>  "Philosopher:400,400italic",
    'redressed'     =>  "Redressed",
    'rouge'         =>  "Rouge+Script",
    'vollkorn'      =>  "Vollkorn:400,400italic,700",
    'main'          =>  "Cardo:400,400italic|Crimson+Text:700italic|Philosopher:400,400italic",
    'cursives'      =>  "Euphoria+Script|Redressed|Rouge+Script"
);

foreach ($f as $val) {
    if(strlen($output)>0) $output .="|";
    $output .="$fonts[$val]";
}
return "<link href=\"//fonts.googleapis.com/css?family=$output\" rel='stylesheet' type='text/css' />";
}

// Usage
echo insertFonts(array('main', 'cursives', 'vollkorn', 'aladin', 'josefin'));
?>

This is a handy little snippet of code, so I wanted to post a 'finished' version without the mistakes of my original post. This helps load time so much for slow internet speeds (like 3G Mobile Browsers). This gem's going in all of my sites from now on :)

You can see the results here: http://www.creativedesigninfluence.com/phptest/font-test2.php

Thanks again!