start with creating a seperate css file with font declarations:
@font-face { font-family: 'MyFont'; src: url('superawesomefont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MyFont'; src: url('superawesomefontBold.woff') format('woff'); font-weight: bold; font-style: normal; } [/css] then add this to the bottom of body: <script> WebFontConfig = { custom: { families: [ 'MyFont:normal', 'MyFont:bold' ], urls: [ 'fonts.css' ] } }; (function(d) { var wf = d.createElement('script'), s = d.scripts[0]; wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js'; s.parentNode.insertBefore(wf, s); })(document); </script>
then simply in your css file
add seperate selectors with font declarations with the new custom font preceding with .wf-active
body {font-family: Verdana, Geneva, sans-serif; } .wf-active body { font-family: "MyFont", Verdana, Geneva, sans-serif; }