CODEWITHSUNDEEP
phpregex
mhesabi
mhesabi

Reputation: 1140

Extract font-family and font-weight of @font-face from a CSS file

I have a function that loops through all CSS files in directory and looks for @font-face.
if any @font-face block found, I want to extract font-family and font-weight from it.
the code below is what I've done so far:

function get_local_fonts() {
    $output = array();
    $path_to_search = trailingslashit(get_template_directory());
    foreach(glob_recursive($path_to_search . '*.css') as $file) {
        $content = file_get_contents($file);
        preg_match('/(\@font-face)([^}]+)(\})/', $content, $matches, PREG_OFFSET_CAPTURE);

        if (!empty($matches)) {
            preg_match('/(font-family:)([^;]*)/', $matches[2][0], $font_family, PREG_OFFSET_CAPTURE);
            preg_match('/(font-weight:)([^;]*)/', $matches[2][0], $font_weight, PREG_OFFSET_CAPTURE);

            $output[] = array(
                'file_path' => $file,
                'font-family' => trim($font_family[2][0]),
                'font-weight' => array(trim($font_weight[2][0])),
            );
        }
    }

    return $output;
}


this preg_match('/(\@font-face)([^}]+)(\})/', $content, $matches, PREG_OFFSET_CAPTURE); returns every CSS file that includes @font-face { ... }


my function works well with CSS files that only have one match for @font-face but let say if there are 4 matches for @font-face in a single CSS file my function only adds one of them.
for example (css file content):

@font-face
{
    font-family: "din";
    src: url("din-webfont.eot");
    src: url("din-webfont.eot?#iefix") format("embedded-opentype"),  url("din-webfont.woff") format("woff"), url("din-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face
{
    font-family: "din";
    src: url("din_bold-webfont.eot");
    src: url("din_bold-webfont.eot?#iefix") format("embedded-opentype"), url("din_bold-webfont.woff") format("woff"), url("din_bold-webfont.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

I want to get output like this:

Array
(
    [0] => Array
        (
            [font-family] => 'din'
            [font-weight] => Array
                (
                    [0] => 'normal',
                    [1] => 'bold'
                )

        )
)

Note that there might be @font-face with same font-family but different font-weight.

for conclusion:
How can I loop through All CSS files that contains

@font-face { 
    font-family: something;
    font-weight: something;
}

and extract font-family and font-weight from them?

Upvotes: 3

Views: 2070

Answers (1)

zx81
zx81

Reputation: 41848

Use something like this:

$fontregex = '~@font-face[^}]*?font-family:\s*"([^"]+)"[^}]*?font-weight:\s*([^;]+);[^}]*?font-style:\s*([^;]+);~';
preg_match_all($fontregex, $mycss, $matches,PREG_SET_ORDER);
print_r($matches);

See the output at the bottom of the online php demo. You'll have to fan the the result of $matches into a final array in a way that suits you.

Currently, here is the structure:

Array
(
    [0] => Array
        (
            [0] => @font-face
{
    font-family: "din";
    src: url("din-webfont.eot");
    src: url("din-webfont.eot?#iefix") format("embedded-opentype"),  url("din-webfont.woff") format("woff"), url("din-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
            [1] => din
            [2] => normal
            [3] => normal
        )

    [1] => Array
        (
            [0] => @font-face
{
    font-family: "din";
    src: url("din_bold-webfont.eot");
    src: url("din_bold-webfont.eot?#iefix") format("embedded-opentype"), url("din_bold-webfont.woff") format("woff"), url("din_bold-webfont.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
            [1] => din
            [2] => bold
            [3] => normal
        )

)

Upvotes: 3

Related Questions