如何在下一个网页设计项目中使用Google字体

by Hayden Mills

通过海登米尔斯

So you’ve probably heard that Google has hundreds of free web fonts ready to be used for your next project. But how do you use them on your website? This article will walk you through the steps to take in order to get them running on your website. It should take less than 10 minutes!

因此，您可能听说过Google提供了数百种免费的网络字体，可用于您的下一个项目。但是如何在网站上使用它们？本文将引导您逐步执行使它们在您的网站上运行的步骤。它应该少于10分钟！

什么是Google字体？ (What are Google Fonts?)

“Google Fonts first launched in 2010 as an engineering initiative to move the web forward and make it faster.” — Google Design

“ Google字体于2010年首次启动，这是一项工程计划，旨在推动网络向前发展并加快速度。” -Google设计

Google Fonts launched in 2010, quickly becoming the Internet’s largest, free, open-source selection of fonts. All Google Fonts are free for commercial and personal use. The Google Fonts website makes it easy for anyone to quickly select and utilize different fonts for their own design needs.

Google字体于2010年推出，Swift成为Internet上最大的免费开放源代码字体选择。所有Google字体均免费提供给商业和个人使用。 Google字体网站使任何人都可以轻松地快速选择和使用不同的字体来满足自己的设计需求。

谁使用Google字体？ (Who uses Google Fonts?)

Everyone does! Graphic designers, UX designers, researchers, developers, web designers, bloggers, social media managers, entrepreneurs, artists, students, teachers, photographers, and many more. I’ve seen Google Fonts used on billboards, posters, presentation decks, wedding invitations, websites, and books.

每个人都做！平面设计师，UX设计师，研究人员，开发人员，网页设计师，博客作者，社交媒体经理，企业家，艺术家，学生，老师，摄影师等。我看过Google字体用于广告牌，海报，演示文稿甲板，结婚请柬，网站和书籍。

谁创建字体？ (Who creates the fonts?)

Google Fonts collaborates with type designers, type foundries, and the design community all over the world. These people and organizations design the fonts that you see on Google Fonts. For example, Łukasz Dziedzic is an independent typeface designer who designed the popular typeface, Lato. A typeface foundry named ParaType designed the typeface PT Serif.

Google字体与世界各地的字体设计师，字体铸造厂和设计社区合作。这些人和组织设计您在Google字体上看到的字体。例如， ŁukaszDziedzic是一位独立的字体设计师，他设计了流行的字体Lato 。名为ParaType的字体铸造厂设计了PT Serif字体。

Google为什么要关心字体？ (Why does Google care about fonts?)

Every Google Fonts API link on a website gives Google the opportunity to do more data mining. Does that sound gross? Yes, but I don’t think it should stop you from using Google Fonts.

网站上的每个Google Fonts API链接都为Google提供了进行更多数据挖掘的机会。这听起来很恶心吗？是的，但我认为这不会阻止您使用Google字体。

Another more comforting reason Google cares about fonts is because they want to make open-source web fonts accessible to the masses. They want to make a faster, more beautiful web that is easier to navigate and use. They also started Google Fonts back in 2010 when a service like this was much needed, so they solved yet another problem we were having on the Internet. #dontbeevil

Google关心字体的另一个更令人欣慰的原因是，他们希望使大众可以访问开源Web字体。他们希望制作一个更快，更漂亮的网站，以便于浏览和使用。他们还于2010年启动了Google字体，当时迫切需要这样的服务，因此他们解决了互联网上的另一个问题。 #dontbeevil

我为什么要考虑使用它们？ (Why should I consider using them?)

You can’t beat free. Am I right? On top of being free, you should consider using Google Fonts on your next web design project because…

你不能击败自由。我对吗？除了免费之外，您还应考虑在下一个网页设计项目中使用Google字体，因为…

The fonts are easy to implement on your website字体易于在您的网站上实现
There are over 850 fonts to choose from (and counting)有850种以上的字体可供选择(并且还在不断增加)
The overall quality of the fonts continues to increase字体的整体质量持续提高
Google Fonts are also downloadable for print useGoogle字体也可以下载供印刷使用

Okay, okay, okay! Now on to how you use them.

好的，好的，好的！现在介绍如何使用它们。

如何使用Google字体-逐步介绍 (How to Use Google Fonts — Step by step)

1)前往Google字体网站 (1) Go to the Google Fonts website)

Visit the Google Fonts website where you will be able to choose from 853 font families and counting! The website allows you to filter results by font style, languages, popularity, and weight. Google Fonts also features new fonts if you visit the “featured” page.

访问Google字体网站，您可以从853个字体家族中进行选择并进行计数！该网站允许您按字体，语言，受欢迎程度和粗细过滤结果。如果您访问“精选”页面，则Google字体还会添加新字体。

2)搜索喜欢的字体 (2) Search for fonts you like)

If you have a font family name in mind you can search for it.

如果您有字体家族名称，可以进行搜索。

3)当您准备使用它时，请单击“ +” (3) Click “+” when you are ready to use it)

Each font family has a plus button in the upper right hand corner. Click the plus button to add the font family to the “selection drawer” that appears at the bottom of the screen.

每个字体系列的右上角都有一个加号按钮。单击加号按钮，将字体系列添加到屏幕底部显示的“选择抽屉”中。

4)如果您要使用多种字体，请重复步骤1-3。 (4) Repeat steps 1–3 if you are looking for more than one font to use)

5)点击“选择抽屉”以显示您选择的所有字体 (5) Click the “selection drawer” to show all the fonts you’ve chosen)

The “selection drawer” is where you will see all the fonts you’ve added. It’s where you will find the code to add to your website. You also have the option to download the fonts to your desktop.

在“选择抽屉”中，您将看到添加的所有字体。在这里，您将找到要添加到您的网站的代码。您还可以选择将字体下载到桌面。

6)在“选择抽屉”中，您将获取要复制/粘贴到网站中的代码HTML和CSS代码 (6) The “selection drawer” is where you will grab the code that you will copy/paste into your websites HTML and CSS code)

From the “selection drawer,” you will copy the code to paste in your HTML and CSS. In order for Google Fonts to work on your website, you must have both the font family linked to the Google Fonts API (in the HTML) and you must have the font family specified (in the CSS).

在“选择抽屉”中，您将复制代码以粘贴到HTML和CSS中。为了使Google字体在您的网站上正常工作，您必须同时将字体系列链接到Google Fonts API(在HTML中)，并且必须指定字体系列(在CSS中)。

7)如果需要，可以通过单击“自定义”选项卡来添加不同的字体粗细和样式 (7) Add different font weights and styles if you wish by clicking the “customize” tab)

This is your last chance to add different font weights and styles to your font families before adding them to your website. Only add the font weights and styles you know you will need, because the more fonts you add the slower they will load on your site.

这是您在将字体粗细和样式添加到网站之前向它们添加不同的字体粗细和样式的最后机会。只添加您需要的字体粗细和样式，因为添加的字体越多，加载到网站上的速度就越慢。

8)复制HTML代码并将其粘贴到您网站的<head> (8) Copy the HTML code and paste it in your website’s <head>)

Alright we are almost done! All we need to do now is copy and paste the HTML and CSS code into your website. First, copy the HTML link into the head of your HTML doc.

好了，我们快完成了！我们现在需要做的就是将HTML和CSS代码复制并粘贴到您的网站中。首先，将HTML链接复制到HTML文档的标题中。

9)复制CSS规则并将其粘贴到您网站CSS文件中 (9) Copy the CSS rule and paste it in your website’s CSS file)

Finally, we also need to copy and paste the CSS rules into your CSS file. If you’re adding one Google Font for your website, you can add the CSS font family rules into your body tag. Otherwise, you will need to be sure you are adding it to the correct elements in your CSS files.

最后，我们还需要将CSS规则复制并粘贴到您CSS文件中。如果您要为网站添加一种Google字体，则可以将CSS字体系列规则添加到body标记中。否则，您将需要确保将其添加到CSS文件中的正确元素中。

10)保存两个文件(HTML和CSS)，然后刷新您的网站并查看新字体 (10) Save both files (HTML and CSS) then refresh your website and view the new font)

Don’t forget to save and refresh!

不要忘记保存和刷新！

There ya go! You have successfully implemented your first Google Font on your website. Congrats, you coder you. It’s fair to say Google Fonts are basically…

有呀！您已成功在网站上实施了第一个Google字体。恭喜，您编码了。可以说Google字体基本上是…

谢谢阅读 (Thanks for reading)

Feel free to leave a comment below or reach out to me on Twitter with any questions ✌️

如有任何疑问，请随时在下面发表评论或在Twitter上与我联系 ✌️

Also, I’m the creator of Font Pair, which helps you pair Google Fonts together. Checkout our new Medium publication to read more typography posts!

另外，我还是Font Pair的创建者， Foot Pair可以帮助您将Google Fonts配对在一起。查阅我们的新的Medium出版物以印刷文章！

翻译自: https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/