Shopify Question posted in
The Shopify help center can be found here.

Return all matching css from string – Shopify

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.

Tags:

2

Answers


  1. 0

    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. 0

    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