首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Google Fonts CDN时使用备用字体

使用Google Fonts CDN时,可以使用备用字体来提高网页加载速度和用户体验。

备用字体是指在无法加载首选字体时,浏览器会自动加载备用字体来显示文本内容。这样可以避免因网络问题或其他原因导致字体无法加载而影响页面的可读性。

在使用Google Fonts CDN时,可以通过在CSS样式表中指定多个字体来设置备用字体。当首选字体无法加载时,浏览器会按照指定的顺序逐个尝试加载备用字体,直到找到可用的字体为止。

以下是一个示例CSS样式表的代码,展示了如何使用备用字体:

代码语言:txt
复制
/* 设置首选字体 */
font-family: 'Open Sans', sans-serif;

/* 设置备用字体 */
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

在这个示例中,首选字体是'Open Sans',如果无法加载该字体,浏览器会依次尝试加载备用字体'Helvetica Neue'、'Arial'和'sans-serif',直到找到可用的字体为止。

使用备用字体的优势是可以提高页面的容错性和可访问性,确保即使在字体加载失败的情况下,用户仍然能够正常阅读和使用网页内容。

Google Fonts CDN是一个免费的字体库服务,提供了大量的开放字体供网页开发者使用。通过使用Google Fonts CDN,可以将字体文件托管在Google的服务器上,从而提高字体加载速度和全球范围内的访问性能。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络)。腾讯云CDN是一种分布式部署的网络加速服务,可以将静态资源缓存到全球各地的边缘节点,提供高速的内容传输和访问体验。使用腾讯云CDN可以加速Google Fonts CDN的字体加载,提高网页性能和用户体验。

腾讯云CDN产品介绍链接地址:https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

DW Replace Open Sans:将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN

针对最近因为Google fonts被墙导致WordPress 打开慢的问题,Jeff 在上一篇《Google Fonts导致WordPress 速度问题的三个解决方案》提出的方案中其中是禁止加载Google...fonts ,但是禁止后WordPress 后台的英文字体会变成你当前系统默认的——不好看。...为此Jeff 借助网络上的代码开发了这款插件,可一键将WordPress 后台中的open-sans字体加载源从Google Fonts替换为360的CDN 加载源。...2015.2.26更新:Google Fonts 已可正常访问,相关插件可卸,本文已失效 插件简介 之前网络上提供的将WordPress 后台中的open-sans字体加载源从 fonts.googleapis.com...Google Fonts替换为360的CDN加载源。

789100

DW Replace Open Sans:将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN

针对最近因为Google fonts被墙导致WordPress 打开慢的问题,Jeff 在上一篇《Google Fonts导致WordPress 速度问题的三个解决方案》提出的方案中其中是禁止加载Google...fonts ,但是禁止后WordPress 后台的英文字体会变成你当前系统默认的——不好看。...为此Jeff 借助网络上的代码开发了这款插件,可一键将WordPress 后台中的open-sans字体加载源从Google Fonts替换为360的CDN 加载源。...2015.2.26更新:Google Fonts 已可正常访问,相关插件可卸,本文已失效 插件简介 之前网络上提供的将WordPress 后台中的open-sans字体加载源从 fonts.googleapis.com...Google Fonts替换为360的CDN加载源。

81970

使用Google CDN服务提供的jQuery库

Google挺够意思,就提供了jQuery库,通过使用Google提供的jQuery库,Google的服务器和线路品质那自然是不在话下的。即提高了下载速度又减少了自己服务器的并发连接数。...用起来也很简单,直接在网页里引用Google服务器上的相关js文件就可以了。不过,如果引用多个js,就要插入多段的script。Google也提供了相应的办法,那就是google load。...,可以这样使用google.load("jquery","1.3.2"); 这样我们就从Google的最近的CDN镜像上加载了jQuery 1.3.2版的js库,接下来就可以正常写js代码了。...不过,即使是GoogleCDN镜像,下载也毕竟是需要时间的,万一代码库还没有下载完而浏览器已经解释到了下面的代码了怎么办?...我们可以设定在js库加载完以后才开始执行js: google.setOnLoadCallback(function(){//要执行的代码}); 更多有关google jsapi的相关介绍和文档,

1.3K100

使用 Google 字体加速服务,加快 WordPress 打开速度

以前给网页设置字体,需要读者的操作系统中安装相应字体才可以显示,所以之前在网页作品中,使用了其他的创意字体,那么需要生成相应的文字图片来替换,否则不会显示。...Google 在线字体服务 CSS3 引入了一个非常强大而且实用的属性 @font-face,这个功能就是 Web Fonts,可以直接使用安装在服务器端的字体,所以可以将选择好的字体,上传到服务器中,...然后使用 CSS3 新增的 @font-face 属性,来调用服务器上的字体,然后来渲染网页。...这样字体选择的余地就很大了,只需要有字体文件就可以,但是自己上传字体到服务器还是太麻烦,所以 Google 就推出了在线字体服务,大家可以实时看到字体的效果,然后获取代码直接引用这个字体!...加速 Google 在线字体 Google 字体很好用,很方便,WordPress 很多主题也使用Google 字体,但是 Google 在线字体在国内的速度不是很快,甚至有时候还无法打开,这也是

87830

Custom Beautify

字体样式修改 谷歌在线字体 本地自定义字体 字体样式的修改需要先引入相应的字体文件,此处推荐使用: 谷歌字体库 https://fonts.google.com/ 打开谷歌字体库, 输入预览字样,...,则使用备用字体cursive,备用字体可以写多个。...得到相应的字体文件。为了方便起见,我将其重命名为Candy.ttf。 将下载好的字体包放到本地文件夹下,这里推荐新建一个fonts文件夹。...fallback:需要使用自定义字体渲染的文本会在较短的时间(100ms according to Google )不可见,如果自定义字体还没有加载结束,那么就先加载无样式的文本。...关于font-family的写法,此处表示主字体用'Candyhome',若字体包内没有相应字体,则使用备用字体sans-serif,备用字体可以写多个。

2.3K20

如何在 WordPress 主题中使用本地托管的 Google 字体

前面我们介绍 WordPress 官方要求主题作者切换到本地托管字体,今天简单说说如何实现在本地托管的 Google 字体。...WordPress 主题的外部资源规则 一直以来,w.org/themes 上的存储托管主题,一直不允许使用第三方资源,包括第三方的图片,JavaScript 脚本文件,CSS 样式文件,网络字体以及其他资源...但是这条规则的唯一的例外就是 Google 字体,因为当时没有可靠的方法来实现本地托管的网络字体,而排版又是主题设计中的一个重要组成部分。...但是由于 GDPR 和隐私方面以及之前的案例的影响,Google 字体不再被视为本指南的例外。...如何本地托管的 Google 字体 WordPress 官方主题团队在很早之前就在 Github 发布了一段脚本教大家如何本地托管 Google 网络字体

59820

WordPress博客系统 WePublish 前端公益加速服务

谷歌前端库: 源地址:ajax.googleapis.com 替换为:gajax.cdn.wepublish.cn 已对外链做替换,可直接使用。...谷歌字体库: 源地址:fonts.googleapis.com 替换为:gfont.cdn.wepublish.cn 已对外链做替换,因为Google针对不同UA返回不同css,此项针对不同UA单独缓存...谷歌字体文件: 源地址:fonts.gstatic.com 替换为:gstatic.cdn.wepublish.cn 一般用不到,在引入字体的时候已做替换。...WordPerss静态文件库: 加速域名:wpstatic.cdn.wepublish.cn 使用方式例如: https://wpstatic.cdn.wepublish.cn/5.9.3/wp-includes...3.补充说明 使用公益服务请注意节操,一分钟内大于2000次访问请求将导致您的IP被封禁至少1小使用此服务请遵守中国有关法律法规,违法违规网站请勿使用此服务。

58430

Google Fonts导致WordPress 速度问题的三个解决方案

2015.2.26更新:Google Fonts 已可正常访问,相关插件可卸,本文已失效 Google Fonts导致WordPress 速度问题之原因 WordPress 自3.8+版本后加入了Google...Fonts(别问我Google Fonts是什么了),然后捏,因为近期敏感周期(35号),天朝发威,谷歌的一系列网站被彻底墙,包括Google Fonts 所在的googleapis.com 。...下面说明之: 方法一:【插件】禁止WordPress 后台加载Google Fonts 安装启用 Disable Google Fonts 或者 Remove Open Sans font Link from...Google Fonts替换为360的CDN加载源。...> fonts.useso.com 是国内360推出的常用前端公共库CDN服务之一,“由于众所周知的原因,只需替换一个域名就可以继续使用Google提供的免费字体库了。

2.2K90

你了解可显著提升加载性能的 103 Early Hints 状态码吗?

一般有以下几种: preconnect:在向服务器请求 HTTP 资源,首先要建立连接,而目前对于 js/css 大部分在 CDN 的第三方域名,在 HTML 页面指定 preconnect 可提前建立对该链接的连接...比如某些字体文件,可提前加载,避免出现页面已加载完成,而字体无法查看的问题。 在 Chrome 浏览器控制台,可查看每条资源的优先级。...而使用 Preload 提升性能的网站,占到了 25%,数据详见 2022 年 HTTP 年鉴之 HTTP 篇。...cdn2.ozone.ru/s3/frontend-ozon-ru-public/fonts/GT-Eesti-Pro-Display-Bold.woff2>; as=font; crossorigin...=anonymous; rel=preload, <//cdn2.ozone.ru/s3/frontend-ozon-ru-public/fonts/GT-Eesti-Pro-Display-Medium.woff2

81361

WordPress 首页加载速度(根本停不下来!)

其实一个出错的是Google的自定有搜索框,第二个是Google的开放字体服务;对于第一个确实没什么好的办法,只能暂时去掉了,如果要搜索指定站点的内容可以使用site修饰符例如在Google搜索框中输入...family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets"; 即可, 360网站卫士常用前端公共库CDN服务...这里提供了由360网站卫士CDN驱动的常用前端公共库以及和谐使用Google公共库&字体库的调用方法 fonts.useso.com 360网站卫士代理访问 由于众所周知的原因,只需替换一个域名就可以继续使用...Google提供的免费字体库了。...请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。

39020

网页中第三方字体加载优化方案

参数 auto :使用浏览器默认的行为; block :浏览器首先使用隐形文字替代页面上的文字,并等待字体加载完成再显示; swap :如果设定的字体还未可用,浏览器将首先使用备用字体显示,...当设定的字体加载完成后替换备用字体; fallback :与 swap 属性值行为上大致相同,但浏览器会给设定的字体设定加载的时间限制,一旦加载所需的时长大于这个限制,设定的字体将不会替换备用字体进行显示...Webkit 和 Firefox 中设定此时间为 3s; optional :使用此属性值,如果设定的字体没有在限制时间内加载完成,当前页面将会一直使用备用字体,并且设定字体继续在后台进行加载...,以便下一次浏览可以直接使用设定的字体。...url(/path/to/fonts/examplefont.eot)format('eot'); font-display: swap; } JS加载CSS改变字体 当然了也可以使用

2K50

Fonts最佳实践

://fonts.gstatic.com" crossorigin> Google Fonts提供了通过标签或@import语句来加载字体的选项。...如果你正在考虑使用自我托管的字体,请确认你的网站正在使用内容交付网络(CDN)和HTTP/2。如果不使用这些技术,自我托管的字体就更不可能提供更好的性能。欲了解更多信息,请参阅内容交付网络。...如果你的服务器很慢,没有使用CDN,或者没有使用HTTP/2,那么自营字体的性能就不可能更好。...用于生成字体子集的工具包括 subfont 和 glyphanger。 关于Google Fonts如何实现字体子集的信息,请看这个介绍 。...关于Google Fonts的API子集,请看这个 repo。 WOFF2:在现代字体中,WOFF2 是最新的,有最广泛的浏览器支持,并且提供了最好的压缩。

2.8K72

WordPress全局字体修改详细教程

下面介绍的更换字体主要分为两种,第一种是直接调用系统的字体,来替换原来主题的默认字体;第二种则是使用自己的字体文件,来实现字体的替换。...上传至网站服务器 这种方法面临这一种风险,中文字体库体积通常很大,比如我现在正在使用的思源黑体,一个 ttf 文件就有 8M 多,再加上国内服务器的小带宽,肯定导致网站加载时间大大加长。...上传至 Github 使用免费的 jsDelivr CDN 加速 jsDelivr 如何如何好用这边就不多说了,Github 怎么使用这边也不多说了,大体方法就是将你的字体文件上传至 Github 自己的仓库中...附上几个字体的调用链接(托管于 Github,使用 jsDelivr 加速服务) AdobeCleanHanSC @font-face {font-family: 'AdobeCleanHanSC';src...上传至云存储进行调用 在个人服务器上存储字体文件的话,服务器需要在加载网页,图片等的同时等待加载字体,但如果使用云存储调用的话就可以在很大程度上解决网站加载慢的问题。

1.3K20

详解android 中文字体向上偏移解决方案

在开发 webapp ,发现在 android 端的中文会莫名其妙的向上偏移。为了解决这个问题,尝试了很多方法,最后使用以下解决方案。...后来想到使用的是ubuntu,怀疑可能是系统默认字体的原因导致了这个问题。于是下载了一个字体文件(用的是“思源黑体”)。然后配置全局字体,发现可以解决这个问题。...2.第二个问题出现 虽然使用自定义字体解决了中文文字偏移的问题,但是由于字体文件太大导致性能很不理想。无论是将字体文件放到服务器还是使用 cdn 都不理想。最终找到了fontmin这个插件。...但没有关系,经过实验,使用一个只有0这个字符集的字体文件同样可以解决我们最初的问题。下面来看实现步骤。 3.1 字体下载 到网上下载一个中文字体,这里我使用的是google fonts。.../src/assets/fonts/my-font.ttf" // 字体源文件 var destPath = ".

1K10

WordPress全局字体修改详细教程

下面介绍的更换字体主要分为两种,第一种是直接调用系统的字体,来替换原来主题的默认字体;第二种则是使用自己的字体文件,来实现字体的替换。...上传至 Github 使用免费的 jsDelivr CDN 加速 jsDelivr 如何如何好用这边就不多说了,Github 怎么使用这边也不多说了,大体方法就是将你的字体文件上传至 Github 自己的仓库中...上传至云存储进行调用 在个人服务器上存储字体文件的话,服务器需要在加载网页,图片等的同时等待加载字体,但如果使用云存储调用的话就可以在很大程度上解决网站加载慢的问题。...总结 由于目前还没有很全的字体库,所以第二种方法应该使用的比较多的。...如果你的服务器带宽足够大,或者开了什么加速的话,将字体文件放在网站服务器上绝对是没什么问题的,但没有的话还是建议使用一个云存储来帮助你的网站加载那庞大的字体库。 P.S.

4.8K31

【网站优化经验】Wordpress的代码与功能简单优化

禁用谷歌字体 wordpress本身包含了大量的Google资源,比如谷歌Open sans字体,而现在谷歌被大陆GFW大规模屏蔽,严重影响了网站的访问速度。...针对这个问题,我们有两种有效的解决方案,第一,禁用谷歌字体,第二,使用谷歌字体镜像加速。 我们可以利用wordpress插件来实现禁用谷歌字体的效果。...Disable Google Fonts – 这是一个非常基本的WordPress的轻量级插件,不需要设置。你只需要安装并启用它就可以立即生效。...Remove Google Fonts References – 这也是一个很优秀的插件。没有任何设置,启用后会直接停止谷歌加载其字体,大大提升的了网站性能。 我们也可以利用代码来禁用谷歌字体。.../css    当然,你也可以使用中科大的Google字体加速服务,详情见官方doc。

1.1K00
领券