Search code examples
phpwebfontsreductionload-time

PHP Script to load fonts as needed


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!


Solution

  • 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;