<html>
<head>
<title> </title>
<body>
<font face="file:///E:/softwares/FONTS/alpha kufi regular.ttf" size="+2"> This is a tester for a font, that may not be installed on the machine </font>
</body>
</head>
</html>
This snippet doesn't show up the sentence in the intended font. What could be the reason for this ?
Note: I am aware that the font tag is not supported by HTML 5 and deprecated by HTML 4.
There are two basic problems here: the HTML face attribute (as well as its CSS counterpart, the font-family property) needs a font family name as value, not a URL of a font file, and a file: URL is inherently system-dependent and may fail to work in many circumstances.
The following works, provided that the font file alpha_kufi_regular.ttf (better avoid spaces in font names, as spaces as such are disallowed in URLs) is placed in the fonts subdirectory of the directoty where you have the CSS file and the browser supports TrueType fonts as “web fonts” (this need not be “web font” usage but could be local; the techniques are the same):
<style>
#font-face {
font-family: AlphaKufi;
src: url('fonts/alpha_kufi_regular.ttf');
}
</style>
<font face="AlphaKufi" size="+2"> This is a tester for a font,
that may not be installed on the machine </font>
Since not all browsers support TrueType fonts as “web fonts”, consider using FontSquirrel #font-face generator if you intend to use the font on a web page.
It is usually better to use CSS rather than HTML for font settings, but that’s a different issue. In theory, “web fonts” need not work with HTML <font face="..."> too (no specification requires that), but in practice they do.
I can't find a reference for it, but my best guess is that you can't access fonts using the file:// protocol (local filesystem). This is certainly true if the page is online or accessed through a local server (http://localhost or equivalent).
Also, there's no reason at all to ever use <font>. It might not work just because browsers don't support it fully anymore.
edit: in fact, I'm not sure <font> has ever supported using a font file instead of a font's name.
The solution for providing a font file is to use CSS's #font-face.
It's because font's face attribute does not take a path to a font file. It takes a comma separated list of font names. The browser searches the system for installed fonts and loads the relevant one from there (if it exists).
If you want to specify your own, you will probably need to use CSS #font-face.
Using Google Web Fonts API to add web fonts to your pages :
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=alpha kufi regular">
<style>
body {
font-family: 'alpha kufi regular';
font-size: 48px;
}
</style>
<title> </title>
<body>
<div>This is a tester for a font, that may not be installed on the machine</div>
</body>
</head>
</html>
~ Reference
Related
Is there an easy way to display webpages in computer modern font?
The easiest and most stable way to do this I found was to base64 a font I found at http://mirrors.concertpass.com/tex-archive/fonts/cm-unicode/fonts/otf/. I used the cmunrm.otf from there, base64'ed it and put it as a font face in my css.
#font-face {
font-family: "my-font";
src: url(data:font/truetype;charset=utf-8;base64,T1R...gP5w/kP+RAA format("opentype");
}
body {
font-family: "my-font";
}
You can see an example at https://jsfiddle.net/jtvx9auo/
While you could also simply download the otf file and put it to your server, I found base64ing to be more reliable, e.g. when trying to convert to pdf using wkhtmltopdf.
In case anyone still stumbles upon this (2020+) looking for the optimised web fonts rather than the larger .otf fonts which are used in the answer above, I've hosted the Computer Modern font family via the jsDelivr CDN.
To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:
https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css
And then just add the Computer Modern Serif or sans-serif families directly in your css files.
Example Code:
<head>
<!-- Other imports... -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css">
<style>
body {
font-family: "Computer Modern Serif", serif;
}
</style>
</head>
Check out the full documentation here
I am currently building a multi lingual web site and using a custom font called 'Exo'. This font family contains special characters 'ű' and 'ő' from the Hungarian alphabet. I embedded the 'Exo' font to the website but unfortunately these characters don't display properly. The rest of the text is displayed with the embedded 'Exo' font but these characters are displayed with the default font family.
Here is the character encoding what I use:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset=utf-8>
What could possibly be the problem?
These characters display properly on http://www.fontsquirrel.com/fonts/exo?q%5Bterm%5D=exo&q%5Bsearch_check%5D=Y where I have downloaded the font family from.
Any help is much appreciated!
Your font is loaded correctly since you see all Latin glyps. But the font you use does not contain the Hungarian subset. That means these special Hungarian glyphs just don't exist in the font. What happens is that the css font stack will display the fallback font for the missing glyphs.
Sort answer: What you need to do is make sure you use a version of the Exo font that contains all the subsets you need.
You can download a new (full glyph set) OTF from FontSquirrel and use the Webfont generator to create new webfonts like you did before. But now make sure you get the subset settings right...
FontSquirrel has a fine grained subset control. This means you only need to include the language support (subsets) you need. This way loading time will stay at a minimum.
Google commissioned the design and redesign of the Exo font family. The also have a excellent delivery network. So you might consider getting your font directly from the source: http://www.google.com/fonts#UsePlace:use/Collection:Exo+2
Again, you need to load the 'Latin Extended (latin-ext)' to get all needed glyphs. The gauge shows that loading this set of glyphs triples loading time.
Although there are other ways to specify a more restrictive subset, I would go for the Latin Extended because than you keep the advantage of the CDN. Exo might already be in your users browser cache.
I've used Google Fonts service and all seems to be okay.
https://jsfiddle.net/maxim_mazurok/wp1powya/
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
</head>
<body style="font-family: 'Exo', sans-serif; font-size:60px">
'ű' and 'ő'
</body>
</html>
I would like this character to appear on my website:
http://www.fileformat.info/info/unicode/char/fdfd/index.htm
I put this tag on the top of my page
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
And I tried the code ﷽ and ﷽ but it just looks like a box on the site. How can I put this character on my website?
Thanks!
Edit: It shows up correctly on my phone, but not my Mac 10.6.8. How do I know which computers will support this character?
All the methods you have used are correct. Using the character ﷽ as such is correct too, provided that the HTML document is UTF-8 encoded and declared to be UTF-8 encoded. The ﷽ and ﷽ notations work independently of character encodings (that’s one of the main reasons for using them).
However, it fails if none of the fonts in the user’s system contains a glyph for the character. Browsers then typically display a small rectangle to indicate this.
The font information page for the character at Fileformat.info has incorrect or incomplete information. If you click on the Local Font List link there, you should see the real situation in your system. In my system, a fairly normal Windows 7 with a fairly large collection of free fonts added, none of the fonts listed on the file info page except GNU Unifont actually contains U+FDFD ARABIC LIGATURE BISMILLAH AR-RAHMAN AR-RAHEEM. Perhaps the font support page was created in a system with versions of Arial, Times New Roman, etc., that differ from the normal fonts shipped with e.g. Windows 7.
What’s worse, the GNU Unifont glyph is hardly suitable for any real use. Being a coarse bitmap, it is totally inadequate for rendering a calligraphic character with a large number of details.
Microsoft Uighur has an appropriate glyph, but this font is not free, and there does not be any easily accessible information on terms for getting it legally for use as an embedded font (web font). There is also a font called Universalia, with information available in Russian only and of questionable legal status.
The following image shows examples of the character (in very large font size) in the fonts mentioned.
If you can see the character in iPhone, then obviously the iPhone has a font containing it, but most probably you cannot use that font as embedded.
Unfortunately, this appears to mean that you cannot use the character on a web page so that works for all users, or even the majority of users.
Update: The good news is that Google Fonts: Early Access contains a few fonts that contain the character and can be used as embedded fonts, either as hosted by Google or as hosted on your server. Beware that Early Access fonts are more or less experimental and that the shape of the character might not be suitable for your overall design and style.
In the following examples, I have included a short phrase in normal Arabic letters for comparison.
<style>
#import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
#import url(http://fonts.googleapis.com/earlyaccess/notonaskharabic.css);
#import url(http://fonts.googleapis.com/earlyaccess/notonastaliqurdudraft.css);
</style>
<p><span style="font-family: Amiri">﷽ السلام عليكم</span> (Amiri)
<p><span style="font-family: Noto Naskh Arabic">﷽ السلام عليكم</span> (Noto Naskh Arabic)
<p><span style="font-family: Noto Nastaliq Urdu Draft">﷽ السلام عليكم</span> (Noto Nastaliq Urdu Draft)
Make sure that your code editor saves your file in utf-8 encoding.
Heya any chance your font does not support the character? I tested with the below works fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="font-family: arial, helvetica, sans-serif;">﷽</p>
</body>
</html>
EDIT: Loaded Arial, Helvetica stack and seems fine.
Also make sure your text editor is saving the file utf 8 encoded ( as mentioned above )
I'm an enormous newbie but I want to add a Unicode character to a document. I've tried reading all the Unicode character threads but I am finding it difficult to understand and I am getting a headache trying to soak in all the information.
<doctype html>
<html>
<head>
<meta name="description" content="description" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta name="keywords" content="keywords" />
<title>title</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="idtag">
📗
</div>
</body>
</html>
#idtag {
font-family: Tahoma, Helvetica, "Arial Unicode MS", sans-serif;
}
I am trying to add U+1F4D7 or anything like a book but when I view the page I just see a hollowed out square. I don't think I have the symbol on my PC. I have used Google Fonts before and they just require Javascript? Would I do the same? How would I do this?
The problem with 📗 is that it's outside the classic BMP range -- not sure whether there are any fonts at all that have these characters, but they are definitely not common.
Just because a character is defined by Unicode doesn't mean that every font has to have it. Even characters in BMP (the codepoints between 0 and 65535) are not available in all fonts.
There is no way to display a character that's not available in the font that's being used. Unicode test pages that show you what a character "should" look like will send you images :-)
The "GREEN BOOK" character you are trying to use seems to be one of the emoji new in Unicode 6.
It is therefore not included in the font-families you are using for display, not even in the very large Arial Unicode MS.
On newer versions of OSX and iOS it is supported through the Apple Color Emoji font. Otherwise I don't know of any fonts that support this character. I guess there are some in Japan but almost certainly none on Google Webfonts.
Google Webfonts therefore won't help you in this case.
But if it's just about showing a book icon, I'd use an image. E.g. from the noun project.
If you need it as a font, you could use Fontello or Pictos Server to generate a font from a selected icon.
For more about using fonts for icons, there was a nice article on CSS-Tricks a few monts ago.
You document is correct in principle, except for the typo on the first line (should be <!doctype html>, with the exclamation mark), and the character is rendered OK on my Firefox. But this happens because Firefox is clever enough to scan the fonts installed on my computer to find a glyph for the character, and I happen to have installed the Symbola font that contains it. IE 9 is not that clever, but even it shows the character if I add Symbola to the font-family list.
So this is a font problem, and a big one. You cannot expect Symbola to be installed (probably less than 1 user out of 10,000 has installed it, regrettably), and it appears to be about the only published free font containing U+1F4D7. The page you refer to has a link to a font support page that says this. It might not be completely up-to-date, but it gives a good picture of font support.
You might consider using a web font for the purpose, but this sounds somewhat disproportionate for displaying just one character, and it seems that the Font Squirrel #font-face generator fails to work with Symbola, for some reason.
See also: Guide to using special characters in HTML.
P.S. The character would appear black and white, though you could use CSS to set a color on it. Cf. to the SO question Color in the Unicode standard?
i'm working on a website and currently using the #font-face tehnique (this + this) to load the fonts.
I noticed that some of the special characters are not loading properly -> ŠĐŽČĆ šđžčć.
This is, those characters exist in the font itself.
So, i made a test...
I loaded up a test page with #font-face fonts and cufon fonts...
The result is below ->
and of course, here is the code ->
<html>
<head>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="ReprobateCRO_400.font.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script>
<style type="text/css">
#font-face {
font-family: 'ReprobateCROLASTRegular';
src: url('reprob_cro_last_last-webfont.eot');
src: local('ReprobateCROLASTRegular'),
url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'),
url('reprob_cro_last_last-webfont.woff') format('woff'),
url('reprob_cro_last_last-webfont.ttf') format('truetype'),
url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h2{
font-family:ReprobateCROLASTRegular;
}
</style>
</head>
<body>
<h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1>
<br/><br/>
<h2>--> #FONT-FACE --> šđžčć ŠĐŽČĆ</h2>
</body>
</html>
So far i've tryed switching the encoding from utf8, widnwos1250, and nothing seems to work with the #font-face tehnique...
So, i have two questions... Does anybody know what's going on here? And, if i switch to using cufon insted of #font-face - how much would that slow down the page loading? (concidering cufon uses JS to load the fonts)
Thank you for your time!
I myself had a lot of issues with #font-face recently while I was working on a web-font intensive web site and it turned out that the online web-font generating tools themselves were the guilty ones. They simply generated bad .woff / .ttf /.svg /.otf files which resulted in a lot of issues for which it was very hard to pinpoint the source of the problem.
In my experience the only online web-font generating service that provides 100% valid - issue free web-fonts is Font Squirrel. It also allows a lot of useful stuff such as font subsetting which might also be the problem in your case (i.e. you didn't specify to include additional characters in your generated web-fonts - Serbian / Croatian is part of Latin Extended B if I am not mistaking).
Have you tried it with http://fontface.codeandmore.com/ an alternative #font-face generator?.
The H2 has the wrong font definition: the single quotes are missing.
It is now:
font-family:ReprobateCROLASTRegular;
Should be:
font-family:'ReprobateCROLASTRegular';
You seem to have worked out the font issue; re: load times, my experience is that both font-face and cufon will potentially be slow enough to have a brief flash of default text. It depends on your host and the user's connection of course; but both methods require a relatively heavy download (either the JS or the font).
So, all else being equal IMHO you may as well use font-face; at least browsers are getting better at caching the font file so after the initial page load you can get faster rendering. With cufon it always has to load and execute the JS so you'll never get rid of that part of the load time.
You implementation is good.
But when you used font-face. The font that you used. Must have all the characters that you want use. The .ttf or what ever must have all the characters and special characters when you will used it.
When you used Cufon. The Cufon generator make a lot of extra font letters for you. In the font generator of Cufon. You can select a lot of extra's for the font.
Do you understand it??