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;
}
Related
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.
Please go here end see Black font style. How do I get this style on my page. Here is what I've tried so far, but it's not working.
.title{
font-family:'montserrat' sans-serif;
font-weight:900;
font-weight:Black;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class='title'>LOREM</div>
First, the font-family property requires values to be separated by a comma. Also, you should use the capital letter in the value.
Therefore, this…
font-family: 'montserrat' sans-serif;
…should be
font-family: 'Montserrat', sans-serif;
To add more weights to your font, use the customize menu:
Then, simply add the corresponding font-weight or font-style value:
font-weight: 900;
If you don't have that weight specified in your generated <link>, then the fallback family and weight will be used.
There are several variants based on which you can import the fonts. For Montserrat, there are Regular 400, Bold 700, Black 900 and many more. Just select the variant type and add that font, now you are good to go.
Based on your question the URL you need is
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
First use 'Montserrat', sans-serif; (with ,)
Second font-weight:black; is invalid so remove it...
You can use font-style:normal
.title{
font-family:'Montserrat', sans-serif;
font-weight:900;
font-style:normal;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
<div class='title'>black</div>
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 am trying to use a custom font in a webpage. I however know next to nothing about HTML5 and CSS. I want 1 h1 tag to have a custom font. I have the .ttf file in the same folder as the webpage. I tried this with no success:
<h1 style="text-align: center"; font-family="MinecrafterReg.ttf">Welcome to Ben's Minecraft</h1>
Could anyone else help me?
Stick this in the style tags:
#font-face {
font-family: MinecrafterReg;
src: url(MinecrafterReg.ttf);
font-weight:400;
Then stick this in the h1 tag:
<h1 style="text-align: center; font-family: MinecrafterReg">Welcome to Ben's Minecraft</h1>
Nowadays you can place an #import at the top of your style block:
<style>
#import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
This is not how you should use a custom font on a website. First, you should use an external style sheet and have all your CSS in that. Using inline styles is not a great practice. Second, I do not think you can link to a .ttf file as you want. Notice also that your code had wrong inline format. font-family: not =. Also, the whole inline style needs to be in quotes. style="text-align: center; font-family: 'Sigmar One', cursive;"
That being said - you could link your font in your 'head' of your document and then use inline styles to style h1. Here is a way to do it with a google font. Hope this helps!
<head>
<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
</head>
<h1 style="text-align: center; font-family: 'Sigmar One', cursive;">Welcome to Ben's Minecraft</h1>
font-family:url('https://s3-xxxxxxxxxxxxxx/fonts/FloydsnirLTStd-Rmands.otf'); in Inline style css