System Font Stack

Recommendation

Learn why I switched to WPCodeBox for managing code snippets for myself and for my clients.

Instructions

Snippet Type: CSS

  1. Copy the snippet.
  2. Add the snippet using WPCodeBox.
  3. Follow any customization notes provided.
  4. Save the snippet.
  5. Enable the snippet.
  6. Test.

Snippet

The How to Switch to System Fonts and Boost WordPress Website Performance guide will show you how to easily implement this solution to build a faster website.

				
					/* SYSTEM FONT STACK */
body {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1,h2,h3,h4,h5,h6 {
	font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}