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>
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 trying to style a website using a stylesheet.css file.
In one of my html pages, I have the <link rel="stylesheet" href="stylesheet.css"> element. The css file is in my templates folder (image):
When I start the application and go to a page, The console reads:
"GET /home/stylesheet.css HTML 1.1/" 200
But the page doesn't appear to load correctly (meaning none of the CSS settings are applied). I am using repl.it to run this website.
Here is the link to the repl: sm--supermechm500.repl.it [REPL.IT]
Here is my css file:
#import url('https://fonts.googleapis.com/css?family=Aldrich&display=swap');
body {
align-items: center;
text-align: center;
background-color: #000000;
width: auto;
height: auto;
font-family: 'Aldrich', sans-serif;
}
I have already reviewed this question: Application not picking up css file
, but I didn't quite understand the answer provided, or the question's code.
What is the proper way to make flask render a page using a stylesheet?
After some research, I found that I have done it all wrong.
I needed a "static" folder in my directory, in which is another folder named "css".
In that folder is the stylesheet.css
/ = folder
main.py
/templates
pages.html
/static
/css
stylesheet.css
other_files.txt
And within the html, replace<link rel="stylesheet" href="stylesheet.css">
with<link rel="stylesheet" href="{{ url_for('static', filename='css/stylesheet.css') }}">
And just a note, just because the console says status code "200" FOUND doesn't mean it was loaded, or loaded correctly.
To be more specific, actual solution is
To create a "css" folder in "static" folder.
Add css in path of ".css" file
Change => href="{{ url_for('static', filename='stylesheet.css') }}" to href="{{ url_for('static', filename='css/stylesheet.css') }}"
OR
Change => href="../static/main.css" to href="../static/css/main.css"
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');
}
I'm trying to load an image to my page and set it as my background, below is the css and html that I am working with. The CSS page seems to load, as my test font and background colors show up but for whatever reason my background image doesn't.
I am using Django as my web framework.
Appreciate the help!
HTML:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/>
</head>
<body>
<p>This is a test</p>
</body>
</html>
CSS:
body
{
background-image:url(personal/static/personal/img/home.jpg) no-repeat;
background-repeat:no-repeat;
background-size:100%;
background-color: green;
min-height: 100%;
}
p {
font-style: italic;
color: red;
}
You used background-image, so the no-repeat is not actually working. Try adding the no-repeat below as background-repeat: no-repeat;.
background-image: url('image-url-here.png');
background-repeat: no-repeat;
I've had problems like this with django, primarily because my {% static %} location was confusing me. I think this is a non-css issue, and a path issue.
It helped me to use the dev console to check for Resource Failed To Load error. It will spit out the path that the machine is looking for, and it's likely different than what you specified.
I.e. is your css file located along
personal/static/personal/img/home.jpg
relative to your css file? You might just need to back up a directory, i.e.
../personal/static/personal/img/home.jpg
Either way, the console should give you your path, and use that to determine where your CSS file is digging for the image.
If your CSS files are in a path such as /static/css/style.css
and the images are under a path such as /static/images/test.jpg
then you have to place the test.jpg image directly in the folder with the style.css i.e. /static/css/test.jpg and in your HTML file give it the name test.jpg without using the static path i.e. background-image:url('test.jpg');:)
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');
}