How do I install new fonts with Django? There is no mention of this in the documentations.
I have my fonts installed in the static folder as such fonts/abc.ttf
For instance, in a template if this was a CSS I would link it as such:
<link href="{% static 'fonts/abc.ttf' %}" rel="stylesheet" media="screen">
except this is not CSS, and I haven't found any resources on how to to do this.
Do I include the link in the CSS file like so?
#font-face {
font-family: 'abc';
src: url({% static 'fonts/abc.ttf' %});
src: local({% static 'fonts/abc.ttf' %})
}
Any help would be appreciated.
For the directory structure like so,
-- static
|--fonts
| |--abc.ttf
|
|--css
|-- main.css
In the main.css, you should add.
#font-face {
font-family: 'abc';
src: local('Abc'),
url('../static/fonts/abc.ttf') format("truetype");
}
You can't use {% static 'filename' %} inside a css file, since it will not be rendered by the django templating engine.
Also, if you want you can add the following in the <head> section of base.html, and it will render a fully qualified path for static assets:
<style>
#font-face {
font-family: 'abc';
src: local('Abc'),
url('{% static 'fonts/abc.ttf' %} format("truetype")');
}
</style>
Edit: Fixed the use of local and also removed the preference around location of style tag in html.
I am using this option to avoid absolute path and/or css in html template:
#font-face {
font-family: 'HKGrotesk';
font-style: normal;
font-weight: bold;
src: local('HKGrotesk'), url('/static/fonts/hk-grotesk/HKGrotesk-SemiBoldLegacy.otf') format('opentype');
}
Related
I am working on a project w/ Django and I am having trouble with fonts. I am able to see the uploaded font on my computer but not on my phone.
This is my file path:
static
|
interface
|
main.css
folsom-black.otf
This is my code for my html file:
<style>
#font-face {
font-family: 'Folsom';
src:
url("{% static 'interface/folsom-black.otf' %} format('otf')");
}
</style>
This is the code for my css file:
#font-face {
font-family: 'Folsom';
src:
url('../interface/folsom-black.otf') format('otf');
}
This post might help you out! I am not a professional in Django myself but see if this helps you out!
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() and local() 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.
How do I install new fonts with Django? There is no mention of this in the documentations.
I have my fonts installed in the static folder as such fonts/abc.ttf
For instance, in a template if this was a CSS I would link it as such:
<link href="{% static 'fonts/abc.ttf' %}" rel="stylesheet" media="screen">
except this is not CSS, and I haven't found any resources on how to to do this.
Do I include the link in the CSS file like so?
#font-face {
font-family: 'abc';
src: url({% static 'fonts/abc.ttf' %});
src: local({% static 'fonts/abc.ttf' %})
}
Any help would be appreciated.
For the directory structure like so,
-- static
|--fonts
| |--abc.ttf
|
|--css
|-- main.css
In the main.css, you should add.
#font-face {
font-family: 'abc';
src: local('Abc'),
url('../static/fonts/abc.ttf') format("truetype");
}
You can't use {% static 'filename' %} inside a css file, since it will not be rendered by the django templating engine.
Also, if you want you can add the following in the <head> section of base.html, and it will render a fully qualified path for static assets:
<style>
#font-face {
font-family: 'abc';
src: local('Abc'),
url('{% static 'fonts/abc.ttf' %} format("truetype")');
}
</style>
Edit: Fixed the use of local and also removed the preference around location of style tag in html.
I am using this option to avoid absolute path and/or css in html template:
#font-face {
font-family: 'HKGrotesk';
font-style: normal;
font-weight: bold;
src: local('HKGrotesk'), url('/static/fonts/hk-grotesk/HKGrotesk-SemiBoldLegacy.otf') format('opentype');
}
Folder Blueprint
Templates
File.html
Static
Fonts
Style
In the css file , i tried :
#font-face{
font-family:<Font_name>
src:{{ url_for('static',filename='fonts/<font_name>.ttf') }} ;
}
What changes are to be made to add custom fonts ?
You can't use template tags in css. the Jinja template tags are only meant for html files and templates not css.
To use a css file, you have to insert the link manually there, something along the lines of:
#font-face{
font-family: customfont;
src: /static/Fonts/font.ttf';
}
The only way to get around this is to serve a template, that contains the css embedded in <style></style> tags that way flask would be able to interprete the template tags. so with that you should have something like this
<style>
#font-face{
font-family: <Font_name>
src: {{ url_for('static',filename='fonts/<font_name>.ttf') }} ;
}
</style>
Assuming your project directory is setup such (Arrows = level of directories):
~/
>static/
>>fonts/
>>>MyFont.woff
>templates/
>>index.html
>main.py
the following implementation of a fontface in your index.html's style tag should work:
<html>
<head>
<style>
#font-face {
font-family: "MyFont";
src: url("/static/fonts/MyFont.woff");
}
</style>
</head>
</html>
How to use static conf in CSS?
body {
background: url('static/img/body.png');
padding-top: 20px;
padding-bottom: 40px;
font-family: Georgia,"Bitstream Charter",serif;
}
This not working.
My static conf:
STATIC_ROOT = '/home/user/domains/domain/public_html/website/website/static/'
STATIC_URL = '/home/user/domains/domain/public_html/website/website/static/'
Paths inside of your CSS file are relative, so you don't need to set static at all in the CSS file.
For example:
Your stylesheet is located at /home/user/domains/domain/public_html/website/website/static/stylesheet.css
Assuming your file structure is:
-- /static
-- -- stylesheet.css
-- -- -- /img
-- -- -- -- body.png
You can simply define your body as:
body {
background: url('img/body.png');
padding-top: 20px;
padding-bottom: 40px;
font-family: Georgia,"Bitstream Charter",serif;
}
And call your stylesheet in your HTML via:
<link rel="stylesheet" type="text/css" href="{{ STATIC_ROOT }}stylesheet.css">
Your STATIC_URL should be a url (i.e. static.yourdomain.com/your_application/ or similar), that looks like a path on your filesystem so it won't work.
Normally a relative url in your css files should work just fine.
And don't forget to run manage.py collectstatic: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#collectstatic