如何添加Google字体到你的wordpress主题

  Google Web Fonts 免费为你的博客提供安全而漂亮的字体服务。通过使用Google Web Fonts,你的博客不用上传任何字体,就能显示除了常用的“Arial”, “Verdana”等字体之外的其它字体。

  众所周知,网站可读性取决于它的设计和外观。网页设计中扮演最重要角色的字体,使用的什么样的字体对您的网站很重要。例如,Arial /Helvetica (sans-serif), Verdana and Georgia是我们常用的web设计的字体。这些字体提供一个很好的可读性,但如果你想用新字体,你需要做的就是确保浏览者的网络设备安装了这些字体。这样很难确定。所以就得自己上传字体到服务器,并通过CSS来加以控制。但现在,有一个更好的免费工具,那就是Google Web Fonts

  在您使用Google Web Fonts服务之前,请首先了解以下两点:

  1.选择太多的字体会减缓你的博客加载速度,所以你只需选择必须使用的。以免造成访问速度变慢的情况发生。

  2.如果你只能选择你所需要的语言,你会帮助防止您的网页上的变得缓慢。

  3.目前Google Web Fonts的界面及预览语言不为英语(不妨碍中文使用)。

  Google Web Fonts能直观展示各种web字体,就像Serif, Sans-Serif, Display 和 Handwriting,你还可以浏览某些属性,如脚本显示字体、宽度、倾斜和厚度。 所有这些属性可以显示在侧窗格中。在你选择你想要的字体时,你还可以直观预览诸如单词、句子、段落等整体样式。

  下面是一个简单的教程,帮助你更快更好使用Google Web Fonts:

  1.点击 Google Web Fonts 进入谷歌字体服务,选择您想要的字体,然后点击右下角 “Add to collection” 按钮,在这里,我们选择“Alike”字体来作为整个教程的例子字体。

  

  2.点击“Add to collection”后,会在页面最下方出现这样一个信息“1 font family in your collection” 还有三个按钮,分别是“Choose“,“Review” 和“Use“. 在这里,我们选择 “Use“.也就是使用。

  

  3.它还要求对字体设置。 选择可用的样式, 例如“粗体、斜体”等。 但只针对某些特定字体。 接下来,选择特定的语言字符。生成代码。

  

  4.接下来是代码部门,谷歌字体提供三种应用代码,分别是标准模式“Standard (external stylesheet)”, 导出模式“@import method”和JS模式“Javascript”。根据需要,现在你需要的模式,不过在这里,我们建议选择标准模式。 复制第3步的代码,把它们拷贝到你主题的header.php的之前。

  5.现在,把字体的名字添加到你主题的css文件里面。例如:你想在段落

中使用google web Fonts作为默认显示字体。css代码直接这样写就行:

p { font-family: 'Alike', Arial; }

  此代码将在您的博客段落显示google字体“Alike”,如果要加载的字体遇到一些暂时性问题,那么它将显示为“arial”字体。 同样,您可以将字体样式添加到其他元素,比如“body”整体布局、“li”列表的链接等。 如果你是不太熟悉css,请参见 CSS basics at HTML Dog.

时间: 2024-07-29 11:23:21

如何添加Google字体到你的wordpress主题的相关文章

wordpress 禁止加载google字体,解决页面打开异常缓慢

1.发现问题 最近google的服务器在国内访问的话那是相当的困难,也有翻墙的,但是速度还是差了些,之前 后台打开都是很快的,最近突然打开要花费个20几秒,每个页面都如此,都快崩溃了说. 打开浏览器的调试模式按console选项会出现下面的错误: 也就是这个错误: GET http://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=lat

wordpress移除google字体(googleapis.com)

google字体很强大,但是再强大也躲不过GFW. 不但很多主题在用google fonts,就连wp的后台本身也在用google fonts.所以呢,在墙内打开wp后台那个慢啊,实在忍无可忍,就把他去掉吧. 以下代码,直接加在functions.php的末尾即可(外观--编辑--选择模版函数functions.php).  代码如下 复制代码 <?php function remove_open_sans_from_wp_core() { wp_deregister_style( 'open-

使用Chrome修改任意WordPress主题字体样式与字号

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 许多网友和Quicl一样,默认主题的字体不好看之,为了美观就在编辑文章时候使用CSS弄个字体样式,可是诸不知文章使用过多的CSS样式对首页打开速度有很大影响.根除这个问题的方式就是修改Wordpress主题默认的字体样式与字号.虽然在今天之前一直用着修改文章css的方法,可是昨晚上网时间有点长,看网站其他字体时候突然感到不拿么爽.遂想到,算了

为IE8/IE9添加google.com.hk搜索

访问微软专门制作的一个搜索加载项网址,里面提供了Google.com.hk加载项的添加链接,单击链接即可完成添加.但是最近有用户留言反应该网址已经打不开了,而且在网上找了一些直接导入注册表的方法都行不通. 已失效的网址:http://www.microsoft.com/windows/ie/searchguide/zh-chs/default.mspx 所以,这次小编专门自制了一个Google.com.hk加载项的添加链接,您只要在IE8/IE9浏览器中点击下面的Google链接,即可添加Goo

ppt中怎么给海报添加浮雕字体效果?

ppt中怎么给海报添加浮雕字体效果?   1.首先插入文本框,设置文字填充,输入江山无限,茶色 字号88 2.修改字体选择"方正字迹-曾正国行楷繁体" 3.设置字体格式,选择三维效果-顶部棱台宽度高度都是10磅 4.之后再往下选择照明,选择早晨. 5.之后选择图片插入,就可以做成我们需要的效果咯 6.当然我们也可以试试其他效果,下面是几个实例.

在Word2003工具栏添加常用字体按钮

  在使用Word2003编辑文档的时候,用户可以将常用字体以按钮的形式添加到工具栏上,以便快速选择这些字体,操作步骤如下所述: 第1步,运行Word2003,右键单击工具栏,在打开的快捷菜单中选择"自定义"命令. 第2步,打开"自定义"对话框,在"自定义"对话框中切换到"命令"选项卡.在"类别"列表中选中"字体"选项,然后在"命令"列表中拖动需要添加为按钮的字体到工

wpf-WPF 中如何在.cs中加入自定义添加的字体?

问题描述 WPF 中如何在.cs中加入自定义添加的字体? WPF 中如何在.cs中加入自定义添加的字体? 自定义添加的字体的ttf文件放在项目中 解决方案 可以在打包程序的时候加上你的字体,然后安装到用户计算机中 解决方案二: 没办法在后台加吗?在.xaml里面可以加入并显示出来,但是在.cs中就不知道怎么弄了.

visual studio-VS2015中MFC的添加变量字体异常的大怎么解决

问题描述 VS2015中MFC的添加变量字体异常的大怎么解决 如图所示 解决方案 字体异常大是什么意思?改vs显示字体可以在vs的工具,选项,环境,字体和颜色里面改 解决方案二: 你这个是你系统的字体 DPI还有VS的设置字体等检查一下 解决方案三: 按住ctrl 和滑轮组合 可以调节的

为企业网站建设添加Google地图

中介交易 SEO诊断 淘宝客 云主机 技术大厅 进行业务洽谈的时候经常客户会有这样咨询,贵公司应该怎么走?这个时候在企业网站建设的过程中,添加一个有效的电子地图对企业网站来说是非常明智的选择,如果将电子地图增加到联系方式的页面中会收到意想不到的效果,不但会增加网站的可用性,而且在客户开展业务时带来不少便利,省却不少类似上面问题的麻烦. Google 地图和百度地图是电子地图应用中佼佼者,在下文中,通过几个简单的步骤为企业网站建设添加Google 电子地图. (一)为企业网站建设添加Google地