I am trying to add a google-font to my jinja2 template. I downloaded the google font and put it in the project directory, using this
<link rel='stylesheet' type='text/css' href="{{ url_for('static', filename='fonts/Oswald-Bold.ttf')}}">
i tried to use the font in the template but it is not working. What is the proper way of doing this? The CSS looks like this
body {
background-color: #ED9121;
font-family: 'Oswald';
font-weight: 700;
}
If I use the font directly from google instead of from my server, it works fine. Please help.
Try to use this in your CSS
#font-face {
font-family: Oswald;
src: url(/static/fonts/Oswald-Bold.ttf);
}
body {
font-family:Oswald;
}
remove href="{{ url_for('static', filename='fonts/Oswald-Bold.ttf')}}"
also make sure your font is inside the folder fonts.
I tried it and for me this is working.
We can change the font size by using the font tag and customizing the size
for example :
<html>
<head>
</head>
<body>
<p><font size="6">Font size is 6</font></p>
<p><font size="24">Font size is 24</font></p>
</body>
</html>
Related
Pretty basic question here, I want to use a font that is saved in my browser and don't have link for it
How to check the css rule for the font.
How to use it in my website.
You would most likely have to use #font-face and download your font as a .ttf or .woff2 file.
Kind of like this: src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
To apply the #font-face to an element, give the element a font-family property and set it to whatever you named it in the #font-face rule.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff); /* change this to your font */
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>With CSS, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>
</body>
</html>
Source: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Additional Reference: developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Hope this helped.
I am trying to change the font of my website but I am not able to access the 'bootstrap.css' file since I am using Bootstrap CDN. Is there any way to access 'bootstrap.css' while still using Bootstrap CDN or do I have to install the complied Bootstrap files?
I've tried changing the 'font-family' in my 'main.css' file but that did not seem to do anything.
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
Make sure when you include the stylesheets, main.css comes AFTER bootstrap like so:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
In main.css, create a rule for the selectors you wish to overwrite
body {
font-family: "Times New Roman";
}
If I have trouble verifying that the fonts are working, I will often pick out an obviously different font so the changes are easy to see and to ensure that there is not a problem with specificity or something else. After problems are figured out, I'll switch back to the real font I wanted to use.
I'm new to CSS and am trying to use a class in my style.css that I created and want to use across a <div> ...
My CSS class:
.dave {
font-size: 56px;
text-transform: capitalize;
font-family: Arial, sans-serif;
font-weight: bold;
color:red
}
My HTML:
<div class="dave">
TEST
</div>
But my text "TEST" doesn't change. I've tried saving and clearing cache but no luck.
Any ideas?
Did you link user css style file in header?
Example:
<head>
<title>Ajax Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
Its either you didn't link your style.css to your HTML file, or it could be due to other errors such as, placing <style>....</style> in your style.css
I know this is a short question, but how do you use multiple custom Google Fonts, i.e Baloo and Roboto, in the text?
In this example the text should be Roboto and headings should be Baloo.
Thanks for your time.
You click "select this font" for each font you want to use, and google will give you a single link tag with multiple fonts. You can also include multiple link tags for each font.
h1 {
font-family: Baloo;
}
h2 {
font-family: Roboto;
}
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
<h1>Baloo</h1>
<h2>Roboto</h2>
google fonts is now using css2 and the answers above are outdated.
the solution using css2 would be:
https://fonts.googleapis.com/css2?family=Baloo&family=Roboto
source: google fonts doc for css2
Go to https://fonts.google.com/
Search for say Roboto - https://fonts.google.com/specimen/Roboto
Hit "select this font" and you'll get a link to add to you html like this:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Note: You can also get one line with multiple fonts by piping the families.
Add this link(s) in your <head> tag
Use CSS to select the font with font-family.
See example below:
h1{
font-family: "Baloo"
}
p{
font-family: "Roboto"
}
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Baloo|Roboto" rel="stylesheet">
</head>
<body>
<h1>Baloo</h1>
<p>Roboto</p>
</body>
Use as many as you want and import them as a stylesheet.
https://fonts.google.com/
For your example:
h1 { font-family: 'Baloo', cursive; }
p { font-family: 'Roboto', sans-serif; }
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<h1>heading</h1>
<p>paragraph</p>
im using Bootstrap framework but i want to change font from default to google font.
Im done something like this:
<head>
<link href='http://fonts.googleapis.com/css?family=Advent+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<style>
body{
font-family: 'Advent Pro', sans-serif !important;
}
</style>
When Bootstrap isnt included that code works fine, but when im "turning" Bootstrap font changing to default
All in all that code just not works and i dont know why...
Please try this:
In the head section of your html place your custom.css below bootstrap.css.
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">