Is there any way to get list of weights for particular font in JavaScript?
I want to build selector like in Photoshop.
I'm unclear about your end goal, however....
If you are using something like google fonts you should already know all the possible weights available. In other words if you supply your own font then you are the master of all that is available.
Nope! Whether one typeface is actually a font-weight of another is esoteric knowledge that Javascript has no way of working out. You can define what font-weights a font-family has using CSS #font-face rules, and in a way this kind of illustrates the impossibility of achieving what you're asking.
Immediately below, I've got a pretty standard #font-face setup for a font with 3 weights.
#font-face {
font-family: Barney;
src: url(barney_regular.ttf);
font-weight: 400;
}
#font-face {
font-family: Barney;
src: url(barney_light.ttf);
font-weight: 300;
}
#font-face {
font-family: Barney;
src: url(barney_bold.ttf);
font-weight: 500;
}
But knowing that each of those .ttf files represents a different weight of the same font family is arbitrary. Here I've specified it, because I'm aware of it. If an automated service, eg Font Squirrel, had taken those 3 files, it would probably have come out with this:
#font-face {
font-family: barney_regular;
src: url(barney_regular.ttf);
}
#font-face {
font-family: barney_light;
src: url(barney_light.ttf);
}
#font-face {
font-family: barney_bold;
src: url(barney_bold.ttf);
}
Here, these 3 weights have actually all been specified as distinct font families, which is obviously a mistake. But in theory I could do stupider stuff:
#font-face {
font-family: barney;
src: url(barney_regular.ttf);
font-weight: 500;
}
#font-face {
font-family: barney;
src: url(barney_regular.ttf);
font-weight: 400;
}
#font-face {
font-family: barney;
src: url(barney_regular.ttf);
font-weight: 300;
}
Above, the same exact typeface is being assigned to 3 different weights. So even if Javascript could detect the relationships within #font-face declarations, like what file is associated with what weight, style & family; how many weights have been specified… It still couldn't tell you whether those resources exist, have been downloaded, accurately represent a different width of the same font.
Web typography has undergone big changes over the past 10 years, but it's still (relatively speaking) a rubbish medium for type-setting.
Related
I am hosting a javascript project on locally and trying to use the local font, but it seem not loaded, here is my style.css code, ipixregular is the font i am trying to use, may I know what might be the problem? and do I need to refere it in html? thanks
#import "#fontsource/press-start-2p/index.css";
#import "#16bits/nes.css/css/nes.min.css";
#font-face {
font-family: 'ipixregular';
src: url('front/ipix-webfont.eot');
src: url('front/ipix-webfont.eot?#iefix') format('embedded-opentype'),
url('front/ipix-webfont.woff2') format('woff2'),
url('front/ipix-webfont.woff') format('woff'),
url('front/ipix-webfont.ttf') format('truetype'),
url('front/ipix-webfont.svg#ipixregular') format('svg');
font-weight: normal;
font-style: normal;
}
* {
font-family: ipixregular
}
.nes-btn {
font-family: "Press Start 2P";
}
#import loads the font style rules
#font-face loads the font
I do not understand why you have the rule
font-family: "Press Start 2P";
as that is not a valid font family.
You could try
body * {font-family: ipixregular;}
I noticed that you are using "front" instead of "font" in your URLs, to be clear - is this the right folder name? Could simply be a typo.
I.e., from: url('front/ipix-webfont.eot') to: url('font/ipix-webfont.eot')
#font-face {
font-family: Sakal Marathi , Arial Unicode MS;
src: url(Saka_Marathi_Normal.ttf);
}
h3{
font-family: Sakal Marathi , Arial Unicode MS;
}
<h3>hiiii</h3>
I am desiging my project using bootstrap, vuejs, and laravel. I want to add the font sakal_marathi.ttf to my project. How can I use this font style? When I use the font-family attribute it displays the font on my PC, but the effect is not displayed on other computer.
Use any google fonts instead this.
#font-face {
font-family: 'Sakal Marathi';
src: url('Saka_Marathi_Normal.ttf');
}
h13 {
font-family: "Sakal Marathi";
}
You don't have to use two names(the first is font series name,the second is font type name),and you should check current url is true.
I have an arbitrary ttf font that I want to use in my web application.
How can I tell which characteristics like "bold", "italic" are available in this font?
Background: I want to avoid that I have to try out all the different settings like:
font-weight: bold;
font-style: italic;
in order to see which one has an effect on the appearance of the font on my web site.
Let me cut that thought short: that's not how ttf (or in fact, any) font resources work. Bold, Italic, etc are separate "physical" files on your harddisk, and the kind of style toggling you see in Office applications, text editors, etc. come from the OS showing you an abstraction: it only shows you the font family name, rather than the list of individual ttf or otf files, and then shows you style/weight UI controls, which trigger an actual font resource switch from one file to another without you ever noticing.
So: if you have a single ttf file, that file represents only one, specific , font face expression (regular, bold, italic, bold-italic, or even something more detailed based on OpenType metadata properties).
To make things even more fun: if you want to use fonts in CSS, CSS doesn't even care about what a particular font resource is. It completely relies on you to tell it what it is, and you get to lie: CSS will believe you. If you use an #font-face rule you get to say which font file to use for a particular combination of font-* properties, so you're in the driving seat:
#font-face {
font-family: MyFont;
/* CSS has no idea, nor does it care, what this font "really" is */
src: url('myfont-Bold-Italic.ttf') format("truetype");
/* so we tell it this font is applicable to weight:100, or ultra-thin */
font-weight: 100;
/* and we also tell it that this font is applicable in "normal" style */
font-style: normal;
}
And presto, as far as the page styling you just defined, using MyFont with normal style and weight 100 will load whatever ttf resource you said it should use. The CSS engine does not care or even know that the resource you told it to use is "actually" a bold italic expression of the font family. All it knows is that you said this font had to be used for weight:100/style:normal so that's what it's going to use in something like this:
body {
font-family: MyFont, sans-serif /* weight mismatch, so this will probably fall through */
}
h1 {
weight: 100; /* weight/style match: this will use myfont-Bold-Italic.ttf! */
}
2019 edit
OpenType introduced font variations (FVAR) which allows a single font to encode an infinite spectrum of variable vector graphics, which means that if the browser you're targeting supports FVAR OpenType, you can now load a single font as your #font-face instruction, with a new format string that indicates it's variable, and instead in your normal CSS indicate which specific variation you need by specifying the font-variation-settings property:
#font-face {
font-family: MyFont;
src: url('myfont-Bold-Italic.ttf') format("truetype-variation");
/* no weight or style information here anymore */
}
body {
font-family: MyFont;
font-variation-settings: 'wght' 435;
}
h1 {
font-variation-settings: 'wght' 116;
}
While "plain" CSS only supports 9 font weights (100 through 900 in steps of 100), variations can use values from 1 to 1000 in steps of 1.
Each and every font (if weights available) comes in a separate true type format file for each and every weight of the font.
e.g.
Roboto.ttf
Roboto-Italic.ttf
Roboto-Bold.ttf
Therefore, you need to specify which is which in Your CSS file like so:
#font-face {
font-family: 'Roboto';
font-weight: normal;
url('fonts/Roboto.ttf') format('truetype')/*ttf*/;
}
#font-face {
font-family: 'Roboto';
font-weight: bold;
url('fonts/Roboto-Bold.ttf') format('truetype')/*ttf*/;
}
#font-face {
font-family: 'Roboto';
font-weight: lighter;
font-style: italic;
url('fonts/Roboto-Italic.ttf') format('truetype')/*ttf*/;
}
In your case, you can view the particular file directly by clicking on it twice in the Windows/MacOS/Linux explorers.
If you want to use a third-party software solution, I suggest that you give opentype.js a look.
I'm adding font style with css using the #font-face with 4 different formats relatively
#font-face {
font-family: "font_name";
src: url("font_name.eot");
src: local("☺"),
url("font_name.woff") format("woff"),
url("font_name.otf") format("opentype"),
url("font_name.svg#font_name") format("svg");
}
And it works just fine, however if I disable JS, the font is gone and in the console it says: "downloadable font: download failed...".
This happens(from the console) for the .woff and .otf and I don't understand why. How is JS related to this sort of css code?
I have a dropdownlist that contains a list of fonts . I am able to display them properly on Firefox .. but when i turn to Chrome , the effect is not applied .
The CSS --
#font-face
{
font-family: Comic Sans MS !important;
src: url('../fonts/Comic Sans MS Regular/comic.ttf');
}
The Dropdownlist Change function is
$fontsDropdown = $('.custom-text-font').find('.fpd-fonts-dropdown').change(function() {
if (currentElement != null)
{
currentElement.setFontFamily(this.value);
currentElement.params.font = this.value;
//changed text to bold
currentElement.setFontStyle('bold');
currentElement.params.fontStyle = 'bold';
_outOfContainment(currentElement);
stage.renderAll();
}
})
This produces a proper output on firefox ,,,, but on Chrome .,, It does not . Actually I get the changes reflected on Chrome .. but that change is reflected only when I click the font in dropdown second time. It does not happen on the first click on a font from the dropdown list.
Thanks
if the fonts are available in other different format(woff,ttf,svg,otf) .I suggest writing all the cross browser compatibly in the following manner
src: url("DejaWeb-Bol.eot") format('embedded-opentype'),
url('DejaWeb-Bol.woff') format('woff'),
url('DejaWeb-Bol.ttf') format('truetype'),
url('DejaWeb-Bolsvg#') format('svg');
font-weight:bold;
font-style:normal;
if you do't have this type of format download here
and convert her
#font-face
{
font-family: Comic Sans MS !important;
src: url('../fonts/Comic Sans MS Regular/comic.ttf');
}
For this question.
First of all remove spaces b/w folder name like replace another name to Comic Sans MS Regular.
and for the font family you can choose another name than font-family: Comic Sans MS !important;
And remove !important for this..
If this is working then good otherwise you can choose..
font face generator.
You can choose font here and you can get font- face web kit.
http://convertfonts.com/
http://everythingfonts.com/font-face