We Keep Coding

how to include new font and use it in project

#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.

Css font-family disabled if JS is disabled - is this normal?

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?

#font-face not rendering correct font-family in Chrome

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

Can see custom font on server, but not locally

I am using Sansation as custom font, and it shows fine when I upload my site, but when I debug locally, it ain't showing:
Default.css:
/* #region Fonts */
#font-face {
font-family: "Sansation Regular";
src: url("/Fonts/Sansation_Regular.eot?") format("eot"), url("/Fonts/Sansation_Regular.woff") format("woff"), url("/Fonts/Sansation_Regular.ttf") format("truetype"), url("/Fonts/Sansation_Regular.svg#SansationRegular") format("svg");
font-weight: normal;
font-style: normal;
}
/* #endregion */
body {
font-family: "Sansation Regular";
}
The Fonts are located in:
root:
-Shared:
---Assets:
------CSS:
---------Default.css
------Fonts:
---------Sansation_Regular.xxx
How can I get the fonts to show locally too?

If you are on, e.g. http://foo.com/bar/hello.html, and you encounter a URI with the form /Fonts/world.ttf, it refers to the URL http://foo.com/Fonts/world.ttf.
From your data structure, it looks like the URI to point to your font should have the form /Shared/Assets/Fonts/world.ttf to result in a URL like http://foo.com/Shared/Assets/Fonts/world.ttf
If you open up your developer console and look at network activity, you should see the wrong path in attempted/failing resource loads.

How to get available font weights?

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.