gistfile1.txt

    <title>Your page title</title>
    <style>
        /* these styles must come before the js */ 
        title {
            font-family: xxs;
        }
        @media only screen and (min-width: 480px) {
            title {
                font-family: xs;
            }
        }
        @media only screen and (min-width: 730px) {
            title {
                font-family: sm;
            }
        }
        @media only screen and (min-width: 988px) {
            title {
                font-family: md;
            }
        }
        @media only screen and (min-width: 1008px) {
            title {
                font-family: lg;
            }
        }
        @media only screen and (min-width: 1328px) {
           title {
               font-family: xl;
           }
        }
    </style>
    <script>
        // the just must come after the page title and the @media stiles
        (function(){
            window.getCurrentMediaQuery = function() {
                return document.defaultView.getComputedStyle(document.querySelector("title"), null).getPropertyValue('font-family');
            }
            // usage example 
            // console.log("media query", getCurrentMediaQuery());
        })();
    </script>