@font-face Rule

The @Font-Face Rule To display web fonts on your pages, you first need to define them by using the@font-face rule. This rule sets the name and type of the font and provides the browser with the location of the file to use. Here's the basic syntax: @font-face { ➊ font-family: FontName; ➋ src: ➌local('fontname'), ➍ url('/path/filename.otf') ➎ format('opentype'); } I'll break this syntax down a little. First, I give the font a name with the font-family property (➊). This property is one you should be familiar with, although it serves a slightly different purpose inside the rule than it does when used in the declaration block for a regular selector; here, it's used to declare a font name, not to refer to one. Just like the font-family property in CSS2.1, you can use multiple, space-separated words as long as you enclose them within single quotation marks. Media queries are CSS3 rules that allow a page to query different attributes from the device used to call the page so that the presentation can be taylored specifically to the user's device screen size. Media queries allows a website's presentation to become device independent. It is the basis of building responsive websites with adaptable displays based on the calling devices attributes. Media features are information about the calling devices that can be used to determine it capabilities. The following list are the current media features available to query a devices attributes.

Media features

This stood out because previously the only way to create a responsive website was to use style sheet frameworks like bootstrap. With media queries it is very easy to do it yourself.
W3.org on media queries
Listing 1: This listing shows how to use one sytlesheet for mobile and another for desktops
                            <link href="mobile.css" rel="stylesheet">
                            <link href="desktop.css" rel="stylesheet" media="(min-width: 600px)">