I want to add hindi fonts in ck editor. I added following css in content.css of ckeditor.
font-family: 'kruti_dev_010regular';
src: url('fonts/kruti_dev_010-webfont.eot');
src: url('fonts/kruti_dev_010-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/kruti_dev_010-webfont.woff2') format('woff2'),
url('fonts/kruti_dev_010-webfont.woff') format('woff'),
url('fonts/kruti_dev_010-webfont.ttf') format('truetype'),
url('fonts/kruti_dev_010-webfont.svg#kruti_dev_010regular') format('svg');
font-weight: normal;
font-style: normal;
}
And i added the following line into config.js of ck editor:
config.font_names = 'Kruti Dev 010/"krutidev_010";' + config.font_names;
I generate the fonts and css by using this link:
Webfont Generator
And i added all generated fonts into fonts/ folder in my ckeditor app.
Now kurti dev fonts is appearing in font style drop down but hindi font is not applying by this. Where is the problem in my code ?
Download hindi font Kruti010 fonts.here
Add this in Config.js of CkEditor ......
config.font_names = 'Hindi/Kruti;' + config.font_names;
add hindi fonts in ck editor's langs folder.
ckeditor/lang/Kruti/k010.ttf
add css in content.css of ckeditor.
#font-face {
font-family: 'Kruti';
src: url('lang/Kruti/k010.eot');
src: local("Hindi"), url("lang/Kruti/k010.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
check your path properly.
Related
My fonts are working in all browsers except Firefox. I acquired these fonts by downloading them from Google Fonts. Then I ran them through the Fontsquirrel font generator so that I could use them in an #fontface declaration. My firefox console reports this CSS error for each font file format:
downloadable font: download failed (font-family: "graduateregular" style:normal weight:normal stretch:normal src index:2): status=2147500037 source: file:///C:/Users/Owner/Desktop/Web%20Projects/Uncsstalumni.com/CSS/graduate-regular-webfont.woff
My HTML:
<link href='../CSS/stylesheet.css' rel='stylesheet' type='text/css'>
My CSS:
#font-face {
font-family:'graduateregular';
src: url('graduate-regular-webfont.woff2') format('woff2'), url('graduate-regular-webfont.woff') format('woff'), url('graduate-regular-webfont.ttf') format('truetype'), url('graduate-regular-webfont.svg#graduateregular') format('svg');
src: url('graduate-regular-webfont.eot');
src: url('graduate-regular-webfont.eot?#iefix') format('embedded-opentype'), font-weight: normal;
font-style: normal;
}
For some reason my #font-face isn't working.
#font-face{
font-family: "Manteka";
src: url('../fonts/manteka.ttf');}
I'm trying to use it for my navigation links
#nav a {
font-family: "Manteka", Verdana, Tahoma;}
Quick folder layout
My CSS file is in a 'css' folder inside 'www'
index file is located in 'www'
font file is inside 'fonts' folder inside 'www'
Downloaded the files from another source and used this
#font-face { /* The manteka Font, use it by call font-family directly */
font-family: 'manteka';
src: url('../fonts/manteka.eot'); /* For IE */
src: url('../fonts/manteka.ttf') format('truetype'), /* For Chrome and Safari */
url('../fonts/manteka.woff') format('woff'); /* For FireFox */}
Works fine now, thanks for the help
Did you try adding format('truetype')
#font-face{
font-family: "Manteka";
src: url('../fonts/manteka.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Also, try dropping the quotes on the usage:
#nav a {
font-family: Manteka, Verdana, Tahoma;}
I'm having an issue with Firefox where one of my fonts isn't loading from my CDN. I already have Access-Control-Allow-Origin set to *.
The font in question only has WOFF and EOT files (due to licensing) whereas the other font that works has WOFF, EOT, TTF and SVG files.
From what I understand WOFF is supported, https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
Is there something I'm missing to get this to work?
#font-face {
font-family: 'ProximaNovaReg';
src: url('../fonts/ProximaNova-RegWeb.eot');
src: url('../fonts/ProximaNova-RegWeb.eot#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-RegWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ProximaNovaSbold';
src: url('../fonts/ProximaNova-SboldWeb.eot');
src: url('../fonts/ProximaNova-SboldWeb.eot#iefix') format('embedded-opentype'), url('../fonts/ProximaNova-SboldWeb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I solved this by removing #iefix but it looks like it should have been ?#iefix. I found more information here: CSS Font Face "?#iefix"
I am using ckeditor in my website.I want to know how can I type in hindi in ckeditor.I am using kruti dev010.
in config.js file I have included:
config.font_names = 'kruti_dev_010;' + config.font_names;
and in content.css file I have added:
#font-face {
font-family:'kruti_dev_010regular';
src: url('krutidev-webfont.eot');
src: url('krutidev-webfont.eot?#iefix') format('embedded-opentype'),
url('krutidev-webfont.woff') format('woff'),
url('krutidev-webfont.ttf') format('truetype'),
url('krutidev-webfont.svg#kruti_dev_010bold') format('svg');
font-weight: normal;
font-style: normal;
}
I am not able to type in hindi and if I paste the content from word it is displaying some special character
Download hindi font Kruti010 fonts here.
Add this in Config.js of CkEditor:
config.font_names = 'Hindi/Kruti'; + config.font_names;
add hindi fonts in Ckeditor's langs folder:
ckeditor/lang/Kruti/k010.ttf
add css in content.css of ckeditor.
#font-face {
font-family: 'Kruti';
src: url('lang/Kruti/k010.eot');
src: local("Hindi"), url("lang/Kruti/k010.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
check your path properly.
iam using #font-face css function to use custom fonts. They look great in all browsers (ie,chrome,safari, opera) on windows and mac apart from any version of firefox mac.
Basically, the font is adding padding above and below the font on all h1 h2 and p tags using this font on firefox mac only. however when using the same version of firefox on a windows machine, the font renders completely fine without any extra padding.
On all other browsers on mac and pc, the font renders completely fine without this extra padding. Its just on firefox mac!
Here is the #font-face css code ive been using, generated by font-squirrel using the recommended settings.
#font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont-webfont.eot');
src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont-webfont.woff') format('woff'),
url('telegrafico-webfont-webfont.ttf') format('truetype'),
url('telegrafico-webfont-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont-webfont.eot');
src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont-webfont.woff') format('woff'),
url('telegrafico-webfont-webfont.ttf') format('truetype'),
url('telegrafico-webfont-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont.eot');
src: url('telegrafico-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont.woff') format('woff'),
url('telegrafico-webfont.ttf') format('truetype'),
url('telegrafico-webfont.svg#webfontRUJiw7XW') format('svg');
font-weight: normal;
font-style: normal;
}
this is an example of the css i've been applying to the h1 h2 tags
#logo h1 {
font-family:'TelegraficoRegular';
font-size:60px;
margin:0;
padding:0;
}
Even with stating margin:0 and padding:0 it still adds padding or something on top and bottom but just in firefox mac.
its very baffling since its on one browser on one platform.When if it was the problem of the font file you would expect to see the problem replicated in other browsers.
I would really appreciate any help. Thank-you
Jack