标签: google-font-api

我需要在Intranet应用程序上使用一些谷歌字体.客户可能有也可能没有互联网连接.阅读许可条款,似乎是合法允许的.

我使用此HTML标记加载了3种不同大小的字体:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif">

Till~1/2周前,w3.org验证器支持HTML5; 现在它给出了这个错误:

 Line 14, Column 163: Bad value http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif for attribute href on element link: Illegal character in query: not a URL code point.

W3C Markup Validator现在不喜欢什么？

我用React.js和webpack构建了一个网站.

我想在网页中使用Google字体,因此我将链接放在该部分中.

谷歌字体

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

并设置CSS

body{
    font-family: 'Bungee Inline', cursive;
}

但是,它不起作用.

我怎么解决这个问题？

我使用wkhtmltopdf转换PDF格式的HTML文件; 它给出了令人惊讶的好结果,完全像WebKit那样呈现PDF.

我使用Google Web Fonts让用户可以自定义他们编辑的文档的外观,使他们可以选择几种字体.它也可以在浏览器中完美运行.

问题是,在使用wkhtmltopdf将此类HTML文件转换为PDF时,我无法使用Google字体.我读过其他人有同样的问题.

有人可以帮我解决这个问题吗？

编辑:直接在CSS中声明@ font-face也不起作用.

如何使用font-family lato？

我使用过这样的风格但没有用.我能怎么做 ？谢谢.

font-family: Lato, Helvetica, sans-serif;

链接:http: //www.google.com/fonts/specimen/Lato

Google字体似乎只在WOFF2中提供字体.

虽然这适用于Chrome,但很多其他浏览器似乎都不支持WOFF2

有没有办法以WOFF2以外的格式直接链接到CDN上托管的Google字体？

我通过Pingdom测试了我的网站,得到了这个:

我搜索但无法找到解决方案.有谁知道我怎么能得到14到100？

我正在尝试使用谷歌字体,我从来没有遇到任何问题,但现在当我尝试在我的标题上添加CSS文件时,我在控制台上收到此错误:

拒绝加载样式表,'http://fonts.googleapis.com/css?family=Whatever'因为它违反了以下内容安全策略指令:"style-src 'self' 'unsafe-inline'".

我想在我的网站上使用Google字体"Noto Serif".我的问题是,当我使用Google PageSpeed Insights进行测试时,它告诉我除了一件事之外我是完美的:

<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">

您的页面有1个阻止的CSS资源.这会导致呈现页面的延迟.在不等待加载以下资源的情况下,无法呈现页面上的上述内容.尝试推迟或异步加载阻止资源,或直接在HTML中内联这些资源的关键部分.

我知道这是一个糟糕的解决方案.它是使用<script>HTML文件底部的字体链接.该解决方案的问题是,每当您点击我网站上的某些内容时,它都会导致无格式文本的Flash.

我使用jekyll托管与GitHub页面,所以我不认为我可以安装Font Face Observer :(

我希望能够让用户选择他们希望页面显示的字体. 以下是Google建议您使用JavaScript执行此操作的方式.

WebFontConfig = {
    google: {
        families: ['Tangerine', 'Cantarell']
    }
};

(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();

如何修改这个以便我可以在页面加载后重新获取字体？