How to add font in wordpress

时间：2014-05-19 作者：Santhosh

我有一个奥斯瓦尔德。woff字体文件从一些免费字体网站下载。使用ftp，我在主题文件夹中创建了名为字体的文件夹。（即/wp内容/主题/广场/字体）。在fonts文件夹中，我放置了oswald。woff文件。

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400;
    src: local("Oswald Regular"), local("Oswald-Regular"), url("fonts/oswald.woff") format("woff");
}
我将此字体用于标题h1。打开我的网站时，它会显示“www.mysite.com/fonts/oswald.woff”（mysite.com用于表示，它不是原始网站），但在firebug错误控制台中找不到。

如何获取文件oswald的url。沃夫

2 个回复
最合适的回答,由SO网友:renny 整理而成

它应该在www.mysite上。com/wp-content/themes/esplanade/font/oswald。沃夫

SO网友:Matt Radford

您只包括WOFF，因此对于不支持WOFF的浏览器没有回退。看到这个了吗article from CSS Tricks about @font-face.

除非您绝对需要在本地包含字体，否则为什么不从Google字体加载Oswald？您可以使用以下插件添加Google字体WP Google Fonts, 或者在开发主题时，在函数中添加以下内容。php：

/** Load Google fonts */
add_action( \'wp_enqueue_scripts\', \'custom_load_google_fonts\' );

function custom_load_google_fonts() {
    wp_enqueue_style( \'google-fonts\', \'//fonts.googleapis.com/css?family=Oswald\', array(), PARENT_THEME_VERSION );
}
添加以下CSS（使用回退字体）：

h1 {
 font-family: "Oswald", Helevetica, Arial, sans-serif;
}

结束
标签： theme-development   小码农  

相关推荐