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.
Related
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>
I have been trying to apply different bootstrap fonts to my headings and different font to the body. I have looked at various sources and found solutions only on Changing the overall font style of the bootstrap css by overriding.
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
from this link Bootstrap override using custom.css
The code inside custom.css is given below
body{
font-family: 'Calibri', arial;
}
.grid{
border:solid 1px #000;
}
.img-fix{
width:100%;
height:auto;
}
But this changed all the fonts in the Bootstrap into 'Calibri' font. But I want to apply 'Calibri' only to the headings and any other font style to body such as 'open-sans' to the text body.
Please let me know how to achieve this.
Thanks!
you can apply it to ur heading or whatever tags u want like this
h1, h2, h3, h4, h5, h6{
font-family: 'Calibri', arial, sans-sarif;
}
and for body if u want to apply open sans do it like this
body{
font-family: 'open-sans', arial, sans-sarif;
}
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>
Using a google webfont, I can't get the font-weight to yield results. The three weights do have names but aren't specified in the href link so I'm not sure if the name needs to be added.
Here's that portion of the code:
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'><style type="text/css">
body{
background-color: white;
margin-left: 20%;
margin-right: 20%;
border: none;
padding: 10px 10px 10px 10px;
font-family: Quicksand, sans-serif;
font-weight: 300;
}
<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=Quicksand:wght#300;400;500&display=swap" rel="stylesheet">
:- Use preconnect in relation before link any type of extronal font now it is work if any problem then told me
I was able to get this working in a fiddle which leads me to believe you have another font-weight overriding the font-weight you are trying to set. Use either chrome or Firefox's developer tools and you can easily locate the style that is overriding the one you are trying to set.
Keep in mind:
More specific styles win (ID vs class for example)
Styles found later in the style sheet will override identical styles earlier in the sheet.