So I'm using a font family for header text (Aileron to be specific), and the font family has various weights such as "Light", "Bold", "ExtraBold", and whatnot. How would you declare the specific weight in CSS?
This is my code:
h1{
font-family:Aileron-Black;
font-size:49pt;
letter-spacing:-3px;
color:white;
}
I would experiment with taking off the hyphen and putting the name of the family in quotation marks, but nothing seems to do the trick.
First, incloude the font via CSS in Bold and Thin:
#font-face {
font-family: 'Aileron';
font-style: normal;
font-weight: 100;
src: local('Aileron' ), url('path/to/font/Aileron.woff') format('woff'); }
#font-face {
font-family: 'Aileron';
font-style: normal;
font-weight: 800;
src: local('Aileron-Black' ), url('path/to/font/Aileron-Black.woff') format('woff'); }
Then declare the font-weight you want to use by using the font-weight propety.
For Bold font use 800:
h1{
font-family:'Aileron';
font-size:49pt;
letter-spacing:-3px;
color:white;
font-weight: 800; }
Or for thin font use 100:
h1{
font-family:'Aileron';
font-size:49pt;
letter-spacing:-3px;
color:white;
font-weight: 100; }
You need to use the font-weight property, it takes either a numerical value or a keyword value (such as normal or bold). You need to look up in your CSS code for the font-face declaration of the font you are using, there you will see the specific font-weight.
Here you can find more information.
Regarding your case:
h1{
font-family: "Aileron";
font-size:49pt;
font-weight: bold;
letter-spacing:-3px;
color:white;
}
Related
I downloaded a few fonts from google font and there are some font files for bold, italic, light, thin etc. Let's take Robot as an example, these are two font files I downloaded: Roboto-Bold.ttf, Roboto-Regular.ttf.
I wonder how should I use the file with Bold? What is the difference if I pick the regular font file with below code:
canvasContext.font = `bold 20px Robot`
The above code defines the bold for the Robot font family. Do I need to import Roboto-Bold.ttf file for the bold in this case? The same question for italic, light, thin etc.
You will need to define your font in css using #font-face with all the weights. Define same font-name for all the styles, just differentiate them with font-weight like below
#font-face {
font-family: "Roboto";
src: url("Roboto-Regular.ttf");
font-weight: normal;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-Bold.ttf");
font-weight: bold;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-light.ttf");
font-weight: 300;
}
#font-face {
font-family: "Roboto";
src: url("Roboto-thin.ttf");
font-weight: 100;
}
and then use it in your elements like
element {
font-family: Roboto;
font-weight:100; /* for Thin */
font-weight:300; /* for Light */
font-weight:normal; /* for Regular */
font-weight:bold; /* for Bold */
}
Or you can use html <link> to embed your font like
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500" rel="stylesheet">
If you want to use google font just go to fonts.google.com & select font then customize it
After finishing your customization go to "EMBED"
Copy the link & paste it into your html head section.
Copy the font family name & paste into your css file selector like below.
canvas {
font-family: 'Roboto', sans-serif;
font-weight: thin/normal/bold/bolder; // Choose any option
font-style: normal/italic/oblique; // Choose any option
font-size: 20px;
}
you must link file font to your project
<style>
#font-face {
font-family: 'Athiti';
font-style: normal;
font-weight: 400;
src: local('Athiti'), local('Athiti-Regular'), url('fonts/Athiti-Regular.ttf') format("truetype");
}
</style>
When you call font name
<div class="container" style="font-family: 'Athiti' font-size: 16px; ">
<b> Font Bold </b>
</dib>
You need to define Bold font
#font-face {
font-family: 'RobotoBold';
src: url('./Roboto-Bold.ttf');
}
And use canvasContext.font = 20px RobotoBold
You need to import one by one.
Yes you will have to import each tff file , however the regular version still can be made bold etc in some/most family fonts , for example you will have the normal bold weight 400 , but if you want to get other bold variations e.g 500 600 700 you will need to import the bold variation of the font
I downloaded a font from the internet in which it has different styles (bold, italic, etc.). One of the styles is Dashed, so the letters have breaks in them. Is there a way to keep have it under the same family name in a css, just a customized font style. Like if you were in a cms, you can select the option of dashed just like bold.
#font-face{
font-family: 'custom-font';
src: url('../font.ttf')format("truetype);
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: 'custom-font';
src: url('../font-dash.ttf')format("truetype);
font-weight: normal;
font-style: ???;
}
I use many web fonts in my site, and now I want to add new font family which has serif/sans-serif/monospace type of font.
Part of my css:
#font-face {
font-family: 'DejaVu', sans-serif;
font-weight: 400;
font-style: normal;
src: url(dejavu/DejaVuSans.ttf)
}
#font-face {
font-family: 'DejaVu', monospace;
font-weight: 400;
font-style: normal;
src: url(dejavu/DejaVuSansMono.ttf);
}
#font-face {
font-family: 'DejaVu', serif;
font-weight: 400;
font-style: normal;
src: url(dejavu/DejaVuSerif.ttf);
}
But it doesn't work(In css console I see error like: bad value for font-family).
Is there any way to make it work using only one name for font.
I know that I can change font-family name to look like: 'DejaVu Serif' but I don't want to.
The answer is no, the only way would be to change the font-family name to include the font definition.
You could set the font-style or font-weight and use those to select your font-face but you can't stack a font-face family.
I don't a simple moment. Which way is the right way to include multiple fonts in css? Here are simple examples.
This?
#font-face {
font-family: DeliciousRomanRegular;
src: url(/Delicious-Roman-R.otf);
}
#font-face {
font-family: DeliciousRomanBold;
src: url(/Delicious-Roman-B.otf);
}
or this?
#font-face {
font-family: Roman;
src: url(/Delicious-Roman-R.otf);
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: Roman;
src: url(/Delicious-Roman-B.otf);
font-style: normal;
font-weight: bold;
}
And why?
I use the second one, because I can add font-family to BODY and just add font-style or font-weight to other classes. And it works.
But I saw people using the first method many times. But it seems to me too rude.
Every time you need to add bold to a class you have to use "font-family: DeliciousRomanRegular, Arial, sans-serif;". WTF?
The second option: you use the same font name, but for each variant you intend to use, you need to specify (a) the variation and (b) the alternate resource to use as font.
This ensures that in your actual content CSS you can do things like:
p {
font-family: Roman;
font-style: regular;
font-weight: 400;
}
p em {
font-style: italic;
}
p strong {
font-weight: 800;
}
And things will work correctly. Contrast this to the ridiculous notion of "changing the font family just because you wanted the same font, but italic". Let's not do that.
I want to use 2 fonts: "A-Md" and "A-Bd".
"A-Bd" looks bolder than "A-Md", but both "A-Md" and "A-Bd" font actually have regular weight only.
In this situation, I want to use "A-Bd" as bolder font of "A-Md".
I wrote css as:
#font-face {
font-family: 'A-font';
font-weight: normal;
src: local('A-Md');
}
#font-face {
font-family: 'A-font';
font-weight: bold;
src: local('A-Bd');
}
body {
font-family: 'A-font';
font-weight: bold;
}
I hope 'A-Bd' to be applied to texts. But, the result texts' font is bolder text of 'A-Bd' and it looks bad.
If I set font to be 'A-Bd', then the texts are fine. I want to use 'A-Bd' as bold text for 'A-font' I defined.
How can I use 'A-Bd' itself as a bold version of 'A-font'?
Edit: What you are trying to do is a little unconventional, especially in terms of design where less is more in typfaces. But you could accomplish it with something like this:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
#import url(http://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
#import url(http://fonts.googleapis.com/css?family=Bangers);
#import url(http://fonts.googleapis.com/css?family=Sonsie+One);
b {
font-family: 'Nothing You Could Do', cursive;
font-weight: normal;
}
p {
font-family: 'Droid Sans Mono', san-serif;
font-weight: normal;
}
p#bangers {
font-family: 'Bangers', cursive;
font-weight: normal;
}
span.sonsie {
font-family: 'Sonsie One', cursive;
font-weight: normal;
}
Then in your body you could apply the other fonts this way:
<p>Main font is Droid Sans Mono and other is <b>Nothing You Could Do</b></p>
<p id="bangers">This is Bangers and <span class="sonsie">this is Sonsie</span></p>
See my JSFiddle example on this here: http://jsfiddle.net/Incredulous/GpJtP/
Used google fonts from here: https://www.google.com/fonts
Sourced here: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
If you use tags to specify bold: b, strong, em, or any h# tags (for example), you can set these to display 'your bold font' and font-weight: normal;
You can even set these properties together for multiple elements like so:
b, strong, em {
font-weight: normal;
font-family: 'your bold font';
}
Add other classes to the list as necessary.