I'm trying to build Bootstrap from SCSS, but I'm not experienced in front-end technologies at all. Is there any way to set a bold-by-default font instead font-weight everywhere it's used? The font-weight version is rendered distorted. I'm using a custom CSS now overriding the font-family everywhere where it's needed (h1...h6, b, strong, etc.) but it's not too convenient.
use font-weight-bold class to get bold font.
Load a bold font by default:
*{
font-family: 'Lato', sans-serif;
font-weight: 900;
}
<link href="https://fonts.googleapis.com/css?family=Lato:900" rel="stylesheet">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>etc.</p>
<span>everything is bold now</span>
Related
The font size changes when I add the Boostrap CDN link.
I found that this is because Boostrap has a default font size. I tried to change the font size by specifying the font size in the external style sheet and putting !import, but it doesn't work. And it only works when I put font size in the inline style sheet.
div.banner {
font-size: 500% !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<main>
<div class="banner">
<h1 class="slideUp" style="font-family: 'EB Garamond', serif">
Yasuní National Park<br />
<span style="font-size: 40%"> between oil exploitation and conservation</span>
</h1>
</div>
</main>
This is the part of my code and I was trying to change the font size of <h1> tag by applying the code below. But it doesn't work. Can you explain why?
div.banner {
font-size: 500% !important;
}
Firstly, we change the size of font sizes using em, rem, and px.
Given CSS:
Let us say you have you font size declared for your entire document like this
* {
font-size: 20px;
}
that is in pixel.
If we want to change this part of your code.
<span style="font-size: 40%;"> between oil exploitation and conservation</span></h1>
We use rem mostly. like:
<span style="font-size: 2rem;"> between oil exploitation and conservation</span></h1>
//2rem means -> default 20px(declared) * 2 = 40px will be the font-size of 2rem, 3 rem is 60, etc.
I see you tagged specificity too..
Not a good practice to use important even in testing.
Highest priority is inline styling -> then IDs -> classes.
I have a mock-up site template made entirely using only HTML5 and CSS3 located here.
I then started with Font Awesome 5, using the CSS webfont option (as appose to the SVG with JS version).
I found a neat trick using <span class="fas fa-hashtag fa-border" aria-hidden> Lorem ipsum dolor sit amet,</span> instead of using <span> and <h1> tags.
Which renders as such, here.
How do I alter the default font?
P.S. span {font-family: “Font”, sans-serif;} does not work.
P.P.S. .fa-border {font-family: “Font”, sans-serif;} doesn’t work either.
This is because you have used .fas class in your span which has font-family Font Awesome.
So I will suggest that wrap your icon in an <i> tag and then apply font to <span>. For border apply fa-border class to <span>
Stack Snippet
span {
font-family: Verdana;
}
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<span class="fa-border"><i class="fas fa-hashtag"></i>Lorem ipsum dolor sit amet,</span>
You added Font-Awesome to the header. But as it only contained one glyph it could not render, so it was replaced with browser default.
Try targeting the :before element instead
.fa, .far, .fas {
font-family: "Roboto"; // or any font you wish to use
}
.fa:before, .far:before, .fas:before {
font-family: "Font Awesome\ 5 Free";
}
I'm building a email on html with the inline css. I need to build it with the google font Open Sans and using the light one with font-weight:300 for the text and the bold one with font-weight: 700 for titles.
I customed on googlefont website the url to have both particularities I needed like that :
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700" rel="stylesheet">
The fact is that my email seems to apply by default the property 700 to all the page and can't find the 300 one if I put in my inline css the font-weight to 300.
However the 300 weight seems to be applied in a text, but I don't know why or understand the logic that could help me to apply a light weight whenever I want.
Does anyone know how if I can use Open Sans bold and light in the same page in a email html?
here is the codepen :
https://codepen.io/Katchou/pen/zzzLOy
You can use a different font-weight for the title and content
Refer the snippet
h3{
font-family:'Open-sans', sans-serif;
font-weight: 700;
}
p{
font-family:'Open-sans', sans-serif;
font-weight: 300;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<span>
<h3>Heading</h3>
<p>Content</p>
</span>
Or you can use
<span>
<h3 style="font-family:'Open-sans', sans-serif;font-weight:700">Heading</h3>
<p style="font-family:'Open-sans', sans-serif;font-weight:300">Content</p>
</span>
How's this? I can refine my answer if you add more information to the question.
EDIT:
You added a CodePen.
I got your title to show as Open Sans Light.
Check it out!
https://codepen.io/rickydam/pen/QggBja
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
#font-face {
font-family: 'Open Sans Light';
src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
</style>
<span>
<font face="Open Sans">
Hello world
</font>
<br>
<font face="Open Sans Light">
Hello world
</font>
<br>
<font face="Open Sans" style="font-weight:700">
Hello world
</font>
</span>
I'm trying to incorporate font-awesome icons in my webpage, and it all works fine, until I change to my font of choice, Exo 2, and the icons show up as a bordered square. It works fine with other fonts, but for some reason this won't work.
I have included the font-awesome stylesheet, and the google fonts stylesheet.
If anyone could point me to what I'm doing wrong, would be appreciated!
This issue with font-awesome could be due to setting other font to the icon. Please see this fiddle
.parent1,
.parent1 > i{
font-family: 'Open Sans', sans-serif;
}
.parent2{
font-family: 'Open Sans', sans-serif;
}
<script src="https://use.fontawesome.com/a30dc5ca39.js"></script>
<div class="parent1">
<i class="fa fa-times"></i>This won't work
</div>
<div class="parent2">
<i class="fa fa-times"></i>This works
</div>
If you set the font to the child element i.e. the <i> element, then font-awesome won't be rendered as you expect.
In the second example I only set different font to the parent, but not the icon, and it works as expected
fontawesome is font icons and Exo 2 is font and not "font icons"
to work fontawesome u must apply
font-family: FontAwesome;
and if u change it to something else here i think "Exo 2"
font-family: Exo 2;
it wont work and will disply u square
I want to change the font of the <p> tag in HTML so I tried:
<p style="font-family:'Myriad Pro','sans-serif'; font-size:10.0pt; color:#BE2D0F; ">
But it doesn't work, any suggestion how to do that? I need to change the font to this font color, font, and font type.
That code is correct.
See: http://jsfiddle.net/bcEKb/
Note that this only sets the style for that single <p> tag. To set the style of EVERY <p> tag, you need to use a separate stylesheet or put it in <head> like so:
<html>
<head>
<style type = "text/css">
p
{
font-family: "Myriad Pro", "sans-serif";
font-size: 10pt;
color: #BE2D0F;
}
</style>
</head>
<body>
<p>This paragraph has the style applied.</p>
<p>So does this one.</p>
</body>
</html>
See: http://jsfiddle.net/G6TKe/
If you have a external CSS file, ensure that you put a class for p if you want it to be used on EVERY paragraph, if its just the one paragraph then just put the code inline (as you have done and it works)
Try specifying the font names without the single quotes.