skip to Main Content

I’ve a shopify css file with the following content:

@font-face{font-family:"Work Sans";font-weight:600;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n6.136d99375282ffb6ea8c3dc4a8fe189c7be691b2.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n6.399ae4c4dd52d38e3f3214ec0cc9c61a0a67ea08.woff?&hmac=xxxxxxxxxx") format("woff")}
@font-face{font-family:"Work Sans";font-weight:400;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n4.29e3afeb38a0ba35e784cf169a40e8beaf814daa.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n4.e7c533c4afbed28070f6ac45dbcfe6f37840c0a8.woff?&hmac=xxxxxxxxxx") format("woff")}
@font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")}
@font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")
}.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
....
....

I want to extract only @font-face styles from above string using PHP. The result should be like:

@font-face{font-family:"Work Sans";font-weight:600;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n6.136d99375282ffb6ea8c3dc4a8fe189c7be691b2.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n6.399ae4c4dd52d38e3f3214ec0cc9c61a0a67ea08.woff?&hmac=xxxxxxxxxx") format("woff")}
@font-face{font-family:"Work Sans";font-weight:400;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n4.29e3afeb38a0ba35e784cf169a40e8beaf814daa.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n4.e7c533c4afbed28070f6ac45dbcfe6f37840c0a8.woff?&hmac=xxxxxxxxxx") format("woff")}
@font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")}
@font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")
}

Can anyone help me to do this?
Thanks in advance.

2

Answers


  1. You need to use regular expressions for this. Code:

    <?php
    
    $str = '@font-face{font-family:"Work Sans";font-weight:600;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n6.136d99375282ffb6ea8c3dc4a8fe189c7be691b2.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n6.399ae4c4dd52d38e3f3214ec0cc9c61a0a67ea08.woff?&hmac=xxxxxxxxxx") format("woff")}
    @font-face{font-family:"Work Sans";font-weight:400;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n4.29e3afeb38a0ba35e784cf169a40e8beaf814daa.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n4.e7c533c4afbed28070f6ac45dbcfe6f37840c0a8.woff?&hmac=xxxxxxxxxx") format("woff")}
    @font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")}
    @font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")
    }.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
    ....
    ....';
    preg_match_all('/@font-face{[^}]*}/', $str, $matches);
    var_dump($matches[0]);
    

    And result will be:

    array (size=4)
      0 => string '@font-face{font-family:"Work Sans";font-weight:600;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n6.136d99375282ffb6ea8c3dc4a8fe189c7be691b2.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n6.399ae4c4dd52d38e3f3214ec0cc9c61a0a67ea08.woff?&hmac=xxxxxxxxxx") format("woff")}' (length=347)
      1 => string '@font-face{font-family:"Work Sans";font-weight:400;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n4.29e3afeb38a0ba35e784cf169a40e8beaf814daa.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n4.e7c533c4afbed28070f6ac45dbcfe6f37840c0a8.woff?&hmac=xxxxxxxxxx") format("woff")}' (length=347)
      2 => string '@font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")}' (length=347)
      3 => string '@font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")
    }' (length=348)
    
    Login or Signup to reply.
  2. Use this regular expression:

    /@font-face{.*}/sU
    

    which will match a string that starts with “@font-face{” and ends with “}” with any characters in between. The “s” flag will make the match accept line breaks for the placeholder “.”. The “U” flag will make the matching “Ungreedy”, searching for short matches rather than long matches.

    Usage in PHP:

    <?php
    
    $input = <<<EOT
    @font-face{font-family:"Work Sans";font-weight:600;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n6.136d99375282ffb6ea8c3dc4a8fe189c7be691b2.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n6.399ae4c4dd52d38e3f3214ec0cc9c61a0a67ea08.woff?&hmac=xxxxxxxxxx") format("woff")}
    @font-face{font-family:"Work Sans";font-weight:400;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n4.29e3afeb38a0ba35e784cf169a40e8beaf814daa.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n4.e7c533c4afbed28070f6ac45dbcfe6f37840c0a8.woff?&hmac=xxxxxxxxxx") format("woff")}
    @font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")}
    @font-face{font-family:"Work Sans";font-weight:700;font-style:normal;src:url("https://fonts.shopifycdn.com/work_sans/worksans_n7.35eac55373d3da50c529c81066eb2f2f0fbedb82.woff2?&hmac=xxxxxxxxxx") format("woff2"),url("https://fonts.shopifycdn.com/work_sans/worksans_n7.1b010d40a44f517d5363112c4aff386332758bc9.woff?&hmac=xxxxxxxxxx") format("woff")
    }.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
    EOT;
    
    $fonts = []; 
    
    preg_match_all("/@font-face{.*}/sU", $input, $fonts);
    
    foreach ($fonts[0] as $font)
    {
        echo ($font);
        echo ("n");
        echo ("n");
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search