Menu Close

Using faster Unicode symbols instead of web font for speed

To be read in modern browsers, HTML/CSS files must be UTF-8 – an encoding scheme developed in 1992. WordPress uses utf8mb4 and is 100% backwards compatible with UTF-8.

You can modify your site symbols by preparing a Unicode font-size, text and color shadows, exactly like regular CSS text. The name comes from Unicode (or Universal Coded Character Set) Transformation Format – 8-bit. UTF-8 is the type encoding accounting for 88.4% of most Webpages in January 2017.

When we think of pretty font icons like arrows, hearts and stars, we think of trendy font icon services like Font Awesome or Fontello. Font Awesome is a unicode UTF-8 font referred to as a glyph icon library. You can use it as decoration, logos, or navigation. Because these are webfonts, they cause extra page weight and HTTP requests. Font Awesome and other icon fonts slow down page load times. The frequently add 75k to 100k extra page weight and HTTP requests. That slows things down.

  1. Use a unicode system

If you are developing a website using only simple shapes, you can use unicode UTF-8 symbols as replacement for font icons. The unicodes are essentially part of your operating system so you don’t need any special library or plugin and you treat them like regular text. For example, to change the icon size, simply change the font-size values as usual.

Unicodes are Icon-like, Arrows, Special, Currency, Weather, Pointers, Card Suits, Chess, Math, Fractions, and Roman Numerals.


Symbols gone amok:

  1. WordPress Plugins Use
  • Disable Google Fonts :This plugin stops loading of Open Sans and other fonts used by WordPress and bundled themes (Twenty Twelve, Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, Twenty Sixteen, Twenty Seventeen) from Google Fonts.Reasons for not using Google Fonts might be privacy and security, local development or production, blocking of Google’s servers, characters not supported by font, performance.

    Disable Google Fonts is a very lightweight, it has no settings, just activate it and it works immediately.

  • Typecase Web Fonts

Typecase makes working with web fonts in WordPress a glorious experience. With over 650 fonts from Google Web Fonts, Typecase is a unique and easy-to-use typography plugin that allows you to quickly browse, find, and select fonts to apply to your website.

  • Remove Open Sans font Link from WP core

Remove Google fonts link from WP core and default themes:twentyfourteen and twentyfifteen.

Remove Open Sans font Link from WP core
Remove Lato font Link from the WP default theme twentyfourteen.
Remove Noto Sans font link,Noto Serif font link,Inconsolata font link from the WP default theme twentyfifteen.
Remove Noto Serif font link,Inconsolata font link from the WP default theme twentyfifteen.
Remove Inconsolata font link from the WP default theme twentyfifteen.

  1. Use a function

Use the wp_enqueue_scripts hook and make sure to give it a higher priority than the hook in the parent theme. The default is 10 so in my example I use 20.


function wpse_dequeue_google_fonts() {
wp_dequeue_style( ‘twentyfifteen-fonts’ );
add_action( ‘wp_enqueue_scripts’, ‘wpse_dequeue_google_fonts’, 20 );

  1. Use a function

Open theme’s functions.php and find a function called twentyfifteen_fonts_url() – it handles all the fonts stuff. In default file it starts on line 144. Edit it to your needs.

  1. Use wp_deregister_style() function to manually unregister that stylesheet. See here.