From 0671f3a8d3a74cd6a8810a501f7701452c3572a4 Mon Sep 17 00:00:00 2001 From: Helen Hou-Sandi Date: Wed, 4 May 2016 22:06:27 +0000 Subject: [PATCH] Drop Open Sans in the admin in favor of system fonts. Rejoice, for your admins will feel more native to your surrounding computing environment and likely load faster, especially when offline, as they no longer have to talk to The Google Overlord. At the time of introduction in 3.8, there were not good system fonts common to all platforms at the time. In the years since, Windows, Android, OS X, iOS, Firefox OS, and various flavors of Linux have all gotten their own (good) system UI fonts. There will definitely be visual bugs, mainly around alignment and spacing; these should be documented and reported on the ticket and fixed more atomically so that our current and future selves have a better understanding of what happened and why. The style remains registered, as it is almost certainly in use by themes and plugins. props mattmiklic. see #36753. git-svn-id: https://develop.svn.wordpress.org/trunk@37361 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 2 +- src/wp-admin/css/customize-controls.css | 2 +- src/wp-admin/css/dashboard.css | 2 -- src/wp-admin/css/install.css | 6 ++-- src/wp-admin/css/login.css | 2 +- src/wp-admin/css/press-this-editor.css | 2 +- src/wp-admin/css/press-this.css | 2 +- src/wp-admin/includes/class-wp-press-this.php | 31 +------------------ src/wp-includes/css/admin-bar.css | 8 ++--- src/wp-includes/css/editor.css | 3 +- src/wp-includes/css/media-views.css | 6 ++-- src/wp-includes/css/wp-embed-template.css | 4 +-- src/wp-includes/embed.php | 1 - src/wp-includes/functions.php | 4 +-- .../tinymce/plugins/compat3x/css/dialog.css | 4 +-- .../js/tinymce/skins/wordpress/wp-content.css | 2 +- src/wp-includes/script-loader.php | 13 ++++---- 17 files changed, 31 insertions(+), 63 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 7f3c1a1f00..2ec8b7d22a 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -215,7 +215,7 @@ body { body { background: #f1f1f1; color: #444; - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4em; min-width: 600px; diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index 82d9801e48..7991e4be6c 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/wp-admin/css/customize-controls.css @@ -1219,7 +1219,7 @@ body.cheatin h1 { border-bottom: 1px solid #ddd; clear: both; color: #666; - font: 24px "Open Sans", sans-serif; + font: 24px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; margin: 30px 0 0 0; padding: 0; padding-bottom: 7px; diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 3968a979f9..4e6d9303ed 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -951,8 +951,6 @@ a.rsswidget { color: #fff; } -/* Make the browser nags easier to read with Open Sans */ - #dashboard_browser_nag h2.hndle { border: none; font-weight: 600; diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 55fbe54330..1524b4a3e3 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -6,7 +6,7 @@ html { body { background: #fff; color: #444; - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; margin: 140px auto 25px; padding: 20px 20px 10px 20px; max-width: 700px; @@ -132,7 +132,7 @@ label { } textarea { border: 1px solid #ddd; - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -181,7 +181,7 @@ textarea { input, submit { - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; } .form-table input[type=text], diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css index dc77b571fa..d53eabf44e 100644 --- a/src/wp-admin/css/login.css +++ b/src/wp-admin/css/login.css @@ -12,7 +12,7 @@ body { background: #f1f1f1; min-width: 0; color: #444; - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.4em; } diff --git a/src/wp-admin/css/press-this-editor.css b/src/wp-admin/css/press-this-editor.css index 96ff426168..3689c9395e 100644 --- a/src/wp-admin/css/press-this-editor.css +++ b/src/wp-admin/css/press-this-editor.css @@ -77,7 +77,7 @@ object { */ body { color: #404040; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 20px; font-weight: 400; line-height: 1.6; diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css index 73dadce4e7..ca52b975b1 100644 --- a/src/wp-admin/css/press-this.css +++ b/src/wp-admin/css/press-this.css @@ -294,7 +294,7 @@ input, select, textarea { color: #404040; - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 20px; font-weight: 400; line-height: 1.6; diff --git a/src/wp-admin/includes/class-wp-press-this.php b/src/wp-admin/includes/class-wp-press-this.php index 4a909abfbc..bb5ec1b97b 100644 --- a/src/wp-admin/includes/class-wp-press-this.php +++ b/src/wp-admin/includes/class-wp-press-this.php @@ -793,36 +793,7 @@ class WP_Press_This { $press_this = str_replace( '.css', '-rtl.css', $press_this ); } - $open_sans_font_url = ''; - - /* translators: If there are characters in your language that are not supported - * by Open Sans, translate this to 'off'. Do not translate into your own language. - */ - if ( 'off' !== _x( 'on', 'Open Sans font: on or off' ) ) { - $subsets = 'latin,latin-ext'; - - /* translators: To add an additional Open Sans character subset specific to your language, - * translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not translate into your own language. - */ - $subset = _x( 'no-subset', 'Open Sans font: add new subset (greek, cyrillic, vietnamese)' ); - - if ( 'cyrillic' == $subset ) { - $subsets .= ',cyrillic,cyrillic-ext'; - } elseif ( 'greek' == $subset ) { - $subsets .= ',greek,greek-ext'; - } elseif ( 'vietnamese' == $subset ) { - $subsets .= ',vietnamese'; - } - - $query_args = array( - 'family' => urlencode( 'Open Sans:400italic,700italic,400,600,700' ), - 'subset' => urlencode( $subsets ), - ); - - $open_sans_font_url = ',' . add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); - } - - return $styles . $press_this . $open_sans_font_url; + return $styles . $press_this; } /** diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 9371a94043..c57c1e04e0 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -7,7 +7,7 @@ text-shadow: none; text-transform: none; letter-spacing: normal; - font: normal 13px/32px "Open Sans", sans-serif; + font: normal 13px/32px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; -webkit-border-radius: 0; border-radius: 0; -webkit-box-sizing: content-box; @@ -79,7 +79,7 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar { direction: ltr; color: #ccc; - font: normal 13px/32px "Open Sans", sans-serif; + font: normal 13px/32px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; height: 32px; position: fixed; top: 0; @@ -618,7 +618,7 @@ html:lang(he-il) .rtl #wpadminbar * { #wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input { position: relative; z-index: 30; - font: 13px/24px "Open Sans", sans-serif; + font: 13px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; height: 24px; width: 24px; max-width: none; @@ -798,7 +798,7 @@ html:lang(he-il) .rtl #wpadminbar * { } #wpadminbar * { - font: normal 14px/32px "Open Sans", sans-serif; + font: normal 14px/32px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif, sans-serif; } #wpadminbar .quicklinks > ul > li > a, diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index c2a036bb58..899cb3de84 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -1109,7 +1109,8 @@ i.mce-i-wp_code:before { background: #ebebeb; color: #666; cursor: pointer; - font: 13px/19px "Open Sans", sans-serif; + font-size: 13px; + line-height: 19px; height: 20px; margin: 5px 0 0 5px; padding: 3px 8px 4px; diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 7f69a0edbd..313bf90904 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -17,7 +17,7 @@ .media-modal, .media-frame { - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 12px; -webkit-overflow-scrolling: touch; } @@ -80,7 +80,7 @@ .media-frame input[type="url"], .media-frame textarea, .media-frame select { - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 12px; border-width: 1px; border-style: solid; @@ -807,7 +807,7 @@ padding: 4px; font-size: 13px; color: #444; - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; -webkit-appearance: none; } diff --git a/src/wp-includes/css/wp-embed-template.css b/src/wp-includes/css/wp-embed-template.css index d91bdb65f2..607d13f837 100644 --- a/src/wp-includes/css/wp-embed-template.css +++ b/src/wp-includes/css/wp-embed-template.css @@ -59,7 +59,7 @@ body { .wp-embed { padding: 25px; - font: 400 14px/1.5 'Open Sans', sans-serif; + font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; color: #82878c; background: white; border: 1px solid #e5e5e5; @@ -307,7 +307,7 @@ p.wp-embed-share-description { height: 28px; margin: 0 0 10px 0; padding: 0 5px; - font: 400 14px/1.5 'Open Sans', sans-serif; + font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; resize: none; cursor: text; } diff --git a/src/wp-includes/embed.php b/src/wp-includes/embed.php index 265d42acf6..bca5544ee2 100644 --- a/src/wp-includes/embed.php +++ b/src/wp-includes/embed.php @@ -877,7 +877,6 @@ function wp_embed_excerpt_attachment( $content ) { * @since 4.4.0 */ function enqueue_embed_scripts() { - wp_enqueue_style( 'open-sans' ); wp_enqueue_style( 'wp-embed-template-ie' ); /** diff --git a/src/wp-includes/functions.php b/src/wp-includes/functions.php index 7ce39cf9b4..d4731c0ab1 100644 --- a/src/wp-includes/functions.php +++ b/src/wp-includes/functions.php @@ -2667,7 +2667,7 @@ function _default_wp_die_handler( $message, $title = '', $args = array() ) { body { background: #fff; color: #444; - font-family: "Open Sans", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; margin: 2em auto; padding: 1em 2em; max-width: 700px; @@ -2678,7 +2678,7 @@ function _default_wp_die_handler( $message, $title = '', $args = array() ) { border-bottom: 1px solid #dadada; clear: both; color: #666; - font: 24px "Open Sans", sans-serif; + font-size: 24px; margin: 30px 0 0 0; padding: 0; padding-bottom: 7px; diff --git a/src/wp-includes/js/tinymce/plugins/compat3x/css/dialog.css b/src/wp-includes/js/tinymce/plugins/compat3x/css/dialog.css index 02c0d294d2..c02f1be500 100644 --- a/src/wp-includes/js/tinymce/plugins/compat3x/css/dialog.css +++ b/src/wp-includes/js/tinymce/plugins/compat3x/css/dialog.css @@ -1,8 +1,6 @@ -@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=latin-ext,latin"); - /* Generic */ body { -font-family: "Open Sans", sans-serif; +font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size:13px; background:#fcfcfc; padding:0; diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index 39af33835f..80510aca8a 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css @@ -386,7 +386,7 @@ audio { .wpview-error p { margin: 0; text-align: center; - font-family: 'Open Sans', sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; } .wpview-type-gallery:after { diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index fe9ab0a64f..a97bfe14c8 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -697,6 +697,7 @@ function wp_default_styles( &$styles ) { $styles->text_direction = function_exists( 'is_rtl' ) && is_rtl() ? 'rtl' : 'ltr'; $styles->default_dirs = array('/wp-admin/', '/wp-includes/css/'); + // Open Sans is no longer used by core, but may be relied upon by themes and plugins. $open_sans_font_url = ''; /* translators: If there are characters in your language that are not supported @@ -743,15 +744,15 @@ function wp_default_styles( &$styles ) { $styles->add( 'site-icon', "/wp-admin/css/site-icon$suffix.css" ); $styles->add( 'l10n', "/wp-admin/css/l10n$suffix.css" ); - $styles->add( 'wp-admin', false, array( 'open-sans', 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n' ) ); + $styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n' ) ); - $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'open-sans', 'dashicons', 'buttons', 'forms', 'l10n' ) ); - $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'open-sans', 'buttons' ) ); + $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) ); + $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'buttons' ) ); $styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" ); $styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie', 'imgareaselect' ) ); $styles->add( 'customize-widgets', "/wp-admin/css/customize-widgets$suffix.css", array( 'wp-admin', 'colors' ) ); $styles->add( 'customize-nav-menus', "/wp-admin/css/customize-nav-menus$suffix.css", array( 'wp-admin', 'colors' ) ); - $styles->add( 'press-this', "/wp-admin/css/press-this$suffix.css", array( 'open-sans', 'buttons' ) ); + $styles->add( 'press-this', "/wp-admin/css/press-this$suffix.css", array( 'buttons' ) ); $styles->add( 'ie', "/wp-admin/css/ie$suffix.css" ); $styles->add_data( 'ie', 'conditional', 'lte IE 7' ); @@ -759,10 +760,9 @@ function wp_default_styles( &$styles ) { // Common dependencies $styles->add( 'buttons', "/wp-includes/css/buttons$suffix.css" ); $styles->add( 'dashicons', "/wp-includes/css/dashicons$suffix.css" ); - $styles->add( 'open-sans', $open_sans_font_url ); // Includes CSS - $styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array( 'open-sans', 'dashicons' ) ); + $styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array( 'dashicons' ) ); $styles->add( 'wp-auth-check', "/wp-includes/css/wp-auth-check$suffix.css", array( 'dashicons' ) ); $styles->add( 'editor-buttons', "/wp-includes/css/editor$suffix.css", array( 'dashicons' ) ); $styles->add( 'media-views', "/wp-includes/css/media-views$suffix.css", array( 'buttons', 'dashicons', 'wp-mediaelement' ) ); @@ -783,6 +783,7 @@ function wp_default_styles( &$styles ) { $styles->add( 'farbtastic', "/wp-admin/css/farbtastic$suffix.css", array(), '1.3u1' ); $styles->add( 'jcrop', "/wp-includes/js/jcrop/jquery.Jcrop.min.css", array(), '0.9.12' ); $styles->add( 'colors-fresh', false, array( 'wp-admin', 'buttons' ) ); // Old handle. + $styles->add( 'open-sans', $open_sans_font_url ); // No longer used in core as of 4.6 // RTL CSS $rtl_styles = array(