Skip to content

Latest commit

 

History

History
185 lines (156 loc) · 5.49 KB

README.md

File metadata and controls

185 lines (156 loc) · 5.49 KB
Raw

GoogleFonts

A PHP Class for loading Google Fonts in an orderly manner.

Why?

This class is useful when requesting fonts hosted by Google. You can request multiple font families (and font weights as well as subsets per family) in just one call.

  • Easy-to-use
  • Supports widely used Google Fonts
  • Supports IE8 and older browsers with a fallback function

How does it work?

When a new instance is made, this script will check per font if a specific subset (i.e. "latin") is defined. Font family requests are divided in those with a subset, and those without a specified subset. The last group will be loaded in a combined request. The other fonts each require a load. This script will output the HTML needed to load the font files from Google when the load() function is called.

Basic usage

The GoogleFonts class accepts 1 array with font information: Each font array accepts a couple of arguments:

name
`string` - Name of the font family
weight
`mixed` - A string or array with all requested font weights
Example: `"300,400,400italic"` or `array(300, 400, "400italic")`
subset
`string` - Subset parameter code
Example: _"latin"_ or _"cyrillic-ext"_

Note: You can request multiple fonts in one call by wrapping all font arrays with another array

Examples

Loading a single font

Requesting a single font family, with no further weight(s) or subset(s) specified.

Important note: First of all, I would like to say that this is probably the worst possible scenario for using this class, since you can do this simply by adding Google's standard code as standalone HTML. That is less, and therefore better code. But, since it is possible, I might as well show how it works:

<head>
    ...
    <?php
    // Require class
    require_once("/path/to/GoogleFonts.class.php");
    // Load font
    $font = new GoogleFonts(
        array(
            "name" => "Open Sans"
        )
    );
    $font->load();
    ?>
</head>

Loading specific font weights and a subset

The same example as above, but now with specific weights and a subset:

<head>
    ...
    <?php
    // Require class
    require_once("/path/to/GoogleFonts.class.php");
    // Load font
    $font = new GoogleFonts(
        array(
            "name"   => "Open Sans",
            "weight" => array(300, 400, "400italic"),
            "subset" => "latin"
        )
    );
    $font->load();
    ?>
</head>

Loading multiple fonts in one call

You can request multiple fonts in one call by wrapping all font arrays with another array:

<head>
    ...
    <?php
    // Require class
    require_once("/path/to/GoogleFonts.class.php");
    // Specify all fonts in an array
    // (stored in a variable for clarity)
    $multiple_fonts = array(
        array(
            "name"   => "Open Sans",
            "weight" => array(300, 400, "400italic"),
            "subset" => "latin"
        ),
        array(
            "name"   => "Roboto",
            "weight" => "400, 700"
        )
    );
    // Load font
    $font = new GoogleFonts($multiple_fonts);
    $font->load();
    ?>
</head>

Loading multiple fonts without subsets

When you request multiple fonts and no subset is specified for more than one font, those fonts will be loaded in a combined request:

<head>
    ...
    <?php
    // Require class
    require_once("/path/to/GoogleFonts.class.php");
    // Specify all fonts in an array
    // (stored in a variable for clarity)
    $multiple_fonts = array(
        array("name" => "Droid Sans"),
        array("name" => "Roboto Sans"),
        array("name" => "Open Sans", "subset" => "latin")
    );
    // Load font
    $font = new GoogleFonts($multiple_fonts);
    $font->load();
    /*
    *  Output:
    *  <link href='https://fonts.googleapis.com/css?family=Droid+Sans|Roboto+Sans' rel='stylesheet' />
    *  <link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin' rel='stylesheet' />
    */
    ?>
</head>

Legacy browser support

Google's shorthand notations for loading font files aren't supported in Internet Explorer versions 8 and below. This is easily fixed in a conditional comment, which can be added to the DOM by using the fallback() function:

<head>
    ...
    <?php
    // Require class
    require_once("/path/to/GoogleFonts.class.php");
    // Load font
    $font = new GoogleFonts(
        array(
            "name"   => "Open Sans",
            "weight" => array(300, 400, "400italic"),
            "subset" => "latin"
        )
    );
    $font->load();
    $font->fallback();
    /*
    *  Output:
    *  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic&subset=latin' rel='stylesheet' />
    *  <!--[if lte IE8]>
    *    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300&subset=latin' rel='stylesheet' />
    *    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin' rel='stylesheet' />
    *    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic&subset=latin' rel='stylesheet' />
    *  <![endif]-->
    */
    ?>
</head>

"Debugging"

If there is a scenario where you would like to check the HTML output that would be added to the DOM, you can! Just pass true as an argument in the load() and/or fallback() functions. The output will then be printed as a string.