标签: google-fonts

下载Google字体并设置使用它的离线网站

我有一个模板,它有一个像这样的Google字体的引用:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

Run Code Online (Sandbox Code Playgroud)

如何下载并将其设置为在我一直在线下运行的页面中使用？

css fonts offline google-fonts

use*_*954

2018 05-21

126
推荐指数

5
解决办法

14万
查看次数

颤动错误：没有名称为“displayLarge”的命名参数

我正在开发一个应用程序，两天前我在 git 上发布了最后一次更新，此后就没有再碰过代码。现在，我打开 android studio，当我尝试运行它时，它给了我这个错误...我尝试从计算机中删除存储库，然后再次克隆它，但它不起作用。我也尝试过搜索类似的问题，发现快速拨号包也存在类似的问题，并且一条评论提到了有关损坏的包版本的信息。无论如何，这是我尝试运行我的应用程序后遇到的错误：

这些是它给我的错误的前几行，但后面还有一千多行。

我还尝试运行flutter doctor，它给了我以下内容：

android dart flutter google-fonts flutter-packages

Kar*_*nić

lucky-day

23
推荐指数

4
解决办法

4万
查看次数

NextJS - Google 字体未加载或显示在网站上

按照文档并使用提供的代码添加 _document.js 文件：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Run Code Online (Sandbox Code Playgroud)

当我使用 chrome 扩展字体检查器并在检查器中进行验证时，它指出它使用默认字体。知道如何让它发挥作用吗？我使用 tailwindcss 可能会受到一些干扰吗？

fonts reactjs next.js google-fonts tailwind-css

Kri*_*jar

lucky-day

22
推荐指数

3
解决办法

3万
查看次数

如何修复确保在 webfont 加载期间文本保持可见

嗨，我在 google pagespeed 中遇到了这个问题，我几乎将我的网站速度提高到 100，唯一剩下的就是 Ensure text remains visible during webfont load

我已经在使用 font-display:swap; 那么为什么这不能解决我的问题。

这是我的外部字体 css

@font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 400;
      src: local('Miriam Libre Regular'), local('MiriamLibre-Regular'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdTh798HsHwubBAqfkcBTL_fZ5P7.ttf) format('truetype');
    }
    @font-face {
    font-display: swap;
      font-family: 'Miriam Libre';
      font-style: normal;
      font-weight: 700;
      src: local('Miriam Libre Bold'), local('MiriamLibre-Bold'), url(https://fonts.gstatic.com/s/miriamlibre/v5/DdT-798HsHwubBAqfkcBTL_X3LbrQsq_.ttf) format('truetype');
    }

Run Code Online (Sandbox Code Playgroud)

我使用这个命令生成了这个 css

npx local-webfont https://fonts.googleapis.com/css?family=Miriam+Libre:400,700 /Users/admin/Documents/projects/font.css 回退

我从https://github.com/swissspidy/local-webfont得到的

css webfonts google-pagespeed google-fonts

leo*_*cer

lucky-day

16
推荐指数

2
解决办法

2万
查看次数

如何在JSFiddle中包含Google字体？

我试图在jsFiddle中包含Google字体但没有成功.我将URL添加到"外部资源",但它包含在内<script>.

这是我想要包含的字体:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>

Run Code Online (Sandbox Code Playgroud)

webfonts jsfiddle google-fonts

Gus*_*avo

2018 11-22

15
推荐指数

1
解决办法

4957
查看次数

为什么我不能在 WordPress functions.php 中加入多个 Google 字体？

我正在使用这个 Google 字体文件wp_enqueue_style排队。这是我的代码：

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,400&family=Neuton:ital,wght@0,300;0,400;0,700;1,400&display=swap', [] );

这是在我的functions.php 文件中。

但是，当我在加载的页面上查看源代码时，该字体文件的 URL 被缩减为：https : //fonts.googleapis.com/css2?family=Neuton%3Aital%2Cwght%400%2C300%3B0%2C400% 3B0%2C700%3B1%2C400 &display=swap&ver=5.3.2

可以看到，第一个family参数在通过wp_enqueue_style. 有没有办法在不做任何黑客行为的情况下解决这个问题？我认为可能有一种过时的方法来为两种字体系列构建 URL，但我宁愿能够使用 Google 现在提供的内容。我里面的原始网址wp_enqueue_style是 Google Fonts 生成的供我嵌入的网址。

css php wordpress fonts google-fonts

the*_*ann

2021 03-10

15
推荐指数

2
解决办法

2417
查看次数

Next.js 从 Google Fonts 下载字体时总是失败

我第一次使用创建了一个新的 Next.js 项目create-next-app，并成功使用运行它npm run dev。

问题是每次 Next.js 启动时，它都会说：

FetchError: request to https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2 failed, reason: 
    at ClientRequest.<anonymous> (C:\Users\user\Desktop\documents\node_modules\next\dist\compiled\node-fetch\index.js:1:65756)
    at ClientRequest.emit (node:events:511:28)
    at TLSSocket.socketErrorListener (node:_http_client:495:9)
    at TLSSocket.emit (node:events:511:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'ENETUNREACH',
  code: 'ENETUNREACH'
}
- error Failed to download `Inter` from Google Fonts. Using fallback font instead.

Run Code Online (Sandbox Code Playgroud)

我的目标是让 Next.js 使用实际字体而不是后备字体。

我不知道为什么会发生这种情况，因为我还没有更改 Next.js 中的任何内容。即使在我的浏览器中打开 URL 也https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2能正常工作，所以我想这不是网络问题。

我尝试在Next.js文档中搜索，但没有找到任何重复项。

这是layout.tsx位于里面的src/app/： …

javascript typescript next.js google-fonts

Kev*_*our

2024 01-30

10
推荐指数

1
解决办法

7629
查看次数

Tailwind CSS 中的自定义谷歌字体（poppins）？

我想使用名为 poppins 的 Google 字体，这是该字体的 url https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap。有谁知道要这样做吗？

import fonts google-fonts tailwind-css

Mar*_*yah

2021 07-21

9
推荐指数

4
解决办法

4万
查看次数

如何通过 CSS 从 CDN 使用 Google Noto Color Emoji front

我有什么办法可以从 CDN使用Google 的彩色表情符号字体吗？我试图在 jsfiddle 中使用它，但不知道如何使用。

css google-font-api jsfiddle google-fonts

Mla*_*vic

lucky-day

8
推荐指数

1
解决办法

3473
查看次数

如何使用主题中本地存储的字体覆盖默认字体？

我正在使用 Quarto 构建一个网站，并尝试覆盖主题中的默认字体。（我的总体目标是使用本地谷歌字体而不是使用谷歌API）。

我的_quarto.yml样子是这样的：

project:
  type: website

format:
  html:
    theme: 
      light: [flatly, light.scss]

Run Code Online (Sandbox Code Playgroud)

确实light.scss看起来像那样。所有字体都在fonts/

/*-- scss:defaults --*/

/* lato-regular - latin-ext_latin */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v23-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('fonts/lato-v23-latin-ext_latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Run Code Online (Sandbox Code Playgroud)

我正在使用 chromium 中的开发人员模式来调查是否使用了本地文件。不幸的是，我的custom.scss ie，（light.scss）无法覆盖默认配置。

如何才能覆盖 api 的使用并使用本地字体呢？

css google-fonts quarto

Mic*_*l K

2023 02-16

8
推荐指数

1
解决办法

1219
查看次数