From admin side, I was getting rich text output from ckeditor tool.
Refer following image for this purpose.
In this if I use Comic Sans MS font then at response its giving me response like this, please see following image:
In response, I was getting Comic Sans MS, Cursive but this font I have not used at input time.
So what to do in this situation?
Really thanks to Hackerman for his help to reach at conclusion.
Basically this is not an error from ckeditor side. They are giving multiple fonts in response so whichever available via system that get used.
See following image for this purpose:
They have returned font Comic Sans MS and Cursive too. So its based on availability of font with running environment system.
In my iOS project I have added font files for Comic Sans MS font then its get directly loaded as like its showing in rich text input box.
Related
Currently, I am using a font for emails ...let's call is - "FontX"
In all the email template (html), the "Font X" is being used everywhere. Now that I am looking to cancel the license of the font, I need to make sure font is not being used or referenced anywhere in the email templates.
Issue: Going through thousands of email templates / HTML is not feasible and requires a lot of manual work
Possible solution: Need some feedback on this, if this is a right approach?
In the email templates / HTML, "FontX" is being used everywhere like inline etc.
style="font-family:'FontX', Arial, Times New Roman, sans-serif;
Along with that, CSS file is being referenced in HTML as well.
<link rel="stylesheet" type="text/css" href="fontx.css" />
My question, what if I remove font-face reference in the referenced CSS file? It will break the source and even though font name is being used in HTML, "Font X" usage will be over, correct?
Currently, the references CSS file includes something like this:
#font-face {
font-family: 'FontX';
src: url('FontX.eot');
src: url('FontX.ttf') format('truetype'),
url('FontX') format('svg');
font-weight: normal;
font-style: normal;
mso-font-alt: 'Times New Roman';
}
What will happen if I remove src lines?
What font will be used as a fall back?
What is the use of mso-font-alt? Is this considered a fall back font?
There are two ways to remove the font from the email template. One is better than the other. Unfortunately you can't just get rid of the src lines, as we need a place to find the font. It's just like an img without an actual image to find. And it wont go back to the mso-font-alt. I will explain
The changing-the-src-way (the best method)
If I understood correctly, you don't want to use the font anymore in anything you do. So what you could do is change the lines with the src in them. You could, if you want, change them to a new font, however don't get rid of them.
mso stands for Microsoft Office (this is because in Outlook, HTML emails are read with Microsoft Word!). So this is probably an alternative for Microsoft Word.
The getting-rid-of-the-whole-thing way
This is not the best method, but you could just get rid of the whole #font-face bit. This would make it go back to the fallback font, which you specified in the style attribute in all your emails.
I was wondering if there is a list of supported fonts used by Vega Lite? I didn't manage to find in the docs but maybe missed in.
Specifically I am trying to use museo sans 300, which works fine in my D3.js code, but doesn't seem to be recognised in Vega Lite.
Is there a way to link to custom font files?
The way I get custom fonts for Vega Lite charts in my website is simply via CSS!
First: Define a font in your CSS
#font-face {
font-family: MyFont;
src: url(fonts/somefont.ttf);
}
Second: Refer to the font name in your Vega Lite configs
axis : {
titleFont: "MyFont"
}
Hope this helps, this is not directly related to your goal from question but still gives you ability to do custom fonts inside the chart.
We have developed Adobe air application that has option for Hindi and English. For translation we used microsoft office Hindi Pack and used on-screen keyboard to write in hindi. We have used Arial font in application.
In some of the client computers when language is changed to Hindi we see boxes in place of the words. The client computer is having Arial font available.
We are ready to embed the correct TTF file in our application but we are not sure which font file is being used by successful machines as we did not install any special font. Please help.
== Update===
Found there is an option to embed the font of the system application is compiled on. For that I used following code but it is not working:
[Embed(systemFont="arial", fontName="myArial",
mimeType="application/x-font", advancedAntiAliasing="true")]
protected var fontClass:Class;
and then in css file added
global
{
font-family: "myArial";
}
But I am getting errors:
Description Resource Path Location Type
exception `during transcoding: Cannot embed local font 'arial' as CFF. The CSS #font-face 'local()' syntax is not supported. Please specify a path directly to a font file using the 'url()' syntax. For [Embed] syntax the 'systemFont' attribute is not supported. Please specify a path directly to a font file using the 'source'` attribute. HondaLMS.mxml /HondaLMS/src line 81 Flex Problem
and
Description Resource Path Location Type
unable to build font 'myArial' HondaLMS.mxml /HondaLMS/src line 81 Flex Problem
I believe the systemFont name is "Arial", not "arial" (they are case sensitive).
If that does not work, try to embed it in css:
#font-face
{
src: local("Arial");
fontFamily: "myArial";
unicodeRange: U+0020-00FF; // change the range for your desired english and hindi characters, numbers and punctuation, otherwise you would embed ALL characters including cyrillic, chinese, arabic and whatnot and it would become huge
}
global
{
font-family: "myArial";
}
If it won't work with the font name reference, just copy the Arial font into your project directory and embed it with a relative path:
#font-face
{
src: url("../assets/Arial.ttf");
fontFamily: "myArial";
unicodeRange: U+0020-00FF; // change the range for your desired english and hindi characters, numbers and punctuation, otherwise you would embed ALL characters including cyrillic, chinese, arabic and whatnot and it would become huge
}
In the noble effort to re-invent every wheel, our company has recently rolled our own custom web-based e-mail app, of which I was the primary designer.
One thing I've noticed is that smileys coming in from MS Outlook-based e-mails (sent from third parties) are not appearing correctly. Example: A happy face just displays a J
The HTML of the inbound message comes in like this:
<span style="...;font-family:Wingdings;...">J</span>
I know that Firefox and Chrome do not support the Wingdings font because it is non-standard. However, I am tasked with coming up with a fix.
Is there a good way to either 1) force the browser to load and use Wingdings or 2) otherwise convert the J to a smiley?
I'd rather not do anything crazy like try some wingdings-detection-regex - or even worse, parse the DOM - just to get some stupid emoticons working. Maybe there is already some library out there that already handles this?
For what it's worth, GMail seems to not 'fix' this problem either. iOS doesn't in the message view, but puzzlingly does fix it in the inbox view (replaces the J w/ emoji)
EDIT
To clarify, this question is regarding inbound messages from third parties. Outlook, by default, autocorrects ":)" to the Wingdings smiley. There's nothing I can do to prevent this coming in. What I need is a solution to correct for this.
EDIT 2
Again, the app itself is a web based e-mail client (Gmail, etc.). E-mails go in to here, NOT to users' individual Outlook/phones/other e-mail clients. It only goes into the web app.
To avoid having to parse the HTML or manipulating the DOM, a simple solution would be to use CSS3 web fonts by linking the Wingdings font-family to a copy of the Wingdings font file on your server:
<style>
#font-face {
font-family: Wingdings;
src: url(link_to_wingdings_font_file.ttf);
}
</style>
However, a license is required for this approach.
You could embed the SWEC (Symbola-based Wingdings Emoticons Compatibility) font: https://drive.google.com/open?id=0BwDrnPQfa-aMOEx0bEZCQUNrSGs
It provides basic compatibility with Wingdings emoticons. (In Wingdings, "J" represents a smile, "K" represents a lack of expression, and "L" represents a frown.) Background: certain versions of Microsoft e-mail clients still in use change user-typed expressions such as ":)", ":|", and ":(" into "J", "K", and "L", respectively, and then specify Wingdings as the font family; recipients on systems which do not include a Wingdings-compatible font are not able to see the intended emoticons, which can cause confusion.
You need to manually substitute it prior to sending the email as you have no control over what fonts the reader has installed. You also can't include anything outside bland old html and css (unless you want to mess with VML)
First I would try running your wingding through a html converter to see if there is a html code for it.
Besides that, you could try a webfont wingdings equivalent, however there are issues with Outlook playing nice when webfonts are imported in email (ignores your font stack, falling back to Times New Roman).
Besides that, all that is left is ZephyrusDigital's suggestions of using an image or :).
Against my better judgement I have decided to go for the quick hack and just use a regular expression. Here it is for anyone else that runs into the same problem:
$html = preg_replace('/\<SPAN*?(Wingdings)*?[^\>]*\>J(\<o\:p\>\<\/o\:p\>)*\<\/SPAN\>/i', ' :) ', $html);
use :)
kidding!
why not save the wingdings smiley in photoshop as a png, or make another custom one? you could use <img src="http://something.com/images/smiley.png" style="display:inline-block;"/> and it won't look weird in a text block as long as it isn't taller than your line-height.
I'm trying to add my own font to my website I have checked out quite a few stackoverflow articles many seem to be browser specific or path issues. I cant seem to get my font to display on any browser, anyone know what's up?
#font-face {
font-family: "Helvetica";
src: url('http://spawnasite.co.uk/Helvetica-Condensed-Light-Light.ttf') format("truetype");
}
h1{
text-align: center;
text-transform:uppercase;
color:#232323;
font-size: 24px;
font-family: "Helvetica", sans-serif;
}
Js Fiddle here http://jsfiddle.net/Gz26Q/
My guess here is that the font you're referencing is protected.
Not all font foundries, especially one like Helvetica, allow their fonts to be embedded. They have code within the font to prevent this.
You could still use the font on your computer, but not embed it within another application or document that doesn't have the font installed.
As a reminder from what has been mentioned before:
Change the name of your custom font-family from "Helvetica" to something else in order to avoid overriding default naming conventions.
Use multiple types of fonts for backups.
Additionally,
I highly recommend looking at FontSquirrel -- some fonts even have their own webfont kit pre-made for you to use out of the box.
If you try to load fonts in Chrome and want better rendering -- be sure to put the SVG on the top of the declaration. See here for more information.
You are trying to override an existing font, call it myHelvetica
Use others formats: eot, wot.
See these links:
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
http://caniuse.com/ttf
The basic problem is very simple: the URL of the font resource is wrong. An attempt to fetch http://spawnasite.co.uk/Helvetica-Condensed-Light-Light.ttf results in 404 Not Found.