django-google-fonts 0.0.3

django-google-fonts让您可以轻松地在Django中使用Google字体，通过本地下载、重写和缓存字体和CSS文件。README.md 这意味着您可以享受使用Google字体的所有好处，但增加了对用户隐私、安全和速度的考虑，因为所有字体的请求都将发生在您的域上，而不是直接访问Google服务器。

服务器重启时，它将检查本地是否缺少任何字体，并在需要时加载它们。因此，对性能没有影响或考虑。在字体首次下载之后，django-google-fonts不需要向Google服务器发送更多请求，完全离线工作。

安装

pip install django-google-fonts

然后将其添加到您的Django设置文件中

INSTALLED_APPS = [
    ...
    'django_google_fonts'
]

使用

告诉Django您想要的字体

GOOGLE_FONTS = ["Kablammo", "Roboto"]

Django启动时将从Google获取字体并将它们存储在您的STATICFILES_DIRS目录中。它将重写Google Fonts提供的CSS，因此您只需要像平常一样加载字体即可。例如

<link rel="stylesheet" href="{% static 'fonts/pathwayextreme.css' %}">
<style>
    body {
        font-family: 'Pathway Extreme';
    }
</style>

还有一个返回原始CSS的font标签

    {% load google_fonts %}
    {% font_css "Pathway Extreme" %}

可以通过在URL中指定字体权重来提供自定义字体粗细。这样做的一种简单方法是访问字体页面，例如 Robot，然后选择您想要的粗细和样式。然后点击“所选家族”并复制字体定义。

例如，Google将建议使用此URL嵌入字体

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,700;0,900;1,700&display=swap" rel="stylesheet">

Roboto带有斜体，粗细为100、700、900。在Django中使用它时，您将指定

GOOGLE_FONTS = ["Roboto:ital,wght@0,100;0,700;1,700"]

并在样式表中引用它

<link rel="stylesheet" href="{% static 'fonts/roboto:ital,wght@0,100;0,700;1,700.css' %}">

可选设置

默认情况下，django-google-fonts会将字体存储在STATICFILES_DIRS指定的第一个目录中。这可能不是您希望的位置，因此您可以设置一个GOOGLE_FONTS_DIR设置，如果希望它在其他位置的话。

GOOGLE_FONTS_DIR = BASE_DIR / "fonts"
STATICFILES_DIRS = [BASE_DIR / "static", BASE_DIR / "fonts"]

CSS文件包含字体的路径，django-google-fonts会尝试通过使用STATIC_URL的值来计算字体路径。如果这个路径不正确，您需要将其设置为其他值。

GOOGLE_FONTS_URL = "my-exotic-static/url/to-the-fonts"

名称

Google字体通常具有首字母大写的名称，首字母大写。[^1]例如 Pathway Extreme。Google也会进行标准化：pathwayextreme，这被用于文件名。所以对于Pathway Extreme的情况

[^1]：例如IBM Plex Sans这样的字体，其首字母大写字母不仅仅是第一个字母。

如果您不确定，可以通过程序来获取字体，例如

>>> from django.apps import apps
>>> for font in apps.get_app_config("django_google_fonts").fonts:
...   print(font.name, font.slug, font.dest)
...
Kablammo kablammo /Users/a/c/examplefonts/static/fonts/kablammo
Roboto roboto /Users/a/c/examplefonts/static/fonts/roboto