如何在 CSS 文件中导入 Google Web 字体？

How to import Google Web Font in CSS file?

提问by David

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from within the CSS file?

我正在使用一个 CMS，我只能访问 CSS 文件。所以，我不能在文档的 HEAD 中包含任何东西。我想知道是否有办法从 CSS 文件中导入 Web 字体？

回答by ModernDesigner

Use the @importmethod:

使用@import方法：

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Obviously, "Open Sans" (Open+Sans) is the font that is imported. So replace it with yours. If the font's name has multiple words, URL-encode it by adding a +sign between each word, as I did.

显然，“Open Sans” ( Open+Sans) 是导入的字体。所以用你的替换它。如果字体的名称有多个+单词，就像我一样，通过在每个单词之间添加一个符号来对其进行 URL 编码。

Make sure to place the @importat the very top of your CSS, before any rules.

确保将 放在@importCSS 的最顶部，在任何规则之前。

Google Fonts can automatically generate the @importdirective for you. Once you have chosen a font, click the (+)icon next to it. In bottom-left corner, a container titled "1 Family Selected" will appear. Click it, and it will expand. Use the "Customize" tab to select options, and then switch back to "Embed" and click "@import" under "Embed Font". Copy the CSS between the <style>tags into your stylesheet.

Google Fonts 可以自动@import为您生成指令。选择字体后，单击(+)它旁边的图标。在左下角，将出现一个名为“1 Family Selected”的容器。单击它，它将展开。使用“自定义”选项卡选择选项，然后切换回“嵌入”并单击“嵌入字体”下的“@import”。将<style>标签之间的 CSS 复制到样式表中。

回答by Burk

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

Better to not use @import. Just use the link element, as shown above, in your layout's head.

最好不要使用@import。只需在布局的头部使用链接元素，如上所示。

回答by Shubham Kumar

Add the Below code in your CSS File to import Google Web Fonts.

在 CSS 文件中添加以下代码以导入 Google Web 字体。

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Replace the Open+Sansparameter value with your Font name.

将Open+Sans参数值替换为您的字体名称。

Your CSS file should look like:

您的 CSS 文件应如下所示：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}

回答by Fidel

Download the font ttf/other format files, then simply add this CSS code example:

下载字体 ttf/other 格式文件，然后只需添加此 CSS 代码示例：

@font-face { font-family: roboto-regular; 
    src: url('../font/Roboto-Regular.ttf'); } 
h2{
 font-family: roboto-regular;
}

回答by karunesh

1. Just go to https://fonts.google.com/
2. Add font by clicking +
3. Go to selected font > Embed > @IMPORT > copy url and paste in your .css file above body tag.
4. It's done.

1. 只需访问https://fonts.google.com/
2. 单击+添加字体
3. 转到选定的字体 > 嵌入 > @IMPORT > 复制 url 并粘贴到 body 标签上方的 .css 文件中。
4. 完成。

回答by MarcoZen

Along with the above answers, do also consider this site; https://google-webfonts-helper.herokuapp.com/fonts

除了上述答案，还要考虑这个网站； https://google-webfonts-helper.herokuapp.com/fonts

Advantage:

优势：

• allows you to self-host those google fonts for better response times

• choose your font(s)

• choose your character set
• choose your font styles/weight
• choose your target browser
• and u get the CSS snippets ( add to your css stylesheet ) plus a zip of the font files to include in your project

• 允许您自行托管这些谷歌字体以获得更好的响应时间

• 选择您的字体

• 选择你的字符集
• 选择您的字体样式/粗细
• 选择你的目标浏览器
• 并且您获得 CSS 片段（添加到您的 css 样式表）以及要包含在您的项目中的字体文件的 zip 文件

E.g your_theme.css

例如 your_theme.css

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}

回答by jmz7v

Use the tag @import

使用标签@import

@import url('http://fonts.googleapis.com/css?family=Kavoon');

回答by Eric Keyte

You can also use @font-face to link to the URLs. http://www.css3.info/preview/web-fonts-with-font-face/

您还可以使用 @font-face 链接到 URL。 http://www.css3.info/preview/web-fonts-with-font-face/

Does the CMS support iframes? You might be able to throw an iframe into the top of your content, too. This would probably be slower - better to include it in your CSS.

CMS 是否支持 iframe？您也可以将 iframe 放入内容的顶部。这可能会更慢 - 最好将它包含在您的 CSS 中。

回答by RohanVTK

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

To choose the font you can visit the link : https://fonts.google.com

要选择字体，您可以访问链接：https: //fonts.google.com

Write the font name of your choice from the website excluding the brackets.

从网站上写下您选择的字体名称，不包括括号。

For exampleyou chose Lobster as a font of your choice then,

例如，您选择 Lobster 作为您选择的字体，然后，

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

Then you can use this normally as a font-family in your whole HTML/CSS file.

然后您可以在整个 HTML/CSS 文件中正常使用它作为字体系列。

For example

例如

<h2 style="Lobster">Please Like This Answer</h2>

回答by subindas pm

Jus go through the link

只需通过链接

https://developers.google.com/fonts/docs/getting_started

https://developers.google.com/fonts/docs/getting_started

To import it to stylesheet use

要将其导入样式表，请使用

@import url('https://fonts.googleapis.com/css?family=Open+Sans');