2022 年将在您的 WordPress 网站上使用 50 多种现代字体

已发表: 2020-08-28

创建 WordPress 网站时,您需要使用所有正确的工具来产生有效的影响。 这包括大量现代字体!

但是,您的 WordPress 主题可能没有您需要选择的 HTML 字体。 或者,您可能对为您选择的那些不满意。

由于这些因素,能够安装一些自定义字体是必不可少的。 我们今天将在这里讨论各种字体选项。 但首先,让我们先把技术问题排除在外。

真正使字体现代的原因是什么?

现代字体一点也不新鲜。 这种风格最初是在 18 世纪发展起来的。 尽管如此,他们的设计仍然适用于现代世界。 事实上,你几乎可以在任何地方看到它们。

那么,现代字体是什么样的呢?

现代字体清晰、时尚、大胆、专业和时尚。 它们也通常是无衬线字体(但并非总是如此),有时也属于草书字体类别。 它们的设计立即与众不同,并且经常用于标题和徽标中。 他们可以是明显的公司,但不具有侵略性。 相反,他们很大胆,需要注意。

这是使用现代字体的投资组合网站示例。

注意它是多么紧凑和狭窄?

克里斯·威尔海特
chriswilhitedesign.com

当然,这些都是一般性的。 现代排版已经发展,你也经常可以找到更多风格的例子。 但希望这能让您大致了解什么是现代字体(以及您可能想要使用一种字体的原因)。

借助 50 多个现代选项的列表,让您的字体变得花哨️ Click to Tweet

如何将下载的字体上传到 WordPress

从网上下载的自定义字体需要一些额外的工作才能让它们运行,因为您不能像谷歌字体这样的在线服务那样只导入它们。 相反,您需要手动上传字体或使用插件来完成这项工作。

但在您进行任何上传之前,您需要首先确保您的字体可用于网络。 我们的意思是什么? 好吧,并非所有字体都是网络安全的或直接与所有网络浏览器兼容。

但这并不是什么大麻烦。 只需使用免费的 Webfont Generator 工具将您在网上找到的任何自定义字体转换为所有 Web 浏览器都可读和可用的格式。

现代字体
将任何字体转换为网络安全字体

完成此步骤也将大大加快优化字体的速度。 然而,这还不是全部。 您还应该遵循一些提示,以确保您的自定义字体不会占用资源或不必要地减慢网站的加载时间:

  • 检查性能 使用 GTmetrix,监控 HTTP 请求的数量。 如果有很多,这可能意味着您的网站正在使用您甚至意识到的更多字体。 我在这里谈论的是与插件和主题一起自动安装的字体(不是您手动添加的字体)。
  • 检查您的分析。 在这里,您可以查看在您的网站上访问最多的字体容器格式。 最常见的选择是 EOT、TTF、WOFF 和 WOFF2。 在考虑要支持哪些时,这可以帮助您确定优先考虑哪些。
  • 确保字体在本地缓存。 这不像您每隔一天更新一次字体。 这意味着字体可以安全地缓存在常客的浏览器中。 随着时间的推移,这将限制 HTTP 请求的数量。

手动上传字体需要一些技术技能,但对于大多数网站所有者来说并非遥不可及。

  1. 下载您选择的自定义现代字体(下面有很多示例)。
  2. 保存您网站的备份(包括所有内容和数据库)和/或使用子主题进行以下更改。
  3. 将 .zip 中的字体文件上传到文件夹 wp-content/themes/your-theme-name/fonts。 如果没有“字体”文件夹,请继续制作一个,然后将您的 .zip 字体文件上传到那里。 使用您选择的任何 FTP 客户端来完成此操作。
  4. 在 WordPress 仪表板中,导航到外观 > 主题编辑器并访问 style.css 文件。 您需要向此文件添加自定义代码片段。 将适当的字体系列和 URL 添加到代码片段,然后单击更新文件
 @font-face { font-family: YOUR FONT NAME; src: url(http://sitename.com/wp-content/themes/themename/fonts/font-name.ttf); font-weight: normal; }

上面的代码将字体添加到您的网站。 接下来,您需要告诉 WordPress 应该在哪里使用字体。 为此,再次打开style.css并使用以下代码片段:

 .SITE ELEMENT { font-family: "FONT NAME", Helvetica, sans-serif; }

在此代码段中,您需要确定您希望字体应用到站点的哪个方面,并在更新文件之前指定字体名称。

相反,如果您想跳过所有这些手动上传的内容,您可以使用插件将字体添加到 WordPress。 一个可靠的选项包括使用任何字体。 顾名思义,您可以使用它将任何自定义字体上传到您的站点并将其分配给 CSS 元素。

2022 年使用的 56 种最现代的字体

现在您知道如何优化自定义字体并将其上传到 WordPress,我们现在可以提供一个健康的现代字体列表和可供选择的选项。

1. 介绍

现代字体:介绍
介绍

Intro 是一种标准外观的现代字体,提供粗体线条和演示文稿,可轻松用于标题或标题。 这个字体系列包括 72 种字体,从细到粗有 8 种不同的粗细,为您提供大量的灵活性。

2.科莫达

现代字体:komoda
科莫达

另一个选择是科莫达。 这种字体很简洁,看起来超级有趣。 它全是大写和无衬线字体,每个字母的中线都被抬高了。 它的连字是一个声明。 这里是徽标的完美选择。

3. 上火

现代字体:stoked
斯托德

Stoked 是另一个全大写选项,它为标题和徽标提供了独特的外观。 在保持清晰的同时很有趣。 它的定义特征是在每个字母上包含双线,以及赋予它一种模版外观的换行符。

4.优雅的玛丽莎

优雅的玛丽莎
玛丽莎

还有优雅的玛丽莎。 这种现代字体优雅流畅,为您的徽标和标题提供更薄、更精致的字体选项。 它具有非常有趣的连字、替代字形和装饰,以及为您想要分享的任何文本添加更多字符。

5.慢跑

慢跑
慢跑

Canter 是另一个不错的选择。 这是一种无衬线字体,具有所有大写字母并具有紧凑的间距。 它也有六种不同的权重,包括一个 3D 选项和一个带有突出阴影的选项。

6. 幸运

幸运的
幸运的

Lucky 是另一种值得考虑的现代字体。 这是另一种无衬线字体,可以很好地用作徽标或标题。 它还具有明显的编辑质量,可以很容易地应用于杂志和在线出版物。

7. 赛菲尔

现代字体:zafir
赛菲尔

Zafir 提供了另一种非常值得考虑的现代字体选择。 它在演示文稿中非常小。 Zafir 是另一个全大写选项。 这是一种带有曲线和整体有趣外观的衬线字体,可以很好地用于徽标和标题。

8. 海湾

海湾
科夫斯

或者你可以使用 Coves。 它具有两种粗细,浅色和粗体,并为您的最新项目提供优雅和流线型的字体选项。 也可以将它用于标准文本以及标题和页眉。 它确实是多用途的。

9. 阿佐尼克斯

阿佐尼克斯
阿佐尼克斯

Azonix 提供了另一种现代字体选择,这一次具有未来主义倾向。 这是一种强调几何外观的无衬线字体。 它都是大写的,看起来很容易被用在科幻电影的片头片尾中。

10. 方舟

方舟
方舟

Arkhip 是另一种免费字体选择,它保持现代设计,同时回想起过去的时代。 它使用俄罗斯字体的元素来创造现代和真正新的东西。

11. 总理

现代字体:素数
主要的

还有另一种字体需要考虑,称为 Prime。 这是一种现代的无衬线字体,具有粗体线条和整体的未来主义外观。 它有几何角,看起来非常适合未来主义或技术主题的网站。

12. 地球仪

地球仪
环球报

Glober 是另一种你应该看看的现代字体。 这个字体系列包括 18 种粗细,平均分割为 9 种竖线和 9 种斜体。 这是一种 san serif 字体,易于阅读且易于应用于多种不同情况,包括标题和正文。

13.温和

变得温柔
温柔的

MADE Gentle 是另一种值得考虑的现代字体。 它被认为是一种柔和的衬线字体,灵感来自 Cooper Black 字体。 这个大胆而圆润,让人想起 1970 年代的旧书封面和标牌。

14. 北欧

北欧的
北欧的

北欧既现代又经典,提供两种字体和三种重量可供选择。 该设计的灵感来自挪威符文,非常适合用于标题、标题和徽标。

15. 马达克

现代字体:maddac
马达克

Maddac 字体为您的网站提供了时尚的选择。 它是粗体、块状和无衬线字体。 它具有现代设计和独特的执行力。 每个字母都有一个微小的角度或倾斜于其设计的一个方面,为方程式提供了一点风格。

16.鳄鱼

鳄鱼
鳄鱼

Croc 是不是很酷的字体? 这是一款大胆的衬线字体,具有标志性的风格,既怀旧又不失新鲜感。

17. 水族

现代字体:aqua
水族

Aqua 是另一种你应该看看的字体。 这款具有新艺术风格的品质,使其显得永恒。 它大胆而简单,具有装饰和连字,使其从其他类似字体中脱颖而出。

18. 宣言

宣言
宣言

用宣言做一个大胆的声明。 这种字体受到意大利理性主义运动的启发,具有明显的编辑品质。 将其用于标题、徽标和标题。 将其用于印刷和在线设计。 它以这种方式真正多才多艺。

19. 奥克尼

奥克尼
奥克尼

Orkney 是一种可爱的专业字体。 该字体采用几何设计,可用于多种用途。 将其用于标题或徽标。 将其用于标准文本。 在印刷或数字媒体中使用它。 天空是这里的极限。

20. 艾尔帕

埃尔帕
埃尔帕

Elppa 具有未来主义的外观,既迷人又多面。 字体非常简约,同时也捕捉到了太空时代的感觉。 将其用于印刷和网页设计。 它适用于徽标和标题,可能不适用于正文,但绝对适用于图形等。

21. 玉米

玉米
玉米

Corn 是一种有趣的字体,具有圆角和农场风格的感觉。 它包含 14 种不同的样式,您可以立即开始使用它们来制作标题、标题和徽标。 如果您愿意,某些样式甚至可以用于正文。 你可以用这个建立一个完整的网站设计。

22.科利科

科利科
科利科

或者你可以选择 Koliko,这是一种非常有趣的字体,可以立即用于各种用途。 它具有三种款式,每种款式都完美融合了形式和功能。

23. 怪癖

现代字体:怪癖
怪癖

Quirk 实际上是一种看起来很古怪的字体。 它的名字是一个不错的选择。 这是一种全大写字体,包括有趣的连字和可堆叠元素。

24. 法语

法语
法语

Le French 是一种复杂的字体选择,特别是如果您想复制那种复古的法式咖啡馆感觉。 各地菜单和食品相关网站的绝佳选择。 也可以将它用于标题、标题、徽标和正文。

25. 慕尼黑

慕尼黑
慕尼黑

慕尼黑是一个可爱的无衬线字体选择,将是徽标或标题图形的绝佳选择。 它高高耸立,气势磅礴,毫无威胁。

26. 西北

西北
西北

Northwest 是一种现代风格的字体,具有复古的感觉。 它让人想起竞选装备标志和户外杂志标题。 带有四四方方的衬线和装饰元素,这种字体适用于任何类型的户外主题内容。

27. 摩德卡

摩德卡
摩德卡

Modeka 是四四方方和现代的,老实说只是超级酷。 这是一种现代选择,可以以多种方式进行调整。 每个字母都增加了角度,它提供了一种独特的风格,可能正好适合您的下一个项目。

28. 免责声明

免责声明
免责声明

免责声明是一种窄而粗的字体选择,非常适合各种用途。 它有一种超级简洁的风格,使字母高高耸立。 这对于标题或标题非常有用。

29. 第五大道

第五大道
第五大道

第五大道非常适合官方标志和品牌的经典空气。 这是一种带有衬线的粗体字体,由于大量增加风格和趣味的替代字母而脱颖而出。

30. 夸基兹

现代字体:quakiez
夸基兹

Quakiez 是另一种现代字体选择,它为我们的列表提供了衬线选项。 它的设计考虑到了奢华,但仍然保持着极简主义的元素。 它有两种样式,可用于徽标、标题、标题等。

31. 现代户外

现代户外
现代户外

或者,您可以选择 Modern Outdoor 并立即调用露营和户外活动。 这种字体非常适合标题、标题和徽标,并且会对海报产生真正的影响。 它需要引起注意,并且在所有大写字母中都非常漂亮,进一步确保了它的户外感觉。

32. 双曲线

现代字体:双曲线

双曲线圆润且充满未来感。 事实上,它看起来很有空间感——以一种很好的方式。 这种字体具有圆形计数器,同时保持整体四四方方的形状。

33. 拳击

拳击
拳击

Boxing 字体四四方方且干净,非常适合标题、标题和徽标。 都是大写的,高大的,看起来很有趣。 最重要的是,它非常实用,可以通过无数种方式重新利用。

34. 松德

发声器
松德

Sonder 确实是另一种多面字体。 它带有平板和无衬线字体选项。 它具有多种重量以及常规和粗糙的风格。 粗犷的风格在字母中有一些空隙,营造出质朴自然的外观。

35. 龙目岛

龙目岛
龙目岛

Lombok 是一种非常优雅的细字体。 这是一个带有几何元素的无衬线选项,使其脱颖而出并显得非常独特。 它是标题、徽标和标题的理想选择。

36. 分布

发行
分布

Distrito 是一种具有独特风格的全大写字体。 每个字母都略微倾斜,提供独特的外观,可以很好地翻译用于徽标和标题。 它也是受哥伦比亚模块化设计启发的全大写字体。

厌倦了缓慢的主机? Kinsta 在构建时考虑了速度和性能。 查看我们的计划

37. 副翼

副翼
副翼

副翼看起来像外星人标牌上出现的字体。 它很好地实现了这种美学。 它是无衬线字体和所有大写字母,无论您将它放在哪里都会产生影响,尽管标题和标题最适合它。

38. 民族

现代字体:ethna
民族

Ethna 外观经典,但风格现代。 这是一个受人文主义设计启发的无衬线字体系列,很好地将复古和现代设计元素结合起来,创造出新的东西。 这个适用于任何用例。

39. 诺艾尔

诺艾尔
诺艾尔

Noelle 是一种几何衬线字体,准备给人留下积极的第一印象。 它的设计极简,适用于任何行业的标题和标题。 它有一些复古元素,但看起来仍然很新鲜。 在线或打印使用它。 此外,它还附带一个脚本字体作为奖励。

40. 续集

续集
续集

Sequel 是一种圆形字体,非常适合徽标和标题。 最重要的是,它带有大量连字,可为您使用它们创建的任何内容提供风格并增加兴趣。 这里的设计大胆但不气势。

41. 更高

更高

Higher 是另一种复杂的字体选择,提供经典的外观。 这种全大写字体非常简洁且要求很高,可为您使用的任何内容提供即时风格。

42.纳米

纳米
纳米

Nano 是一种非衬线字体,具有未来派的外观并且全部为小写,使其成为此列表中的独特选项。 字母本身非常现代且可识别,使其成为徽标和其他品牌材料的绝佳选择。 但是,最好使用短句,因为较长的句子可能有点难以辨认。

43.乔林

乔林
乔林

Jollin 是一种现代字体,在一些字母上带有卷曲提示和全方位的厚实外观。 这种无衬线字体有常规和斜体两种版本,包括各种替代字母,因此您可以根据自己的心情使文本看起来更简单或更漂亮。

44.现象

现象
现象

Phenomena 是一种带有圆形边缘的窄而块状的字体。 它是一个声明,可以很容易地用于标题、徽标或标题。 它有 7 种不同的样式,从细到粗,也提供了大量的标准文本使用机会。

45.口径

口径
口径

Calibre 是一种超级简洁的字体,如果你愿意的话,它可以凌驾于你的内容之上——这是一种很好的方式。 它是一个全大写选项,还包括数字、字形和西方字符,以方便衡量。

46. 星期日

星期日
星期日

Sundays 是一种绝对属于当今时代的衬线字体,但也具有不可否认的经典感觉。 它比经典的类似字体更薄、更弯曲,并且具有适合杂志标题和标题、网站徽标、标题等的样式。

47. 基石

基石
基石

Cornerstone 是另一种块状字体,它提供模块化设计,可以在从徽标到标题的许多不同应用程序中工作。

48. 一日

一天
一天

One Day 是一种细字体,带有有趣的断开线条,使其独一无二。 这是另一种全大写字体,风格轻薄。 它包括数字和字形,感觉几何而不是太四四方方。

49. Kollektif

集体活动
科莱克提夫

Kollektif 是一种经典的现代字体,可以以多种方式使用。 它采用几何设计,有两种重量。 它还针对打印和网络使用进行了优化。

50. 怀旧之情

现代字体:怀旧
怀旧之情

然后是 Nostalgia,这是一种现代字体,具有足够的复古魅力,让人感觉好像它是几十年前创造的。 它包括 3 种字体以及替代字形、连字和花朵。 它将是徽标、标题、海报或邀请函的绝佳选择。

51.艾丽西亚

艾力夏
艾丽夏

Elixia 有着与炼金术士的巢穴相称的空灵外观。 它是几何图形,每个字母上都有额外的线角,提供独特的风格。

52. 三文鱼

三文鱼
三文鱼

或者你可以选择鲑鱼。 这种无衬线字体粗体且极简。 它是标题、徽标和页眉的理想选择。 这是一个全大写设计,包括一个填充和轮廓的版本,也可以很好地搭配在一起。

53.蒂努

瘦身
蒂努

Thinoo 是另一种无衬线字体。 它具有细而粗的样式,包括所有字母样式,包括数字、符号和标点符号。 它既专业又干净。 简单却夺人眼球。 这适用于任何类型的网站以及印刷材料。

54. 夏天的爱

夏天爱
夏天的爱

或者您可以使用 Summer Love,这是一种超级有趣的现代字体,包含多种字体样式,因此您可以仅使用一种字体创建整个设计。 它带有 sans 字体和画笔细节,可以立即为您的项目添加尺寸。 它还包括连字和替代字母。

55. Silverfake

银假
银假

Silverfake 为标题、徽标、页眉和印刷材料提供了宽间距的衬线字体选项。 例如,这个作为 T 恤标志看起来很棒。

56. 维也纳

维也纳
维也纳

最后是维也纳。 这种现代字体是一种衬线选项,具有杂志封面上使用的经典字体的所有吸引力,并经过足够的修改以吸引当今的美学。 它是最小的,包括全大写字母、数字和标点符号。

如果现代字体正是您的 WordPress 网站所需要的,您将需要查看本指南,了解 50 多个新选项点击鸣叫

概括

您可能希望在 WordPress 网站上使用自定义字体的原因有很多。 无论您是想更好地适应您的品牌,还是让您的内容在所有浏览器中更具可读性,上传您自己的现代风格字体都是值得的。

即便如此,这个过程起初似乎令人生畏。 您必须找到一种字体,下载它,将其放入 .zip 文件中,然后使用 FTP 客户端将其上传到您网站上的正确目录。 您需要将代码片段粘贴到主题 CSS 文件的适当区域。 您可以选择手动或通过使用插件(或者您可以聘请开发人员)来执行此操作。

但是,无论您如何处理此过程,您都可以放心,最终结果将是时尚的,并为您的网站的整体外观增添特色。 希望我们在这里策划的这一系列现代字体将帮助您找到适合您的 WordPress 网站的字体。 无论是粗体还是细体,圆润还是粗犷,点缀还是素色,您选择的字体都会产生影响!

(推荐阅读:如何在 WordPress 中隐藏页面和帖子标题)