Header

Using system font stack for a website

This is an interesting idea that I'm seeing more often. Instead of requiring web visitors to download font files, you specify a font they already have and which matches their OS.

It's fast because you aren't downloading font files, and the font will match the look and feel of their current OS. Mac users may see San Francisco or Helvetica, Windows users might see Segoe UI or Tahoma.

It's easy to implement, here are two techniques

Method 1 - Using Font Family

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Method 2 - @font-face

@font-face { 
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Now, let's apply it on an element */
body { font-family: "system";
}

See this Code Pen post for more details, credit for @font-face technique: Jonathan Neal

Test Internet Explorer and…

Cross-browser testing on Mac OSX: Emulate Internet Explorer, Android and Window phones…

Track WordPress Contact Form…

How to Track WordPress Contact Form 7 (CF7) form submission with Google Tag Manager (GTM)…

Configure MX for a subdomain…

How to Configure MX records for a subdomain on ProtonMail If you are configuring a…

Joomla error "1030 - Got…

Joomla error "1030 - Got error 28 from storage engine" If you get this Joomla 1030 error…

Sublime shortcut to wrap…

Sublime shortcut to wrap selected text in a tag This is a super-useful Sublime shortcut…

How to enable GA enhanced…

How to enable GA enhanced link attribution in GTM Enabling enhanced link attribution in…

Optimising images and…

Optimising images and reducing file sizes It's sometimes difficult to create fast loading…

How to fix microdata or…

How to fix microdata or structured data errors in Joomla Microdata or Structured Data was…

Joomla error 500 - Unable to…

Joomla error 500 - Unable to load renderer class If you get a Joomla error 500 - Unable…

How to open winmail.dat files…

How to open winmail.dat files on Mac OSX If you are on Mac OSX, you may occasionally…

CSS wildcard selectors with…

How to use wildcard CSS selectors with LESS If you are using LESS and need to use a…

How to fix a missing Admin…

How to fix a missing Admin Toolbar at the top of a WordPress page Working on an a…

How to add a CiviCRM…

How to add a CiviCRM extension to Joomla As you probably know, CiviCRM comes bundled with…

How to configure MailGun and…

How to configure MailGun and Google Business Apps in CiviCRM When configuring SMTP mail…

Warning JUser: :_load:…

Joomla Warning JUser: :_load: Unable to load user with ID: 62 If you see a Joomla warning…

How to prevent duplicate URLs…

How to prevent duplicate URLs with sh404SEF If you use sh404SEF and can't solve problems…

What is the 'Itemid' in a…

What is the 'Itemid' in a Joomla URL? If you examine the non-SEF url of a typical page on…

JLIB_APPLICATION_ERROR_COMPONE…

After upgrading from Joomla 3.5 to Joomla 3.6.0 I suddenly got a…

How to Launch Sublime Text…

How to Launch Sublime Text from Terminal or iTerm in OSX I've been working a lot with…

Customise a Joomla template…

How to customise a Joomla template based on article ID Working on a custom Joomla…

2013 - The Year of Responsive…

2013 -The Year of Responsive Web Design Some trends come and go. Others gather momentum…