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: ???;
}
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 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.
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;
}
I just added a webfont to my CSS file. I'd like to use different weights of the same font.
However if I set font-size: 14px at least Chrome and Firefox render the font in rather strange way.
All characters with font-weight: normal are in fact only 13px high and the bold parts are 15px high.†
Screenshot: (font-size set to 13px, 14px and 15px):
CSS font-face declaration:
#font-face {
font-family: 'Frutiger';
src: url('frutiger.eot');
src: url('frutiger.eot?#iefix') format('embedded-opentype'),
url('frutiger.woff') format('woff'),
url('frutiger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Frutiger';
src: url('frutiger-bold.eot');
src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
url('frutiger-bold.woff') format('woff'),
url('frutiger-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Usage Example:
<p style="font-family: Frutiger; font-size: 13px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 14px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 15px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
Source of font:
Unknown, file has been passed along in my company for years. I used Font Squirrel to generate the *.woff, *.svg, and *.eot files. Same results with and without Font Squirrel's hinting feature.
Live Example:
http://font-render-issue.herokuapp.com/
Is there a way I can fix this?
† If you blend the first line (13px) over the second (14px) you can see that the non-bold parts match exactly. If you do the same thing with the second and third (15px) line, you can see that the bold parts match (at least in terms of height).
1) Like Jukka K. Korpela says, there is no CSS that actually uses the font.
2) The strange rendering you experience is the browser that tries to fake the bold style.
CSS:
#font-face {
font-family: 'Frutiger';
src: url('frutiger.eot');
src: url('frutiger.eot?#iefix') format('embedded-opentype'),
url('frutiger.woff') format('woff'),
url('frutiger.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Frutiger';
src: url('frutiger-bold.eot');
src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
url('frutiger-bold.woff') format('woff'),
url('frutiger-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
/* You did this inline with style="...". */
/* The font from the first #font-face */
p { font-family: Frutiger; }
/* Gets the bold font from the second #font-face */
strong { font-weight: bold; }
.small { font-size: 13px; }
.medium { font-size: 14px; }
.large { font-size: 15px; }
HTML:
<p class="small">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="medium">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="large">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
EDIT
The font's look fine on my machine (Mac, Firefox, Safari). woff files are used.
Then I submitted the example.html to browsershots: http://browsershots.org/http://font-render-issue.herokuapp.com/example.html#
A lot of different outputs. Windows needs (better) hinting.
The Grid Fit ('gasp' table) of the fonts have one entry. They both have one range defined at 65535, which is okay.
I also bumped into the copyright info. You might want to consider alternative fonts. ;) http://joelcrawfordsmith.com/new/font/frutiger
The two fonts are from the same release. But a local file may take precedence. You can disable loading local files with the font face smiley hack.
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url('GraublauWeb.otf') format('opentype');
}
This is all I can think off for now.
I'm implementing google's font named Roboto in my site.
I need 2 types : bold and regular.
So I checked both types and pressed the download button :
But in the downloaded rar file I got ALL the font styles ( also ones which I didn't choose) :
Anyway I wanted to test the regular font : (the fonts are now in my site and not being loaded from google).
(I got those other extensions types (eot,woff,svg) using a font converter (http://www.font2web.com/))
So I did :
<style type="text/css">
#font-face {
font-family: 'Roboto';
src: url('/font-face/Regular/Roboto-Regular.eot'); /* IE9 Compat Modes */
src: url('/font-face/Regular/Roboto-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font-face/Regular/Roboto-Regular.woff') format('woff'), /* Modern Browsers */
url('/font-face/Regular/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/font-face/Regular/Roboto-Regularo.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body { font-family: 'Roboto', sans-serif; }
</style>
Question :
Let's say I want to apply a Roboto bold style to a div.
Should I do it like this :
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
or should I do this ( start all over...)
#font-face {
font-family: 'Roboto-bold';
src: url('/font-face/Regular/Roboto-bold.eot'); /* IE9 Compat Modes */
...
}
and then
div { font-family: 'Roboto-bold', sans-serif; }
This is what you have to do:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
Notice how the same font name is used in both #font-face rules. Now the browser knows that the font "Roboto" exists in two variants. The browser will automatically choose the best variant based on your CSS. So, for example:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
Here the browser chooses the Bold font file. It's all automatic. You just have to make sure that you set up the #font-face rules correctly.
Any reason why you're downloading the font? If you're using it in a web site you can just use the #import code given by Google.
The checkboxes choosing the variations at the beginning only define the import code. If you choose to download the font to your computer it always gives you all variations regardless of the choices you made.
To use the font just include the link to the stylesheet containing the #font-face which google gives you. E.g.
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
or
#import url(http://fonts.googleapis.com/css?family=Roboto);
in your existing stylesheet.
And then it's just a case of setting the font-family for the elements you choose. E.g.
body {
font-family: 'Roboto', sans-serif;
}
Regarding your question :
Yes, you need a separate #font-face for each variation. See example from google
Google example :
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
If you don't include a bold variation for your font the browser will render bolded text as faux-bold instead. This can have variable appearance depending on browser and OS. Likewise for italic and bold-italic.
From your question it looks like your only declaring one font-face rule, related to the Regular version of the Roboto font.
Using the CSS from your question:
div {
font-family: Roboto, sans-serif;
font-weight: bold;
}
Will result in the browser faux bolding the font. The reason is, the font-face rule hasn't been included for the bold version of the font. Reference here: http://alistapart.com/article/say-no-to-faux-bold
As others (#yotam, etc) have mentioned (regardless of how the fonts are being served) you would need to declare a font-face rule for each font weight.
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: /* links to the Regular files */;
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: /* links to the Bold files */;
}
You would then use that font weight as follows:
body {
font-family: Roboto, sans-serif;
font-weight: 400;
}
h1 {
font-family: Roboto, sans-serif;
font-weight: 700;
}
I would stress to use the actual font weight value and not font-weight: bold. As mentioned using font-weight: bold leaves the decision down the the browser.
At some point you may use a font with weights of 700, 900. Say 700 is be bold, 900 extra bold. If your declaring font-weight: bold the 900 weight would be used, which isn't the effect you would want.
You don't have to start all over.. if you got #font-face in your style then all you need to add is font-family like you said.
div {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
And just for make it clear you can make the font as default by using him in body element like this
body {
font-family: 'Roboto', sans-serif;
font-weight:bold
}
EDIT:
You might considering download your font into your website folder, then instead taking website loading time you'll just have to add the next code to your #font-face:
#font-face {
font-family: 'Roboto';
src: url('fonts/font.ttf'); /* IE9 Compat Modes */
/*....*/
}
The font should be inside fonts folder and he named font.