Regular Expressions 101

Community Patterns

CSS font-face rules for embedded webfonts (base64-encoded woff/woff2)

0

Regular Expression
ECMAScript (JavaScript)

/
(?:^|)(?:(?<=(?:font-family[:] ?))['"](.+?)['"]|(?<=(?:font-weight[:])) ?(.+?)|(?<=(?:font-style[:])) ?(.+?)|(?<=src: ?url[(])(?:['"]?data:(.+?)[;,](base64)[,])(.+?)(?:['"]?[)])(?:[\n\s ]?format[(]['"](\S+)['"][)])?)(?:[;][\n])(?:|$)
/
mdg

Description

var FONTFACE_PATTERN = /(?:^|)(?:(?<=(?:font-family[:] ?))['"](.+?)['"]|(?<=(?:font-weight[:])) ?(.+?)|(?<=(?:font-style[:])) ?(.+?)|(?<=src: ?url[(])(?:['"]?data:(.+?)[;,](base64)[,])(.+?)(?:['"]?[)])(?:[\n\s ]?format[(]['"](\S+)['"][)])?)(?:[;][\n])(?:|$)/mdg

Rudimentary pattern for matching base64-embedded webfonts in CSS stylesheets, including:

  • font-family
  • font-style
  • font-weight

Also matches the various parts of the datauri sequence:

  • mime-type
  • charset
  • format(...)
  • and the base64 string itself

Includes the multi-line and global modifier flags to match multiple @font-face rules in a single document.


MIT © Nicholas Berlette

Submitted by Nicholas Berlette (@nberlette) - 2 years ago