门头沟网站建设：如何不用插件在WordPress中使用下载的字体

2019.05.24 门头沟网站建设

谷歌字体是一个惊人的资源。在此之前，制作使用独特字体的网站是一件很痛苦的事。不过，现在几次点击和一段代码，你的网站从赫维到Helvetic-太棒了。但是如果你喜欢的字体不是谷歌字体家族的一部分呢？你需要知道如何使用下载的字体，因为你发现了一种神奇的时髦字体它代表着你胡须的灵魂.

在你的网站上使用下载的字体并不像点击粘贴一样简单。这不是一个很难的过程，请注意，我要带你走过，这样你就永远不会有赫维再来一次网站。

现在，门头沟网站建设想指出，你可以通过一个插件来完成这个任务。在回购中有几个可用的。但我们为什么要这么做？我是那种喜欢避免使用插件的人，因为几行代码会做同样的事情。过多的插件会导致大量的膨胀，不必要的HTTP请求，并减慢您的站点。

所以我们要手工导入这些字体-就像90年代末一样。啊，是啊。

选择和下载字体

我是个大书迷。优雅的主题有一吨你可以扫描看看你喜欢什么。所以来点这些看看你喜欢什么。

· 手写字体

· 复古字体

· 高档字体

· 草书字体

· 潮人字体

· 有趣的字体

对我来说，我要和Aventura字体来自Hipster的总结性.

第一步是找到字体的下载链接，并将文件保存到计算机中。很可能是.zip包含各种文件格式的文件。最常见的是.ttf(TrueType字体)或.otf(OpenType字体)

制作网络字体(Kinda可选，但不是真正的)

方松鼠你可以使用的一个很好的工具以确保没有人和没有浏览器不兼容您的网站的辉煌。由于您下载的大多数字体只能以一种格式可用，所以FentScaprel工具使您不受字体作者分发的字体的限制。只要您有使用字体的权限，就可以确保它与您的产品/站点一起工作。

只需上传您最近下载的字体，并选择您的选项。就门头沟网站建设而言，我使用专家选项，只是为了获得所有的字体格式，我可以。其他文件可以工作，但是文件类型不多，这是整件事情的重点。

FentScaprel也很棒，它为您提供了将它们导入到您的站点所需的CSS。这对用户来说怎么样？您只需复制并粘贴到(我们将在下面处理)。

将字体上传到WordPress

完成后，您将需要上传字体到您的主机提供商。我总是通过FTP(我使用FileZilla，但你可以使用任何你想要的客户)。

如果您不知道主机的FTP信息，请进入您的cPanel并查看下面文件->FTP帐户.

您将看到主机的每个FTP帐户，还应该看到配置FTP客户端每个链接旁边的链接。

当您进入其中时，cPanel将为您提供服务器信息或FileZilla(和其他文件)文件，您可以导入这些文件以获得您的凭据集。门头沟网站建设喜欢手工操作，但你想做什么就做什么。即使使用该文件，也需要密码登录，因此这两种方法都是安全可靠的。

现在您已经通过FTP登录到主机，请导航到/wp-内容文件夹为您的网站。因为这是你的WordPress网站的内容，你为什么不把它放在那里呢？随便把它放在哪里，即使在/wp-内容/上载。你做你自己。

FTP是超级容易上传您的文件。只需找到您下载的字体文件，并将其拖到FileZilla的右下角窗格中。开始上传。在目录中看到它的时间不会超过一秒钟。

如果您使用了我们前面讨论过的FentScaprel工具，您也将对从它们下载的所有字体文件执行此操作。只要把它们拖放到你想存放的地方就行了。

将字体与CSS结合使用

您的字体现在上传，并安全地依偎在它温暖，舒适的wp内容毯子。是时候将所需的CSS导入添加到主题中了。

转到您的子主题目录(您使用的是子主题，对吗？)在FTP客户端中找到Style.css文件，右键单击它，然后选择View/Edit在默认文本编辑器中打开它。

如果没有子主题，请使用奥比修斯儿童主题创造者做得超快。你以后可以删除插件。我喜欢这东西。

@字体

门头沟网站建设使用的代码直接来自于FentScaprel(您可以编写自己的代码或复制/粘贴下面的示例)，而我所更改的只是URL上传路径/wp-内容。其他的一切都是Web字体生成器提供的。

这一切@字体脚本就是告诉你网站的样式表，“嘿，伙计，如果你愿意的话，我会把这个新字体放在这里。”就像你把纸杯蛋糕带回家告诉和你住的人一样。

无@字体，如果你想打电话字体-家庭：‘aventurabold’；通过CSS，您的站点将无法找到它，因为它从来没有被告知您在哪里保存它。

@font-face {

font-family: 'aventurabold';

src: url('/wp-content/aventura-bold-webfont.eot');

src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),

url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),

url('/wp-content/aventura-bold-webfont.woff') format('woff'),

url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),

url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');

font-weight: normal;

font-style: normal;

}

保存该文件，因为您打开它通过FileZilla进行编辑，您将得到一个对话框，询问是否要替换服务器上的文件。很明显，你的回答是肯定的。

现在你要做的就是Custom.css(或者如果你用Divi，>主题选项->自定义CSS在您的WP仪表板的导航窗格中。)

您只需添加CSS样式，就像添加任何其他字体一样。我只是替换了“机器人”和“Exo”谷歌字体‘aventurabold’，一切都很顺利(多亏了@字体(上述进口)。

body {

font-family: "aventurabold", arial, sans-serif;

font-size: 18px;

line-height: 28px;

color: #ffffff;

text-transform: uppercase;

}

h1, h2, h3, h4, h5, h6 {

color: #fff;

font-family: 'aventurabold', sans-serif;

font-weight: 700;

text-transform: uppercase;

}

我们劳动的果实

这是以前的样子：

下面是我将Aventura添加到CSS之后发生的事情：

万岁！它起作用了!做得好!冲我们走！

看上去不错，朋友

就像马尔科姆·雷诺兹船长曾经说过的那样：“我们做了不可能的事，这使我们变得强大。”好的，所以上传一个字体并通过CSS导入它可能并不等于做了不可能但是你确实做了很多WordPress用户不敢做的事情：在没有插件的情况下添加核心功能。

我的朋友们，这确实会让你们变得强大。

那么，你最喜欢在网络上使用的字体是什么，而不是谷歌字体呢？在评论中告诉门头沟网站建设！