blocks|key|2564092|text|你只需为你想使用的每种字体点击“选择这个字体”，谷歌就会给你一个带有多种字体的link标签。还可以为每种字体包含多个link标签。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2564093|​|2564094|h1+{
++font-family:+Baloo;
}
h2+{
++font-family:+Roboto;
}|code-block|syntax|javascript|2564095|<link+href="https://fonts.googleapis.com/css?family=Baloo%7CRoboto"+rel="stylesheet">
<h1>Baloo</h1>
<h2>Roboto</h2>|2564096|2564097|entityMap^0|13|4|1M|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>You click "select this font" for each font you want to use, and google will give you a single <code>link</code> tag with multiple fonts. You can also include multiple <code>link</code> tags for each font.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
  font-family: Baloo;
}
h2 {
  font-family: Roboto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet"&gt;
&lt;h1&gt;Baloo&lt;/h1&gt;
&lt;h2&gt;Roboto&lt;/h2&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2564026|text|选择字体转到https://fonts.google.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2564027|Search，比如说Roboto+-+https://fonts.google.com/specimen/Roboto|unordered-list-item|2564028|
|2564029|Hit“|2564030|”，你会得到一个链接，像这样添加到你的html中：|ordered-list-item|2564031|2564032|2564033|<link+href="https://fonts.googleapis.com/css?family=Roboto"+rel="stylesheet">|style|CODE|2564034|注意:还可以通过为族设置管道来获得具有多种字体的一条线。|2564035|2564036|在您的<head>+tag|2564037|中添加此链接使用CSS选择带有font-family的字体。|2564038|2564039|如下例所示：|2564040|​|2564041|h1{
++font-family:+"Baloo"
}

p{
++font-family:+"Roboto"
}|code-block|syntax|javascript|2564042|<!DOCTYPE+html>
<head>
<link+href="https://fonts.googleapis.com/css?family=Baloo%7CRoboto"+rel="stylesheet">
</head>

<body>
++++<h1>Baloo</h1>
++++<p>Roboto</p>
</body>++++|2564043|2564044|entityMap|0|LINK|mutability|MUTABLE|url|https://fonts.google.com/|1|https://fonts.google.com/specimen/Roboto^0|6|P|0|0|J|14|1|0|0|0|0|0|0|0|25|0|0|0|3|6|0|F|B|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@$A|1O|B|1P|1|1Q]]|C|$]]|$1|D|3|E|5|F|7|1R|8|@]|9|@$A|1S|B|1T|1|1U]]|C|$]]|$1|G|3|H|5|6|7|1V|8|@]|9|@]|C|$]]|$1|I|3|J|5|F|7|1W|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|1X|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|20|8|@$A|21|B|22|R|S]]|9|@]|C|$]]|$1|T|3|U|5|6|7|23|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|24|8|@]|9|@]|C|$]]|$1|W|3|X|5|M|7|25|8|@$A|26|B|27|R|S]]|9|@]|C|$]]|$1|Y|3|Z|5|M|7|28|8|@$A|29|B|2A|R|S]]|9|@]|C|$]]|$1|10|3|-4|5|6|7|2B|8|@]|9|@]|C|$]]|$1|11|3|12|5|6|7|2C|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|2D|8|@]|9|@]|C|$]]|$1|15|3|16|5|17|7|2E|8|@]|9|@]|C|$18|19]]|$1|1A|3|1B|5|17|7|2F|8|@]|9|@]|C|$18|19]]|$1|1C|3|14|5|6|7|2G|8|@]|9|@]|C|$]]|$1|1D|3|-4|5|6|7|2H|8|@]|9|@]|C|$]]]|1E|$1F|$5|1G|1H|1I|C|$1J|1K]]|1L|$5|1G|1H|1I|C|$1J|1M]]]]

<ol>
<li><p>Go to <a href="https://fonts.google.com/" rel="nofollow noreferrer">https://fonts.google.com/</a></p></li>
<li><p>Search for say Roboto - <a href="https://fonts.google.com/specimen/Roboto" rel="nofollow noreferrer">https://fonts.google.com/specimen/Roboto</a></p></li>
<li><p>Hit "select this font" and you'll get a link to add to you html like this:</p></li>
</ol>

<p><code>&lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;</code></p>

<p>Note: You can also get one line with multiple fonts by piping the families.</p>

<ol start="4">
<li><p>Add this link(s) in your <code>&lt;head&gt;</code> tag</p></li>
<li><p>Use CSS to select the font with <code>font-family</code>. </p></li>
</ol>

<p>See example below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1{
  font-family: "Baloo"
}

p{
  font-family: "Roboto"
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Baloo&lt;/h1&gt;
    &lt;p&gt;Roboto&lt;/p&gt;
&lt;/body&gt;    </code></pre>
</div>
</div>
</p>


blocks|key|6092281|text|谷歌字体现在使用css2，上面的答案已经过时了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6092282|使用css2的解决方案是：https://fonts.googleapis.com/css2?family=Baloo&family=Roboto|offset|length|style|CODE|6092283|来源：google+fonts+doc+for+css2|6092284|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/fonts/docs/css2^0|0|D|1O|0|3|P|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>google fonts is now using css2 and the answers above are outdated.</p>
<p>the solution using css2 would be:
<code>https://fonts.googleapis.com/css2?family=Baloo&amp;family=Roboto</code></p>
<p>source: <a href="https://developers.google.com/fonts/docs/css2" rel="nofollow noreferrer">google fonts doc for css2</a></p>


blocks|key|4677573|text|根据需要使用任意数量，并将其作为样式表导入。https://fonts.google.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4677574|对于您的示例：|4677575|​|4677576|h1+{+font-family:+'Baloo',+cursive;+}
p+{+font-family:+'Roboto',+sans-serif;+}|code-block|syntax|javascript|4677577|<link+href="https://fonts.googleapis.com/css?family=Baloo"+rel="stylesheet">
<link+href="https://fonts.googleapis.com/css?family=Roboto"+rel="stylesheet">

<h1>heading</h1>
<p>paragraph</p>|4677578|4677579|entityMap|0|LINK|mutability|MUTABLE|url|https://fonts.google.com/^0|M|P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|14|8|@]|9|@]|C|$K|L]]|$1|O|3|G|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>Use as many as you want and import them as a stylesheet.
<a href="https://fonts.google.com/" rel="nofollow noreferrer">https://fonts.google.com/</a></p>

<p>For your example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1 { font-family: 'Baloo', cursive; }
p { font-family: 'Roboto', sans-serif; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet"&gt;
&lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;

&lt;h1&gt;heading&lt;/h1&gt;
&lt;p&gt;paragraph&lt;/p&gt;</code></pre>
</div>
</div>
</p>


<p>I know this is a short question, but how do you use multiple custom Google Fonts, i.e Baloo and Roboto, in the text?
In this example the text should be Roboto and headings should be Baloo.
Thanks for your time.</p>


How do you use multiple Google Fonts in a webpage?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我知道这是一个简短的问题，但如何在文本中使用多种自定义Google字体，即Baloo和Roboto？在本例中，文本应为Roboto，标题应为Baloo。耽误您时间，实在对不起。

问如何在一个网页中使用多种Google字体？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在一个网页中使用多种Google字体？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在一个网页中使用多种Google字体？
EN