diff --git a/include/hexo/filter/stylus.js b/include/hexo/filter/stylus.js
deleted file mode 100644
index 873f677..0000000
--- a/include/hexo/filter/stylus.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Add resolved variables to the theme config for stylus.
- */
-module.exports = function(hexo) {
-    hexo.extend.filter.register('template_locals', locals => {
-        const fontcdn = hexo.extend.helper.get('fontcdn').bind(locals);
-        hexo.theme.config['@fontface'] = {
-            default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),
-            cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
-        };
-        return locals;
-    });
-};
diff --git a/include/register.js b/include/register.js
index 4c656b7..ad1b9c3 100644
--- a/include/register.js
+++ b/include/register.js
@@ -3,7 +3,6 @@ const logger = require('hexo-log')();
 module.exports = hexo => {
     logger.info('=== Registering Hexo extensions ===');
     require('hexo-component-inferno/lib/hexo/filter/locals')(hexo);
-    require('./hexo/filter/stylus')(hexo);
     require('./hexo/generator/category')(hexo);
     require('hexo-component-inferno/lib/hexo/generator/assets')(hexo);
     require('hexo-component-inferno/lib/hexo/generator/insight')(hexo);
diff --git a/layout/common/head.jsx b/layout/common/head.jsx
index 9242a90..2c1c093 100644
--- a/layout/common/head.jsx
+++ b/layout/common/head.jsx
@@ -30,7 +30,7 @@ function getPageTitle(page, siteTitle, helper) {
 module.exports = class extends Component {
     render() {
         const { env, site, config, helper, page } = this.props;
-        const { url_for, cdn, iconcdn, is_post } = helper;
+        const { url_for, cdn, fontcdn, iconcdn, is_post } = helper;
         const {
             url,
             meta_generator = true,
@@ -49,6 +49,10 @@ module.exports = class extends Component {
         } = head;
 
         const language = page.lang || page.language || config.language;
+        const fontCssUrl = {
+            default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),
+            cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
+        };
 
         let hlTheme, images;
         if (highlight && highlight.enable === false) {
@@ -139,6 +143,7 @@ module.exports = class extends Component {
             {favicon ? <link rel="icon" href={url_for(favicon)} /> : null}
             <link rel="stylesheet" href={iconcdn()} />
             {hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '9.12.0', 'styles/' + hlTheme + '.css')} /> : null}
+            <link rel="stylesheet" href={fontCssUrl[variant]} />
             <link rel="stylesheet" href={url_for('/css/' + variant + '.css')} />
             <Plugins site={site} config={config} helper={helper} page={page} head={true} />
 
diff --git a/source/css/cyberpunk.styl b/source/css/cyberpunk.styl
index c58e948..f6c4aff 100644
--- a/source/css/cyberpunk.styl
+++ b/source/css/cyberpunk.styl
@@ -1,5 +1,3 @@
-@import url(hexo-config('@fontface.cyberpunk'))
-
 $family-sans-serif ?= 'Oxanium', Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
 $family-code ?= 'Roboto Mono', monospace, 'Microsoft YaHei'
 // shadow and radius
diff --git a/source/css/default.styl b/source/css/default.styl
index d89421d..97102a8 100644
--- a/source/css/default.styl
+++ b/source/css/default.styl
@@ -1,3 +1 @@
-@import url(hexo-config('@fontface.default'))
-
 @import 'style'