├── .gitignore ├── README.md ├── dist └── demo.html ├── docs ├── demo.html ├── faux-bold2.png ├── faux-italic.png └── normal.png ├── faux-pas.init.js ├── faux-pas.js ├── gulpfile.js ├── package.json └── test ├── fonts.css ├── fonts └── OpenSans │ ├── OpenSans-Bold.woff │ ├── OpenSans-BoldItalic.woff │ ├── OpenSans-Italic.woff │ └── OpenSans-Regular.woff └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | :warning: This project is archived and the repository is no longer maintained. 2 | 3 | # faux pas, a faux web font detector 4 | 5 | A script to highlight elements that are mismatched incorrectly to @font-face blocks, which may result in shoddy faux bold or faux italic rendering. Works standalone—no dependencies. 6 | 7 | Want this on the command line? Check out [`node-faux-pas`](https://github.com/filamentgroup/node-faux-pas). 8 | 9 | ## [Demo](https://filamentgroup.github.io/faux-pas/dist/demo.html) 10 | 11 | A more [comprehensive test page](https://filamentgroup.github.io/faux-pas/test/index.html) is also available. 12 | 13 | ## What is this? 14 | 15 | When you include a CSS `@font-face` block on your page, you specify a `font-family`, `font-weight`, and `font-style` inside that block. When you use a web font, you specify those same properties on elements on your page. While you need to match the value of `font-family` exactly to use the web font, `font-weight` and `font-style` do not require exact matching. This can lead to unexpected behavior as the browser uses what is available, even if it’s not a good match. 16 | 17 | Further, if your element wants a `font-weight` less than or equal to `500` but your `@font-face` block has only variants of your typeface that are bold, the browser will attempt to synthesize a bold web font for you. This synthesized rendering is often sub-par. The same synthesis happens when you want italic, but no italic web font is available. This behavior could be controlled with the [`font-synthesis`](http://stateofwebtype.com/#font-synthesis) property if browsers supported it. 18 | 19 | `faux-pas` helps you by logging and reporting these mismatches and faux renderings so that you can fix the offending code. 20 | 21 | ### Standard rendering of Open Sans 22 | 23 | ![Standard Open Sans](/docs/normal.png) 24 | 25 | ### Faux Bold Open Sans 26 | 27 | ![Faux Bold Open Sans](/docs/faux-bold2.png) 28 | 29 | ### Faux Italic Open Sans 30 | 31 | ![Faux Italic Open Sans](/docs/faux-italic.png) 32 | 33 | ## Installation 34 | 35 | Available on npm as `fg-faux-pas`: 36 | 37 | ``` 38 | npm install --save-dev fg-faux-pas 39 | ``` 40 | 41 | ## Usage 42 | 43 | * Bookmarklet: Get the bookmarklet at the [demo page](https://filamentgroup.github.io/faux-pas/dist/demo.html). Drag it to your bookmarklets and use where needed. By default it highlights elements on your page but check the console for more output. 44 | * Recommended: Include in your pattern library build. Include both `faux-pas.js` and `faux-pas.init.js` (tip: use your own init file to change configuration options). 45 | * Also on the command line: [`node-faux-pas`](https://github.com/filamentgroup/node-faux-pas) 46 | 47 | ## Options 48 | 49 | * `console: true`: uses `console` to output full logging information (warnings for mismatched elements and errors for faux rendering). 50 | * `highlights: true`: adds a specific style to mismatched/faux elements on the page for visual inspection. 51 | * `mismatches: true`: a mismatch may not be a faux rendering even though it’s a misconfiguration—this option allows you to disable these warnings. 52 | 53 | ## Browser Support 54 | 55 | Anything that supports the [CSS Font Loading API](http://caniuse.com/#feat=font-loading): 56 | 57 | * Google Chrome 35+ 58 | * Opera 22+ 59 | * Firefox 41+ 60 | * Safari 10+ 61 | * Mobile Safari 10+ 62 | * Android Chromium WebView 63 | * Chrome for Android 64 | * _and others_ 65 | 66 | ## Build 67 | 68 | Use `gulp` to generate a new docs HTML file (automatically updates the bookmarklet with the latest code). 69 | -------------------------------------------------------------------------------- /dist/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | faux-pas 7 | 8 | 21 | 22 | 23 |

faux-pas 1.0.6

24 | 25 | 30 | 31 |

32 | 33 |

faux-pas does not run automatically here. You must use the bookmarklet above. Click the bookmarklet link or Drag the link to your bookmarks to try it out. Check your console!

34 | 35 |
36 | 37 |

sans-serif (no web fonts)

38 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

39 | 40 |

Open Sans: Faux Everything

41 | 47 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

48 |
49 | 50 |

Open Sans: Faux Bold, Bold Italic

51 | 57 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

58 | 59 |

Open Sans: Faux Italic, Bold Italic

60 | 66 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

67 | 68 |

Open Sans: No Faux

69 | 75 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

76 | 77 |

Open Sans: Perfect Match

78 | 84 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

85 | 86 |

Open Sans: Mismatched Request, No Faux

87 | 90 | 96 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

97 |
98 | 99 | -------------------------------------------------------------------------------- /docs/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | faux-pas 7 | 8 | 21 | 22 | 23 |

faux-pas <%= version %>

24 | 25 | 30 | 31 |

32 | 33 |

faux-pas does not run automatically here. You must use the bookmarklet above. Click the bookmarklet link or Drag the link to your bookmarks to try it out. Check your console!

34 | 35 |
36 | 37 |

sans-serif (no web fonts)

38 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

39 | 40 |

Open Sans: Faux Everything

41 | 47 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

48 |
49 | 50 |

Open Sans: Faux Bold, Bold Italic

51 |
    52 |
  • Roman
    • 53 |
  • Bold (700)
    • 54 |
  • Italic
    • 55 |
  • Bold (700) & Italic
    • 56 |
57 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

58 | 59 |

Open Sans: Faux Italic, Bold Italic

60 |
    61 |
  • Roman
    • 62 |
  • Bold (700)
    • 63 |
  • Italic
    • 64 |
  • Bold (700) & Italic
    • 65 |
66 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

67 | 68 |

Open Sans: No Faux

69 |
    70 |
  • Roman
    • 71 |
  • Bold (700)
    • 72 |
  • Italic
    • 73 |
  • Bold (700) & Italic
    • 74 |
75 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

76 | 77 |

Open Sans: Perfect Match

78 |
    79 |
  • Roman
    • 80 |
  • Bold (700)
    • 81 |
  • Italic
    • 82 |
  • Bold (700) & Italic
    • 83 |
84 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

85 | 86 |

Open Sans: Mismatched Request, No Faux

87 |
    88 |
  • font-weight: 300, default is 400
    • 89 |
90 |
    91 |
  • Roman
    • 92 |
  • Bold (700)
    • 93 |
  • Italic
    • 94 |
  • Bold (700) & Italic
    • 95 |
96 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

97 |
98 | 99 | -------------------------------------------------------------------------------- /docs/faux-bold2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/faux-pas/f942f84f9983c946c4e6c4f2f379ccbba3c21441/docs/faux-bold2.png -------------------------------------------------------------------------------- /docs/faux-italic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/faux-pas/f942f84f9983c946c4e6c4f2f379ccbba3c21441/docs/faux-italic.png -------------------------------------------------------------------------------- /docs/normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/faux-pas/f942f84f9983c946c4e6c4f2f379ccbba3c21441/docs/normal.png -------------------------------------------------------------------------------- /faux-pas.init.js: -------------------------------------------------------------------------------- 1 | // Initialization 2 | (function() { 3 | // first argument is a window or an HTMLElement node 4 | var FP = new FauxPas( window, { 5 | console: true, 6 | highlights: true, 7 | mismatches: true 8 | }); 9 | 10 | FP.compare(); 11 | })(); -------------------------------------------------------------------------------- /faux-pas.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof exports === "object" && typeof exports.nodeName !== "string") { 3 | // CommonJS 4 | module.exports = factory(); 5 | } else { 6 | // Browser 7 | root.FauxPas = factory(); 8 | } 9 | })(this, function() { 10 | // https://www.w3.org/TR/css-fonts-3/#font-matching-algorithm 11 | // TODO font-stretch 12 | // TODO font-style: oblique 13 | var projectName = "faux-pas"; 14 | 15 | var ReportLine = function(level, message, element) { 16 | this.level = level; 17 | this.message = message; 18 | this.element = element; 19 | this.output = this.toString(); 20 | }; 21 | 22 | ReportLine.prototype.isError = function() { 23 | return this.level === "error"; 24 | }; 25 | 26 | ReportLine.prototype.isWarning = function() { 27 | return this.level === "warn"; 28 | }; 29 | 30 | ReportLine.prototype.printElement = function() { 31 | if( !this.element ) { 32 | return ""; 33 | } 34 | 35 | // get only HTML for parent element, not children 36 | var node = this.element.cloneNode(true); 37 | var children = node.childNodes; 38 | // remove backwards, keep in mind that the length changes when you remove a node 39 | for( var j = children.length - 1; j >= 0; j-- ) { 40 | node.removeChild( children[ j ] ); 41 | } 42 | 43 | return node.outerHTML.replace(/ style\=\"[^\"]*\"/, ""); 44 | }; 45 | 46 | ReportLine.prototype.toString = function() { 47 | var el = this.printElement(); 48 | return projectName + " " + this.level + ": " + this.message + (el ? " " + el : ""); 49 | }; 50 | ReportLine.prototype.console = function() { 51 | if (this.element) { 52 | console[this.level](this.message, this.element); 53 | } else { 54 | console[this.level](this.message); 55 | } 56 | }; 57 | 58 | var Report = function() { 59 | this.title = projectName + " Results"; 60 | this.lines = []; 61 | this.errorCount = 0; 62 | this.warningCount = 0; 63 | this.declaredCount = 0; 64 | this.usedCount = 0; 65 | }; 66 | 67 | Report.prototype.log = function(message, element) { 68 | this.lines.push(new ReportLine("log", message, element)); 69 | }; 70 | 71 | Report.prototype.warn = function(message, element) { 72 | this.lines.push(new ReportLine("warn", message, element)); 73 | this.warningCount++; 74 | }; 75 | 76 | // Add a warning but don’t increment the mismatch count 77 | Report.prototype.silentWarn = function(message, element) { 78 | this.lines.push(new ReportLine("warn", message, element)); 79 | }; 80 | 81 | Report.prototype.error = function(message, element) { 82 | this.lines.push(new ReportLine("error", message, element)); 83 | this.errorCount++; 84 | }; 85 | 86 | Report.prototype.getLines = function() { 87 | return this.lines; 88 | }; 89 | 90 | Report.prototype.printConsole = function() { 91 | console.group(this.title); 92 | 93 | this.getLines().forEach(function(line) { 94 | line.console(); 95 | }); 96 | 97 | console.groupEnd(); 98 | }; 99 | 100 | Report.prototype.print = function() { 101 | return this.lines.map(function(line) { 102 | return line.toString(); 103 | }); 104 | }; 105 | 106 | Report.prototype.getErrorCount = function() { 107 | return this.errorCount; 108 | }; 109 | 110 | Report.prototype.getWarningCount = function() { 111 | return this.warningCount; 112 | }; 113 | 114 | Report.prototype.getPluralLabel = function(count, singularLabel, pluralLabel) { 115 | return count !== 1 ? (pluralLabel ? pluralLabel : singularLabel + "s") : singularLabel; 116 | }; 117 | 118 | // used for testing 119 | Report.prototype.setDeclaredCount = function(declaredCount) { 120 | this.declaredCount = declaredCount; 121 | }; 122 | 123 | Report.prototype.setUsedCount = function(usedCount) { 124 | this.usedCount = usedCount; 125 | }; 126 | 127 | /* 128 | * Font 129 | */ 130 | var Font = function(family, weight, style, report) { 131 | this.family = Font.normalizeFamily(family); 132 | this.weight = this.normalizeWeight(weight) || "400"; 133 | this.style = style || "normal"; 134 | this.report = report; 135 | }; 136 | 137 | Font.normalizeFamily = function(family) { 138 | return family.replace(/[\'\"]/g, "").toLowerCase(); 139 | }; 140 | 141 | Font.prototype.normalizeWeight = function(weight) { 142 | var weightLookup = { 143 | normal: "400", 144 | bold: "700" 145 | }; 146 | 147 | // lighter and bolder not supported 148 | if (weight === "lighter" || weight === "bolder") { 149 | this.report.silentWarn("lighter and bolder weights are not supported."); 150 | } 151 | 152 | return "" + (weightLookup[weight] || weight); 153 | }; 154 | 155 | Font.prototype.toString = function() { 156 | return this.family + "||" + this.weight + "||" + this.style; 157 | }; 158 | 159 | /* 160 | * FontSet, a set of fonts 161 | */ 162 | var FontSet = function() { 163 | this.allowDuplicates = false; 164 | this.familyDuplicatesHash = {}; 165 | this.duplicatesHash = {}; 166 | this.fonts = []; 167 | }; 168 | 169 | FontSet.prototype.length = function() { 170 | return this.fonts.length; 171 | }; 172 | 173 | FontSet.prototype.add = function(font) { 174 | if (!this.allowDuplicates && this.has(font)) { 175 | return; 176 | } 177 | 178 | this.familyDuplicatesHash[font.family] = true; 179 | this.duplicatesHash[font] = true; 180 | this.fonts.push(font); 181 | }; 182 | 183 | FontSet.prototype.has = function(font) { 184 | return font in this.duplicatesHash; 185 | }; 186 | 187 | FontSet.prototype.hasFamily = function(family) { 188 | family = Font.normalizeFamily(family); 189 | return family in this.familyDuplicatesHash; 190 | }; 191 | 192 | FontSet.prototype.get = function(family) { 193 | if (!family) { 194 | return this.fonts; 195 | } 196 | 197 | var fonts = []; 198 | this.fonts.forEach(function(font) { 199 | if (font.family === family) { 200 | fonts.push(font); 201 | } 202 | }); 203 | 204 | return fonts; 205 | }; 206 | 207 | FontSet.prototype.getStats = function(family) { 208 | var stats = []; 209 | this.get(family).forEach(function(font) { 210 | var stat = {}; 211 | var weightNum = parseInt(font.weight, 10); 212 | var isLighter = weightNum <= 500; 213 | var isBolder = weightNum >= 600; 214 | 215 | stat.style = font.style; 216 | stat.weight = weightNum; 217 | stat.bolder = isBolder; 218 | 219 | stats.push(stat); 220 | }); 221 | 222 | return stats; 223 | }; 224 | 225 | FontSet.prototype._hasStat = function(stats, callback) { 226 | var hasIt = false; 227 | stats.forEach(function(stat) { 228 | if (callback(stat)) { 229 | hasIt = true; 230 | } 231 | }); 232 | return hasIt; 233 | }; 234 | 235 | FontSet.prototype.statsHasRegular = function(stats) { 236 | return this._hasStat(stats, function(stat) { 237 | return !stat.bolder && stat.style === "normal"; 238 | }); 239 | }; 240 | FontSet.prototype.statsHasItalic = function(stats) { 241 | return this._hasStat(stats, function(stat) { 242 | return !stat.bolder && stat.style === "italic"; 243 | }); 244 | }; 245 | FontSet.prototype.statsHasBold = function(stats) { 246 | return this._hasStat(stats, function(stat) { 247 | return stat.bolder && stat.style === "normal"; 248 | }); 249 | }; 250 | FontSet.prototype.statsHasBoldItalic = function(stats) { 251 | return this._hasStat(stats, function(stat) { 252 | return stat.bolder && stat.style === "italic"; 253 | }); 254 | }; 255 | 256 | /* 257 | * FauxPas, highlights elements that are font-synthesized 258 | */ 259 | 260 | var FauxPas = function(root, options) { 261 | this.win = this.getWindowObject( root ); 262 | this.doc = this.win.document; 263 | 264 | if (!("fonts" in this.win.document)) { 265 | throw Error( 266 | projectName + " requires the CSS Font Loading API, which your browser does not support." 267 | ); 268 | } 269 | 270 | options = options || {}; 271 | 272 | this.showMismatches = options.mismatches !== undefined ? options.mismatches : true; 273 | this.highlightElements = options.highlights !== undefined ? options.highlights : true; 274 | this.consoleOutput = options.console !== undefined ? options.console : true; 275 | 276 | this.report = new Report(); 277 | 278 | this.usedFontsElements = {}; 279 | this.usedFontSet = new FontSet(); 280 | this.declaredFontSet = new FontSet(); 281 | }; 282 | 283 | FauxPas.prototype.getWindowObject = function(root) { 284 | if( "defaultView" in root ) { 285 | return root.defaultView; 286 | } else if( "ownerDocument" in root && root.ownerDocument ) { 287 | return root.ownerDocument.defaultView; 288 | } else if( root instanceof Window ) { 289 | return root; 290 | } 291 | }; 292 | 293 | FauxPas.prototype.addUsedFontElement = function(font, element) { 294 | var hasTextChildren = false; 295 | Array.prototype.slice.call(element.childNodes).forEach(function(el) { 296 | if (el.nodeType === 3) { 297 | hasTextChildren = true; 298 | } 299 | }); 300 | 301 | if (!(font in this.usedFontsElements)) { 302 | this.usedFontsElements[font] = []; 303 | } 304 | 305 | if (hasTextChildren) { 306 | this.usedFontsElements[font].push(element); 307 | } 308 | }; 309 | 310 | FauxPas.prototype._getStyle = function(element, property) { 311 | var css = this.win.getComputedStyle(element, null); 312 | return css.getPropertyValue(property); 313 | }; 314 | 315 | FauxPas.prototype._getStyles = function(element, properties) { 316 | var css = this.win.getComputedStyle(element, null); 317 | var styles = {}; 318 | properties.forEach(function(property) { 319 | styles[property] = css.getPropertyValue(property); 320 | }); 321 | return styles; 322 | }; 323 | 324 | FauxPas.prototype.generate = function() { 325 | this.generateDeclaredList(); 326 | this.generateUsedList(); 327 | 328 | var declaredCount = this.declaredFontSet.length(); 329 | var usedCount = this.usedFontSet.length(); 330 | this.report.log( 331 | declaredCount + " " + 332 | this.report.getPluralLabel(declaredCount, "web font") + " declared and " + 333 | usedCount + " " + 334 | this.report.getPluralLabel(usedCount, "web font") + " used." 335 | ); 336 | this.report.setDeclaredCount(declaredCount); 337 | this.report.setUsedCount(usedCount); 338 | 339 | // Warnings 340 | if (!declaredCount) { 341 | this.report.silentWarn("No web fonts were found!"); 342 | } else if (!usedCount) { 343 | this.report.silentWarn("You didn’t actually use any web fonts here!"); 344 | } else if (declaredCount !== usedCount) { 345 | // TODO report which web fonts are unused. 346 | this.report.silentWarn( 347 | "There are unused @font-face blocks here, are you sure you need them all?" 348 | ); 349 | } 350 | }; 351 | 352 | FauxPas.prototype.generateUsedList = function() { 353 | Array.prototype.slice.call(this.doc.getElementsByTagName("*")).forEach( 354 | function(el) { 355 | var styles = this._getStyles(el, ["font-family", "font-weight", "font-style"]); 356 | var families = styles["font-family"].split(","); 357 | 358 | families.forEach( 359 | function(family) { 360 | family = family.trim(); 361 | 362 | var font = new Font(family, styles["font-weight"], styles["font-style"], this.report); 363 | 364 | // Leaky assumption, we use all webfonts declared in the stack 365 | // (see generatedDeclaredList note about error status) 366 | // Especially when some type foundaries use two separate web fonts as “DRM” 367 | // TODO Reality: only web fonts with valid unicodes in the content will be used. 368 | if (!this.isWebFont(font)) { 369 | // Only web fonts will faux. 370 | return; 371 | } 372 | 373 | this.usedFontSet.add(font); 374 | this.addUsedFontElement(font, el); 375 | }.bind(this) 376 | ); 377 | }.bind(this) 378 | ); 379 | }; 380 | 381 | FauxPas.prototype.generateDeclaredList = function() { 382 | this.doc.fonts.forEach( 383 | function(font) { 384 | // We want to ignore errored font-face blocks, especially if multiple web fonts are listed in the same used font-family stack on an element. 385 | if (font.status === "error") { 386 | this.report.error("One of your web fonts didn’t load due to an error: " + font.family); 387 | } else { 388 | this.declaredFontSet.add(new Font(font.family, font.weight, font.style)); 389 | } 390 | }.bind(this) 391 | ); 392 | }; 393 | 394 | FauxPas.prototype.isWebFont = function(font) { 395 | return this.declaredFontSet.hasFamily(font.family); 396 | }; 397 | 398 | FauxPas.prototype.isWebFontMismatch = function(font) { 399 | return !this.declaredFontSet.has(font); 400 | }; 401 | 402 | FauxPas.prototype.isFauxWebFont = function(font) { 403 | // exact match 404 | if (this.declaredFontSet.has(font)) { 405 | return false; 406 | } 407 | 408 | var isFaux = false; 409 | var stats = this.declaredFontSet.getStats(font.family); 410 | var wantsItalic = font.style === "italic"; 411 | var wantsBold = parseInt(font.weight, 10) >= 600; 412 | 413 | var hasRegular = this.declaredFontSet.statsHasRegular(stats); 414 | var hasBold = this.declaredFontSet.statsHasBold(stats); 415 | var hasItalic = this.declaredFontSet.statsHasItalic(stats); 416 | var hasBoldItalic = this.declaredFontSet.statsHasBoldItalic(stats); 417 | 418 | // console.log( font.family, wantsBold, wantsItalic, 'has: ', hasRegular, hasBold, hasItalic, hasBoldItalic ); 419 | if (wantsBold && wantsItalic) { 420 | return !hasBoldItalic; 421 | } else if (wantsBold && hasBoldItalic && !hasBold) { 422 | return hasRegular; 423 | } else if (wantsItalic && hasBoldItalic) { 424 | return false; 425 | } else if (wantsItalic && !hasItalic) { 426 | return true; 427 | } else if (wantsBold && !hasBold) { 428 | return true; 429 | } 430 | 431 | return false; 432 | }; 433 | 434 | FauxPas.prototype._addHighlights = function(elements, bgColor) { 435 | elements.forEach(function(element) { 436 | element.style["background-color"] = bgColor; 437 | }); 438 | }; 439 | 440 | FauxPas.prototype._log = function(elements, str, method) { 441 | elements.forEach( 442 | function(element) { 443 | this.report[method](str + " (" + this._getStyle(element, "font-family") + ")", element); 444 | }.bind(this) 445 | ); 446 | }; 447 | 448 | FauxPas.prototype.logFaux = function(elements) { 449 | if (this.highlightElements) { 450 | this._addHighlights(elements, "#eb160e"); 451 | } 452 | 453 | this._log(elements, "Faux font detected", "error"); 454 | }; 455 | 456 | FauxPas.prototype.logMismatch = function(elements) { 457 | if (this.highlightElements) { 458 | this._addHighlights(elements, "#fcc"); 459 | } 460 | 461 | this._log(elements, "Mismatched font detected", "warn"); 462 | }; 463 | 464 | FauxPas.prototype.findAllFauxWebFonts = function() { 465 | this.generate(); 466 | 467 | this.usedFontSet.get().forEach( 468 | function(font) { 469 | if (this.isWebFont(font)) { 470 | if (this.isFauxWebFont(font)) { 471 | this.logFaux(this.usedFontsElements[font]); 472 | } else if (this.showMismatches && this.isWebFontMismatch(font)) { 473 | this.logMismatch(this.usedFontsElements[font]); 474 | } 475 | } 476 | }.bind(this) 477 | ); 478 | }; 479 | 480 | FauxPas.prototype.compare = function() { 481 | this.findAllFauxWebFonts(); 482 | 483 | if (this.consoleOutput) { 484 | this.report.printConsole(); 485 | } 486 | }; 487 | 488 | FauxPas.prototype.getReport = function() { 489 | return this.report; 490 | }; 491 | 492 | return FauxPas; 493 | }); 494 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var fs = require( "fs" ); 2 | var gulp = require( "gulp" ); 3 | var template = require( "gulp-template" ); 4 | var bookmarkletify = require( "bookmarkletify" ); 5 | 6 | // Insert new bookmarklet into docs file 7 | gulp.task( "default", function() { 8 | var fauxpas = fs.readFileSync( "faux-pas.js", "utf-8" ); 9 | var fauxpasinit = fs.readFileSync( "faux-pas.init.js", "utf-8" ); 10 | var pkg = JSON.parse( fs.readFileSync( "package.json" ), "utf-8" ); 11 | 12 | gulp.src( "./docs/demo.html" ) 13 | .pipe( template({ 14 | version: pkg.version, 15 | bookmarklet: bookmarkletify( fauxpas + fauxpasinit ) 16 | }) ) 17 | .pipe( gulp.dest( "./dist/" ) ); 18 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fg-faux-pas", 3 | "version": "1.0.6", 4 | "description": "A script to highlight elements that are mismatched to @font-face blocks which may result in shoddy faux bold or faux italic rendering.", 5 | "main": "faux-pas.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: test through the node-faux-pas project.\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/filamentgroup/faux-pas.git" 15 | }, 16 | "author": "zachleat (http://zachleat.com/)", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/filamentgroup/faux-pas/issues" 20 | }, 21 | "homepage": "https://github.com/filamentgroup/faux-pas#readme", 22 | "devDependencies": { 23 | "bookmarkletify": "^1.0.0", 24 | "gulp": "^3.9.1", 25 | "gulp-template": "^4.0.0" 26 | }, 27 | "dependencies": {} 28 | } 29 | -------------------------------------------------------------------------------- /test/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: OpenSansRegular-Italic-Bold-BoldItalic; 3 | src: url('fonts/OpenSans/OpenSans-Regular.woff') format('woff'); 4 | font-weight: 400; 5 | font-style: normal; 6 | } 7 | @font-face { 8 | font-family: OpenSansRegular-Italic-Bold-BoldItalic; 9 | src: url('fonts/OpenSans/OpenSans-Italic.woff') format('woff'); 10 | font-weight: 400; 11 | font-style: italic; 12 | } 13 | @font-face { 14 | font-family: OpenSansRegular-Italic-Bold-BoldItalic; 15 | src: url('fonts/OpenSans/OpenSans-Bold.woff') format('woff'); 16 | font-weight: 700; 17 | font-style: normal; 18 | } 19 | @font-face { 20 | font-family: OpenSansRegular-Italic-Bold-BoldItalic; 21 | src: url('fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'); 22 | font-weight: 700; 23 | font-style: italic; 24 | } 25 | @font-face { 26 | font-family: OpenSansRegular; 27 | src: url('fonts/OpenSans/OpenSans-Regular.woff') format('woff'); 28 | font-weight: 400; 29 | font-style: normal; 30 | } 31 | @font-face { 32 | font-family: OpenSansBold; 33 | src: url('fonts/OpenSans/OpenSans-Bold.woff') format('woff'); 34 | font-weight: 700; 35 | font-style: normal; 36 | } 37 | @font-face { 38 | font-family: OpenSansItalic; 39 | src: url('fonts/OpenSans/OpenSans-Italic.woff') format('woff'); 40 | font-weight: 400; 41 | font-style: italic; 42 | } 43 | @font-face { 44 | font-family: OpenSansBoldItalic; 45 | src: url('fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'); 46 | font-weight: 700; 47 | font-style: italic; 48 | } 49 | @font-face { 50 | font-family: OpenSansRegular-Bold; 51 | src: url('fonts/OpenSans/OpenSans-Regular.woff') format('woff'); 52 | font-weight: 400; 53 | font-style: normal; 54 | } 55 | @font-face { 56 | font-family: OpenSansRegular-Bold; 57 | src: url('fonts/OpenSans/OpenSans-Bold.woff') format('woff'); 58 | font-weight: 700; 59 | font-style: normal; 60 | } 61 | @font-face { 62 | font-family: OpenSansRegular-Italic-Bold; 63 | src: url('fonts/OpenSans/OpenSans-Regular.woff') format('woff'); 64 | font-weight: 400; 65 | font-style: normal; 66 | } 67 | @font-face { 68 | font-family: OpenSansRegular-Italic-Bold; 69 | src: url('fonts/OpenSans/OpenSans-Italic.woff') format('woff'); 70 | font-weight: 400; 71 | font-style: italic; 72 | } 73 | @font-face { 74 | font-family: OpenSansRegular-Italic-Bold; 75 | src: url('fonts/OpenSans/OpenSans-Bold.woff') format('woff'); 76 | font-weight: 700; 77 | font-style: normal; 78 | } 79 | 80 | @font-face { 81 | font-family: OpenSansRegular-Italic-BoldItalic; 82 | src: url('fonts/OpenSans/OpenSans-Regular.woff') format('woff'); 83 | font-weight: 400; 84 | font-style: normal; 85 | } 86 | @font-face { 87 | font-family: OpenSansRegular-Italic-BoldItalic; 88 | src: url('fonts/OpenSans/OpenSans-Italic.woff') format('woff'); 89 | font-weight: 400; 90 | font-style: italic; 91 | } 92 | @font-face { 93 | font-family: OpenSansRegular-Italic-BoldItalic; 94 | src: url('fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'); 95 | font-weight: 700; 96 | font-style: italic; 97 | } 98 | @font-face { 99 | font-family: OpenSansRegular-BoldItalic; 100 | src: url('fonts/OpenSans/OpenSans-Regular.woff') format('woff'); 101 | font-weight: 400; 102 | font-style: normal; 103 | } 104 | @font-face { 105 | font-family: OpenSansRegular-BoldItalic; 106 | src: url('fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'); 107 | font-weight: 700; 108 | font-style: italic; 109 | } 110 | @font-face { 111 | font-family: OpenSansRegular-Italic; 112 | src: url('fonts/OpenSans/OpenSans-Regular.woff') format('woff'); 113 | font-weight: 400; 114 | font-style: normal; 115 | } 116 | @font-face { 117 | font-family: OpenSansRegular-Italic; 118 | src: url('fonts/OpenSans/OpenSans-Italic.woff') format('woff'); 119 | font-weight: 400; 120 | font-style: italic; 121 | } 122 | @font-face { 123 | font-family: OpenSansItalic-BoldItalic; 124 | src: url('fonts/OpenSans/OpenSans-Italic.woff') format('woff'); 125 | font-weight: 400; 126 | font-style: italic; 127 | } 128 | @font-face { 129 | font-family: OpenSansItalic-BoldItalic; 130 | src: url('fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'); 131 | font-weight: 700; 132 | font-style: italic; 133 | } 134 | @font-face { 135 | font-family: OpenSansBold-BoldItalic; 136 | src: url('fonts/OpenSans/OpenSans-Bold.woff') format('woff'); 137 | font-weight: 700; 138 | font-style: normal; 139 | } 140 | @font-face { 141 | font-family: OpenSansBold-BoldItalic; 142 | src: url('fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'); 143 | font-weight: 700; 144 | font-style: italic; 145 | } 146 | @font-face { 147 | font-family: OpenSansBold-Italic; 148 | src: url('fonts/OpenSans/OpenSans-Bold.woff') format('woff'); 149 | font-weight: 700; 150 | font-style: normal; 151 | } 152 | @font-face { 153 | font-family: OpenSansBold-Italic; 154 | src: url('fonts/OpenSans/OpenSans-Italic.woff') format('woff'); 155 | font-weight: 400; 156 | font-style: italic; 157 | } 158 | @font-face { 159 | font-family: OpenSansBold-Italic-BoldItalic; 160 | src: url('fonts/OpenSans/OpenSans-Bold.woff') format('woff'); 161 | font-weight: 700; 162 | font-style: normal; 163 | } 164 | @font-face { 165 | font-family: OpenSansBold-Italic-BoldItalic; 166 | src: url('fonts/OpenSans/OpenSans-Italic.woff') format('woff'); 167 | font-weight: 400; 168 | font-style: italic; 169 | } 170 | @font-face { 171 | font-family: OpenSansBold-Italic-BoldItalic; 172 | src: url('fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'); 173 | font-weight: 700; 174 | font-style: italic; 175 | } 176 | 177 | @font-face { 178 | font-family: OpenSansRegular-Bold-BoldItalic; 179 | src: url('fonts/OpenSans/OpenSans-Regular.woff') format('woff'); 180 | font-weight: 400; 181 | font-style: normal; 182 | } 183 | @font-face { 184 | font-family: OpenSansRegular-Bold-BoldItalic; 185 | src: url('fonts/OpenSans/OpenSans-Bold.woff') format('woff'); 186 | font-weight: 700; 187 | font-style: normal; 188 | } 189 | @font-face { 190 | font-family: OpenSansRegular-Bold-BoldItalic; 191 | src: url('fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'); 192 | font-weight: 700; 193 | font-style: italic; 194 | } 195 | 196 | .opensans-0001 { 197 | font-family: OpenSansBoldItalic, sans-serif; 198 | } 199 | .opensans-0010 { 200 | font-family: OpenSansItalic, sans-serif; 201 | } 202 | .opensans-0011 { 203 | font-family: OpenSansItalic-BoldItalic, sans-serif; 204 | } 205 | .opensans-0100 { 206 | font-family: OpenSansBold, sans-serif; 207 | } 208 | .opensans-0101 { 209 | font-family: OpenSansBold-BoldItalic, sans-serif; 210 | } 211 | .opensans-0110 { 212 | font-family: OpenSansBold-Italic, sans-serif; 213 | } 214 | .opensans-0111 { 215 | font-family: OpenSansBold-Italic-BoldItalic, sans-serif; 216 | } 217 | .opensans-1000 { 218 | font-family: OpenSansRegular, sans-serif; 219 | } 220 | .opensans-1001 { 221 | font-family: OpenSansRegular-BoldItalic, sans-serif; 222 | } 223 | .opensans-1010 { 224 | font-family: OpenSansRegular-Italic, sans-serif; 225 | } 226 | .opensans-1011 { 227 | font-family: OpenSansRegular-Italic-BoldItalic, sans-serif; 228 | } 229 | .opensans-1100 { 230 | font-family: OpenSansRegular-Bold, sans-serif; 231 | } 232 | .opensans-1101 { 233 | font-family: OpenSansRegular-Bold-BoldItalic, sans-serif; 234 | } 235 | .opensans-1110 { 236 | font-family: OpenSansRegular-Italic-Bold, sans-serif; 237 | } 238 | .opensans-1111 { 239 | font-family: OpenSansRegular-Italic-Bold-BoldItalic, sans-serif; 240 | } -------------------------------------------------------------------------------- /test/fonts/OpenSans/OpenSans-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/faux-pas/f942f84f9983c946c4e6c4f2f379ccbba3c21441/test/fonts/OpenSans/OpenSans-Bold.woff -------------------------------------------------------------------------------- /test/fonts/OpenSans/OpenSans-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/faux-pas/f942f84f9983c946c4e6c4f2f379ccbba3c21441/test/fonts/OpenSans/OpenSans-BoldItalic.woff -------------------------------------------------------------------------------- /test/fonts/OpenSans/OpenSans-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/faux-pas/f942f84f9983c946c4e6c4f2f379ccbba3c21441/test/fonts/OpenSans/OpenSans-Italic.woff -------------------------------------------------------------------------------- /test/fonts/OpenSans/OpenSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/filamentgroup/faux-pas/f942f84f9983c946c4e6c4f2f379ccbba3c21441/test/fonts/OpenSans/OpenSans-Regular.woff -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | faux-pas Test Page 7 | 8 | 49 | 50 | 51 |

faux-pas Test Page

52 | 53 |

Faux bold and faux italic expected behavior has a green outline demo-only style. If you see a green outline without a red background color, this is an error! If an element has picked a matching @font-face block, but the match isn’t exact (wanted Italic, but only Bold Italic was available—not technically font synthesis/faux), this will show a pink background color. If you see a blue outline without a pink background color, this is an error!

54 | 55 |

0000 sans-serif (no web fonts)

56 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

57 | 58 |

0001 Open Sans: No Faux

59 |
    60 |
  • Roman
    • 61 |
  • Bold (700)
    • 62 |
  • Italic
    • 63 |
  • Bold (700) & Italic
    • 64 |
65 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

66 |
67 |

This is roman text.

68 |

This is roman text (control).

69 |
70 |
71 |

This is bold text.

72 |

This is bold text (control).

73 |
74 |
75 |

This is italic text.

76 |

This is italic text (control).

77 |
78 |
79 |

This is bold and italic text.

80 |

This is bold and italic text (control).

81 |
82 | 83 |

0010 Open Sans: Faux Bold, Bold Italic

84 |
    85 |
  • Roman
    • 86 |
  • Bold (700)
    • 87 |
  • Italic
    • 88 |
  • Bold (700) & Italic
    • 89 |
90 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

91 |
92 |

This is roman text.

93 |

This is roman text (control).

94 |
95 |
96 |

This is bold text.

97 |

This is bold text (control).

98 |
99 |
100 |

This is italic text.

101 |

This is italic text (control).

102 |
103 |
104 |

This is bold and italic text.

105 |

This is bold and italic text (control).

106 |
107 | 108 |

0011 Open Sans: No Faux

109 |
    110 |
  • Roman
    • 111 |
  • Bold (700)
    • 112 |
  • Italic
    • 113 |
  • Bold (700) & Italic
    • 114 |
115 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

116 |
117 |

This is roman text.

118 |

This is roman text (control).

119 |
120 |
121 |

This is bold text.

122 |

This is bold text (control).

123 |
124 |
125 |

This is italic text.

126 |

This is italic text (control).

127 |
128 |
129 |

This is bold and italic text.

130 |

This is bold and italic text (control).

131 |
132 | 133 |

0110 Open Sans, Faux Bold Italic

134 |
    135 |
  • Roman
    • 136 |
  • Bold (700)
    • 137 |
  • Italic
    • 138 |
  • Bold (700) & Italic
    • 139 |
140 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

141 |
142 |

This is roman text.

143 |

This is roman text (control).

144 |
145 |
146 |

This is bold text.

147 |

This is bold text (control).

148 |
149 |
150 |

This is italic text.

151 |

This is italic text (control).

152 |
153 |
154 |

This is bold and italic text.

155 |

This is bold and italic text (control).

156 |
157 | 158 |

0111 Open Sans: No Faux

159 |
    160 |
  • Roman
    • 161 |
  • Bold (700)
    • 162 |
  • Italic
    • 163 |
  • Bold (700) & Italic
    • 164 |
165 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

166 |
167 |

This is roman text.

168 |

This is roman text (control).

169 |
170 |
171 |

This is bold text.

172 |

This is bold text (control).

173 |
174 |
175 |

This is italic text.

176 |

This is italic text (control).

177 |
178 |
179 |

This is bold and italic text.

180 |

This is bold and italic text (control).

181 |
182 | 183 |

1000 Open Sans: Faux Everything

184 |
    185 |
  • Roman
    • 186 |
  • Bold (700)
    • 187 |
  • Italic
    • 188 |
  • Bold (700) & Italic
    • 189 |
190 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

191 |
192 |

This is roman text.

193 |

This is roman text (control).

194 |
195 |
196 |

This is bold text.

197 |

This is bold text (control).

198 |
199 |
200 |

This is italic text.

201 |

This is italic text (control).

202 |
203 |
204 |

This is bold and italic text.

205 |

This is bold and italic text (control).

206 |
207 | 208 |

1001 Open Sans: Faux Bold, Mismatch Italic

209 |
    210 |
  • Roman
    • 211 |
  • Bold (700)
    • 212 |
  • Italic
    • 213 |
  • Bold (700) & Italic
    • 214 |
215 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

216 |
217 |

This is roman text.

218 |

This is roman text (control).

219 |
220 |
221 |

This is bold text.

222 |

This is bold text (control).

223 |
224 |
225 |

This is italic text.

226 |

This is italic text (control).

227 |
228 |
229 |

This is bold and italic text.

230 |

This is bold and italic text (control).

231 |
232 | 233 |

1010 Open Sans: Faux Bold, Bold Italic

234 |
    235 |
  • Roman
    • 236 |
  • Bold (700)
    • 237 |
  • Italic
    • 238 |
  • Bold (700) & Italic
    • 239 |
240 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

241 |
242 |

This is roman text.

243 |

This is roman text (control).

244 |
245 |
246 |

This is bold text.

247 |

This is bold text (control).

248 |
249 |
250 |

This is italic text.

251 |

This is italic text (control).

252 |
253 |
254 |

This is bold and italic text.

255 |

This is bold and italic text (control).

256 |
257 | 258 |

1011 Open Sans: Faux Bold

259 |
    260 |
  • Roman
    • 261 |
  • Bold (700)
    • 262 |
  • Italic
    • 263 |
  • Bold (700) & Italic
    • 264 |
265 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

266 |
267 |

This is roman text.

268 |

This is roman text (control).

269 |
270 |
271 |

This is bold text.

272 |

This is bold text (control).

273 |
274 |
275 |

This is italic text.

276 |

This is italic text (control).

277 |
278 |
279 |

This is bold and italic text.

280 |

This is bold and italic text (control).

281 |
282 | 283 |

1100 Open Sans: Faux Italic, Bold Italic

284 |
    285 |
  • Roman
    • 286 |
  • Bold (700)
    • 287 |
  • Italic
    • 288 |
  • Bold (700) & Italic
    • 289 |
290 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

291 |
292 |

This is roman text.

293 |

This is roman text (control).

294 |
295 |
296 |

This is bold text.

297 |

This is bold text (control).

298 |
299 |
300 |

This is italic text.

301 |

This is italic text (control).

302 |
303 |
304 |

This is bold and italic text.

305 |

This is bold and italic text (control).

306 |
307 | 308 |

1101 Open Sans: No Faux

309 |
    310 |
  • Roman
    • 311 |
  • Bold (700)
    • 312 |
  • Italic
    • 313 |
  • Bold (700) & Italic
    • 314 |
315 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

316 |
317 |

This is roman text.

318 |

This is roman text (control).

319 |
320 |
321 |

This is bold text.

322 |

This is bold text (control).

323 |
324 |
325 |

This is italic text.

326 |

This is italic text (control).

327 |
328 |
329 |

This is bold and italic text.

330 |

This is bold and italic text (control).

331 |
332 | 333 |

1110 Open Sans: Faux Bold-Italic

334 |
    335 |
  • Roman
    • 336 |
  • Bold (700)
    • 337 |
  • Italic
    • 338 |
  • Bold (700) & Italic
    • 339 |
340 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

341 |
342 |

This is roman text.

343 |

This is roman text (control).

344 |
345 |
346 |

This is bold text.

347 |

This is bold text (control).

348 |
349 |
350 |

This is italic text.

351 |

This is italic text (control).

352 |
353 |
354 |

This is bold and italic text.

355 |

This is bold and italic text (control).

356 |
357 | 358 |

1111 Open Sans: Perfect Match

359 |
    360 |
  • Roman
    • 361 |
  • Bold (700)
    • 362 |
  • Italic
    • 363 |
  • Bold (700) & Italic
    • 364 |
365 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

366 | 367 |

1111 Open Sans: Mismatched Request, No Faux

368 |
    369 |
  • font-style: normal
    • 370 |
  • font-weight: 300, default is 400
    • 371 |
372 |
    373 |
  • Roman
    • 374 |
  • Bold (700)
    • 375 |
  • Italic
    • 376 |
  • Bold (700) & Italic
    • 377 |
378 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

379 | 380 |

1111 Open Sans: Mismatched Request, No Faux

381 |
    382 |
  • font-style: normal
    • 383 |
  • font-weight: 600, default is 400
    • 384 |
385 |
    386 |
  • Roman
    • 387 |
  • Bold (700)
    • 388 |
  • Italic
    • 389 |
  • Bold (700) & Italic
    • 390 |
391 |

This is roman text. This is bold text. This is italic text. This is bold and italic text. This is roman text. This is bold text. This is italic text. This is bold and italic text.

392 | 393 | 394 | 406 | 407 | --------------------------------------------------------------------------------