I want to add font-family to another language which I'm using in my ionic 4 app. I tried
#font-face {
font-family: 'SINHA Sithumina 2012';
font-style: normal;
font-weight: normal;
src: url('./assets/font/SINHA Sithumina 2012.ttf');
}
and use it in html css class. Can someone help me with this?
#kavindhi
First thing first you should do to convert you .ttf font family into .otf.
https://convertio.co/ttf-otf/
Then add your font's into assets folder.
Then you should add into into global.scss or add custom file like fonts.scss
Then add this into your font file
#font-face {
font-family: "SolitaireMVBPro-Regular";
src: url("assets/fonts/SolitaireMVBPro-Regular.otf");
}
So it'll be available for you into your ionic 4 pages
font-family: SolitaireMVBPro-Regular;
Finally, I have solved the issue by referring https://www.w3.org/International/questions/qa-css-lang.en which mention by #marblewraith.
So basically I have to mention my words in utf and it will convert my fonts.
I have a custom theme for CM, important part is just this:
.CodeMirror, .CodeMirror * {
font-family: "Roboto Mono" !important;
font-size: 14px;
}
Using this theme causes the text to be measured incorrectly at first render, but it looks good after the editor updates:
Is there any way I could force the Editor/Doc to re-measure the text? Couldn't find any API methods.
I've added the CSS that you provided and it works very fine.
Just you don't need to use the .CodeMirror *
I think that your problem may be due to something else.
Try to call editor.refresh(); after the page loaded.
I am just wondering how can I change RichTextArea inner font-family or font-size for example?
I tried to modify its CSS something as a
border: 1px solid black;
background-color: white;
font-family: verdana;
... but it doesn't work :( The font is still something like times new roman or something this way :S
So is there a way manually set its font attributes?
Thanks
Create a Formatter, documented here: http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/user/client/ui/RichTextArea.Formatter.html#setFontName(java.lang.String).
It abstracts all the styling stuff so you don't have to manually write CSS.
When I check the content area within tinymce using firebug, I notice that TinyMce is adding a class=mceItemTable to each of my tables. This is annoying because in the theme stylesheet it has definition for this which sets all tables to have a dotted bored and looks horrible.
Is there any way to turn this off?
Cool jsfiddle for tinymce
PS: Is there a correct name for a css definition/group like this?
.className {
background: blue;
color: red;
font-size: 12px;
}
You may set whatever class you like using this configuration setting: http://www.tinymce.com/wiki.php/Configuration:visual_table_class
I'm embedding fonts on a mobile website using #font-face (css from FontSquirrel). When I preview in desktop Safari or Chrome, the fonts embed fine, but they don't appear in mobile Safari on the iPhone/iPad. I'm not getting any errors and I can't figure out what's going wrong. Here's my CSS. Any ideas?
#font-face {
font-family: 'JottingRegular';
src: url('../fonts/jotting_regular-webfont.eot');
src: local('☺'),
url('../fonts/jotting_regular-webfont.woff') format('woff'),
url('../fonts/jotting_regular-webfont.ttf') format('truetype'),
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'JottingBold';
src: url('../fonts/jotting_bold-webfont.eot');
src: local('☺'),
url('../fonts/jotting_bold-webfont.woff') format('woff'),
url('../fonts/jotting_bold-webfont.ttf') format('truetype'),
url('../fonts/jotting_bold-webfont.svg#webfontJpUFTHYS') format('svg');
font-weight: normal;
font-style: normal;
}
OK, I figured it out and will document for anyone who has this problem in the future. I had copied the CSS from Font Squirrel and then I had needed to redownload the actual font files later on. I didn't think that would change anything in the CSS, but it turns out that SVG fonts (which are used by mobile safari) all have an ID that is referenced in the font file and the CSS.
So, in:
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg')
webfonttEfFltbI is the font id. I opened the SVG font file in a text editor and found the new ID in the following line near the top of the file:
<font id="webfontC6xdxB57" horiz-adv-x="972" >
Replacing the id after the hash tag in the CSS fixed the problem.
I was having this same situation. I resolved it by updating the paths to the font. Even though Chrome & Safari were loading them fine, iOS wasn't recognizing my path which was
url ('font/chunkfive/font.eot')
I changed that line to include a / to the beginning of the font path and that fixed everything.
url ('/font/chunkfive/font.eot')
You could also try using an absolute path.
Font face isn't supported on MobileSafari until iOS 4.2.
I had been working with this for a hour before realizing my stupid mistake.
Mobile Safari is CASE SENSITIVE for the fonts, while Desktop Safari is not.
If your font is titled: font.svg, you must add it exactly like it is. If you add it with a Capital F, Desktop Safari won't care, but mobile will.
This has already been solved, but I had a similar problem here:
#font-face not working in mobile Webkit
For me, all the IDs on the SVG fonts were correct; it was the FontSquirrel syntax that was wonky. Using the updated FontSpring bulletproof syntax fixed the issue for me, and seems to work entirely cross-browser.
Font face does work on mobile safari, i am using on iphone 3. I also copied the code from font squirl but it didn't work. Here is the updated code. Use this and it will work everywhere.
#font-face {
font-family: 'MyriadProBoldCondensed';
src: url('/fonts/myriadpro-boldcond-webfont.eot#') format('eot'),
url('/fonts/myriadpro-boldcond-webfont.woff') format('woff'),
url('/fonts/myriadpro-boldcond-webfont.ttf') format('truetype'),
url('/fonts/myriadpro-boldcond-webfont.svg#MyriadProBoldCondensed') format('svg');
font-weight: normal;
font-style: normal;
}