Using Font Faces - Your own font - html

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.

Related

What is the correct way to remove a font from multiple HTML files without manual update?

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.

Vega Lite font availability

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.

Wrong HTML response - ckeditor

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.

Embedded fonts with hiqpdf

I'm trying to generate a pdf from html by using Hiqpdf. As they say in the website: http://www.hiqpdf.com/documentation/html/037cb13e-febe-4d08-a90c-a08bbd5a4348.htm this dll supports fonts embedding. However, I'm using the following fonts stored in my computer and it doesn't work.
#font-face {
font-style:normal;
font-weight:normal;
font-family:f2generic;
src:url('C:/Users/myuser/AppData/Local/Temp/f2generic.otf') format("opentype");}
I don't know is it is something wrong with the path (as it must be absolute path or the format of the font). In html format i can display the fonts right.
I checked property htmlToPdfConverter.Document.FontEmbedding and it is true, so I don't know why it doesn't work.
Thanks in advance.
You should try to use fully qualified URLs for resources like file:///C:/Users/myuser/AppData/Local/Temp/f2generic.otf

Alternate Gothic No. 2 not embedding properly

I'm writing a Pure AS3 app, embedding a font using the Embed metatag like so:
[Embed(source="assets/fonts.swf", fontName="AlternateGothic No2")]
public static const ALTERNATE_GOTHIC_2:Class;
This has always worked for me, but Alternate Gothic No. 2 gives me issues. In Flash, the font is labeled as AlternateGothic and the style is No2. I typically combine these with a space in between as the fontName, but it's not working.
The font is Postscript Type 1, so I can't embed the file and fontFamily, unless I spend $100+ on a font converter.
I also tried creating a font symbol, but that didn't work either. Any ideas?
FontExplorerX has the font labeled as AlternateGothic-No2, so I tried that and it worked.