Skip to content

Commit

Permalink
Improve font stack with standard font families
Browse files Browse the repository at this point in the history
  • Loading branch information
@robbertkl @adamwathan
robbertkl authored and adamwathan committed Oct 16, 2020
1 parent cda008a commit 2c6f237
Show file tree
Hide file tree
Showing 6 changed files with 76 additions and 75 deletions.
40 changes: 20 additions & 20 deletions __tests__/fixtures/tailwind-output-flagged.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ ul {
*/

html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
line-height: 1.5; /* 2 */
}

Expand Down Expand Up @@ -490,7 +490,7 @@ pre,
code,
kbd,
samp {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/**
Expand Down Expand Up @@ -19453,15 +19453,15 @@ video {
}

.font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-thin {
Expand Down Expand Up @@ -60992,15 +60992,15 @@ video {
}

.sm\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.sm\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.sm\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sm\:font-thin {
Expand Down Expand Up @@ -102501,15 +102501,15 @@ video {
}

.md\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.md\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.md\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.md\:font-thin {
Expand Down Expand Up @@ -144010,15 +144010,15 @@ video {
}

.lg\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.lg\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.lg\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.lg\:font-thin {
Expand Down Expand Up @@ -185519,15 +185519,15 @@ video {
}

.xl\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.xl\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.xl\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.xl\:font-thin {
Expand Down Expand Up @@ -227028,15 +227028,15 @@ video {
}

.\32xl\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.\32xl\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.\32xl\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.\32xl\:font-thin {
Expand Down
34 changes: 17 additions & 17 deletions __tests__/fixtures/tailwind-output-important.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ ul {
*/

html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
line-height: 1.5; /* 2 */
}

Expand Down Expand Up @@ -490,7 +490,7 @@ pre,
code,
kbd,
samp {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/**
Expand Down Expand Up @@ -9595,15 +9595,15 @@ video {
}

.font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif !important;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

.font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.font-hairline {
Expand Down Expand Up @@ -27114,15 +27114,15 @@ video {
}

.sm\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.sm\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif !important;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

.sm\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.sm\:font-hairline {
Expand Down Expand Up @@ -44603,15 +44603,15 @@ video {
}

.md\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.md\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif !important;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

.md\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.md\:font-hairline {
Expand Down Expand Up @@ -62092,15 +62092,15 @@ video {
}

.lg\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.lg\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif !important;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

.lg\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.lg\:font-hairline {
Expand Down Expand Up @@ -79581,15 +79581,15 @@ video {
}

.xl\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.xl\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif !important;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

.xl\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.xl\:font-hairline {
Expand Down
34 changes: 17 additions & 17 deletions __tests__/fixtures/tailwind-output-no-color-opacity.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ ul {
*/

html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
line-height: 1.5; /* 2 */
}

Expand Down Expand Up @@ -490,7 +490,7 @@ pre,
code,
kbd,
samp {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/**
Expand Down Expand Up @@ -8811,15 +8811,15 @@ video {
}

.font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-hairline {
Expand Down Expand Up @@ -24986,15 +24986,15 @@ video {
}

.sm\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.sm\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.sm\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sm\:font-hairline {
Expand Down Expand Up @@ -41131,15 +41131,15 @@ video {
}

.md\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.md\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.md\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.md\:font-hairline {
Expand Down Expand Up @@ -57276,15 +57276,15 @@ video {
}

.lg\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.lg\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.lg\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.lg\:font-hairline {
Expand Down Expand Up @@ -73421,15 +73421,15 @@ video {
}

.xl\:font-sans {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.xl\:font-serif {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.xl\:font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.xl\:font-hairline {
Expand Down
Loading

0 comments on commit 2c6f237

Please sign in to comment.