Elementor自定义HTML小部件字体权重不生效及字体不显示问题

核心问题分析 #

• 字体链接位置错误：你将Google Fonts的<link>标签放在了<div.marquee>内部，不符合HTML规范，浏览器无法正确加载字体文件。
• Google Fonts URL格式错误：字体名称含空格，URL中需用+替换，且未指定加载900权重，导致粗体无法调用对应字体文件。
• CSS字体名称未加引号：带空格的字体名称在CSS中需用引号包裹，否则浏览器可能无法识别。
• 冗余HTML结构：Elementor自定义HTML小部件不需要完整的<!DOCTYPE html>、<html>、<head>、<body>标签，会与WordPress页面现有结构冲突。

修正后的代码 #

<!-- 加载指定权重的字体 -->
<link href='https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:wght@900' rel='stylesheet'>

<style>
.marquee {
  width: 100%;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 60s linear infinite;
  font-weight: 900;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
</style>

<div class="marquee">
  <span>KEEP SCROLLING &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KEEP SCROLLING</span>
</div>

额外优化建议 #

• 若WordPress主题已全局加载Plus Jakarta Sans字体，可直接删除<link>标签，避免重复加载。
• 可将动画和字体样式移至Elementor的网站设置 > 自定义CSS面板，代码更整洁且便于全局管理。

内容的提问来源于stack exchange，提问作者Playejdhs