I am new to web development and I am trying to make a simple web game using python 3.7 with django as web framework combined with the channels package for using web sockets.
I am trying to use custom fonts for the game UI. I used the css local() function to make sure the fonts aren't sent if the client has them already installed on his system as it says here:
It's common to use both
url()andlocal()together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.
However, it seems that the django development server sends me those fonts although I already have them installed on my machine.
Here's my html templates and css:
core/templates/core/base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if title %}
<title>Stratego - {{ title }}</title>
{% else %}
<title>Stratego</title>
{% endif %}
<link rel="stylesheet" href="{% static "core/css/style.css" %}">
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
core/templates/core/game.html:
{% extends "core/base.html" %}
{% load static %}
{% block content %}
<h1 class="main-header">Hello</h1>
<div class="regular-text">Hello</div>
{% endblock content %}
core/static/core/css/style.css
body {
margin: 0;
padding: 0;
background-color: black;
color: white;
}
/* ########## Alegreya ########## */
/* Regular */
@font-face {
font-family: "Alegreya";
src: local("Alegreya"),
url("/static/core/fonts/Alegreya-Regular.ttf") format("truetype");
}
/* end Regular */
/* Bold */
@font-face {
font-family: "Alegreya";
src: local("Alegreya"),
url("/static/core/fonts/Alegreya-Bold.ttf") format("truetype");
font-weight: bold;
}
/* end Bold */
/* Italic */
@font-face {
font-family: "Alegreya";
src: local("Alegreya"),
url("/static/core/fonts/Alegreya-Italic.ttf") format("truetype");
font-style: italic;
}
@font-face {
font-family: "Alegreya";
src: local("Alegreya"),
url("/static/core/fonts/Alegreya-Italic.ttf") format("truetype");
font-style: oblique;
}
/* end Italic */
/* Bold-Italic */
@font-face {
font-family: "Alegreya";
src: local("Alegreya"),
url("/static/core/fonts/Alegreya-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "Alegreya";
src: local("Alegreya"),
url("/static/core/fonts/Alegreya-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: oblique;
}
/* end Bold-Italic */
/* ########## AlegreyaSC ########## */
/* Regular */
@font-face {
font-family: "AlegreyaSC";
src: local("Alegreya SC"),
url("/static/core/fonts/AlegreyaSC-Regular.ttf") format("truetype");
}
/* end Regular */
/* Bold */
@font-face {
font-family: "AlegreyaSC";
src: local("Alegreya SC"),
url("/static/core/fonts/AlegreyaSC-Bold.ttf") format("truetype");
font-weight: bold;
}
/* end Bold */
/* Italic */
@font-face {
font-family: "AlegreyaSC";
src: local("Alegreya SC"),
url("/static/core/fonts/AlegreyaSC-Italic.ttf") format("truetype");
font-style: italic;
}
@font-face {
font-family: "AlegreyaSC";
src: local("Alegreya SC"),
url("/static/core/fonts/AlegreyaSC-Italic.ttf") format("truetype");
font-style: oblique;
}
/* end Italic */
/* Bold-Italic */
@font-face {
font-family: "AlegreyaSC";
src: local("Alegreya SC"),
url("/static/core/fonts/AlegreyaSC-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: "AlegreyaSC";
src: local("Alegreya SC"),
url("/static/core/fonts/AlegreyaSC-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: oblique;
}
/* end Bold-Italic */
.main-header {
font-family: "AlegreyaSC";
font-weight: bold;
}
.regular-text {
font-family: "Alegreya";
}
The fonts are located in core/static/core/fonts.
When I start the django development server by running python manage.py runserver and go to the url in my browser, I get the correct results, but in the terminal I get this output:
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
July 04, 2019 - 17:16:31
Django version 2.2.2, using settings 'stratego.settings'
Starting ASGI/Channels version 2.2.0 development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
HTTP GET / 200 [0.02, 127.0.0.1:60158]
HTTP GET /static/core/css/style.css 200 [0.00, 127.0.0.1:60158]
HTTP GET /static/core/fonts/AlegreyaSC-Bold.ttf 200 [0.00, 127.0.0.1:60158]
HTTP GET /static/core/fonts/Alegreya-Regular.ttf 200 [0.00, 127.0.0.1:60159]
Not Found: /favicon.ico
HTTP GET /favicon.ico 404 [0.00, 127.0.0.1:60158]
I am not using a database yet so the migrations are not important.
From the output, you can see that the server sent the fonts to the client, but they're already installed on my machine, so why did it send them?
I don't think I made a mistake in the naming (In my computer settings these fonts are called "Alegreya" and "Alegreya SC").
Did I misunderstand how the local() function works in css or I did something wrong?
Thanks in advance.
PS: I am using python 3.7.3 with django 2.2.2 and firefox 67.0.4 on windows 10 if that's important to note.
