basically I used that famous google font called "Thasadith" I used only the "bold" version and its just showing the normal version , I rechecked , used in html , used font weight in css and still the font is just viewed as normal..
You need to load the bold form if you want to use it. If you don't, the browser doesn't know how to render the bold weight and defaults to the closest it has (which is the one you loaded: normal).
In the case of Thasadith, which is available on Google fonts, you need to add :n,b after the font family name in the <link>'s url (or in the #import's url), where n stands for normal and b stands for bold (other available options being i - italic, bi, - bolditalic or specific weights - these depend on font, ranging from 100 to 900. as well as specific weight + i).
Here's a working example with Thasadith:
div {
font-family: 'Thasadith';
font-size: 5rem;
}
<link href="https://fonts.googleapis.com/css?family=Thasadith:n,i,b,bi" rel="stylesheet">
<div>Hel<i>lo</i>, <strong>Wor<i>ld!</i></strong></div>
In the case of Thasadith,
family=Thasadith:n,i,b,bi
is equivalent to
family=Thasadith:400,400i,700,700i
as 400 and 700 are the two available weights.
For more on how to load Google fonts, read their getting started.
Related
I want to add emojis in a html page, eg. 🇬🇧 but they do not render with the colorized icon.
I tried the follwing
<meta charset="utf-8" />
<body>
🇬🇧
🐑
</body>
</html>
And it does not show the colorized icons of the UK flag and sheep respectively. I as well tried wrapping the emoji characters in a span but it neither works. Maybe is something related to the fonts?
The rendering of the emojis is depending on the font you use to display them. Emojis are just normal characters like the letter "A" and need to be defined in the font you are using on your page. To display emojis correctly, you need to use a font which has these emojis defined and set the <span> (or your whole page) to use that font (with CSS).
Here is an explanation on Emojis. And here is an example on how to use the Google Noto Emoji Color font (free to use) on your website:
1- Download the font (here)
2- Embed it into your CSS:
#font-face {
font-family: "Noto Emoji Regular";
src: url('NotoEmoji-Regular.ttf') format('truetype');
}
Make sure the url has the right path to the local .tff file and add this to your page <style> definition or CSS file.
Note: They aren't new. Just "not supported", somehow.
I'm trying to make simple controls for a element on my website, along the lines of a simple "mute" or "not mute" control.
However, I haven't been able to find any fonts capable of handling the newer Unicode symbols, such as the speaker symbols (🔇 to 🔊, or 🔇 to 🔊) which are broken (🔇 🔈 🔉 🔊) even on Stack Overflow, yet still - They can be found in the Unicode character listings and are somehow able to be displayed in my PDF reader and Internet Explorer, but not Chrome.
This is the first paragraph (above), from my perspective, with the characters broken:
Anyway, here's my snippit of the code. (The video controls are in plain view for testing purposes). The actual element has a z-index: -1000 attached to it; used as a video background.
function mute() {
document.getElementById("jsControl").setAttribute ("href", "javascript:unmute()");
document.getElementById("jsControl").innerHTML = "🔈";
document.getElementById("videoPlayer").volume = 0.0
};
function unmute() {
document.getElementById("jsControl").setAttribute ("href", "javascript:mute()");
document.getElementById("jsControl").innerHTML = "🔊";
document.getElementById("videoPlayer").volume = 1.0
};
<html>
<head>
<style>
body {
font-family: [Insert font names and attempts];
}
</style>
</head>
<body>
<video id="videoPlayer" src="..."></video>
<a id="jsControl" href="javascript:unmute()">🔈</a>
</body>
</html>
I've tried different web-safe fonts, such as Arial, Times New Roman and Tahoma and Sergoe UI.
Question: Is there any font that can be used that supports those unicode characters that works on Chrome?
(Even a font that has these remapped onto regular letters like Wingdings will be accepted as they can be attached using #font-face { ... }.)
Also, please don't complain about the broken Javascript (if it is not written correctly) - I can fix that myself. It's the font; text (missing symbols) that I'm worried about.
Update: Viewing the icons in Internet Explorer works fine. Seems to be a chrome-and/or-other-browser sort of issue.
Since you would use just a few symbols in a special context, rather than as text characters, the practical choice is to use images.
However, if you really want to use characters, there is a very limited set of fonts to consider. According to fileformat.info, U+1F507 is supported only by Quivira, Symbola, Segoe UI Symbol, and Segoe UI Emoji. The latter two are proprietary fonts, available only in relative new versions of Windows, and as different variants (e.g., my Windows 7 lacks Segoe UI Emoji and has a variant of Segoe UI Symbol that lacks the character).
Thus, the only way that works reasonably is to use either Quivira or Symbola as a downloadable font, via #font-face. As they are rather large fonts, and you would need to serve them in different font formats for cross-browser functionality, this approach is hardly a practical option (unless you have many other special characters, possibly used in text, that also need such special fonts).
You shouldn't assume the person viewing your site has necessary fonts installed. Instead, you should add an external font. Find a font that has an appropriate licence and contains the required symbols (for example http://emojisymbols.com/), and add it to CSS as with #font-face declaration:
/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
#font-face {
font-family: "EmojiSymbols";
src: url('EmojiSymbols-Regular.woff') format('woff');
text-decoration: none;
font-style: normal;
}
.controlIcon {
font-family: "EmojiSymbols";
}
imagine that you want to design a website that learns English to Iranian people (Persian (Farsi) language) . English and Persian (Farsi) doesn't have any similarity in alphabet because Persian is RIGHT TO LEFT and English is LEFT TO RIGHT and completely are different . i didn't find any tags to set one font for all Persian (Farsi) words and other font for all English words . for example set B-Nazanin for Persian and set Times New Roman for English automatically that don't need to define font for every word every time . just define once these fonts . what can we do ?
thanx
One possible option is to give a lang="fa-IR" attribute/value to the <html> or to any other elements within the document when the website is shown in persian language.
Hence you can override CSS declarations by using [lang|="fa"] selector.
For instance:
[lang|="fa"] p { font-family: "B-Nazanin"; }
<html lang="fa-IR">
<p> سلام دنیا </p>
</html>
Or:
p[lang|="fa"] { font-family: "B-Nazanin"; }
<p>Hello World!</p>
<p lang="fa-IR">سلام دنیا!</p>
you can use the following link for this purpose:
Display text with two language in webpage with different fonts with font-face at rule in css
#font-face { /* Persian Font */
font-family: 'MyFont';
src: url(Fonts/BYekan.ttf);
unicode-range:U+0600-06FF;
}
#font-face { /* english font */
font-family: 'MyFont';
src: url(Fonts/ALGER.TTF);
unicode-range: U+0020-007F;
}
Usage:
body{
font-family: 'MyFont';}
tip: for different languages you can use different "unicode-range".
using style content by language in HTML is to use the :lang selector in your CSS style sheet. ex :
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
and dont forget use lang in you HTML code
<p lang="en">Ceci est un paragraphe.</p>
If you really want to use two different fonts for two different languages, your options are:
1) Use some markup that distinguishes between the languages. This could be a class attribute or (more logically, but with slightly more limited browser support) a lang attribute. Of course, you would use this for the language with smaller frequency. This is a lot of work of course. Depending on content generation system, it might or might not be automated.
2) Select the fonts so that the primary font does not contain glyphs for characters in the other language. For example, if you set * { font-family: foo, bar } and foo contains Latin letters but no Arabic characters, foo will be used for English and bar for Farsi. Punctuation characters would still be a problem. More importantly, it will be hard to find such fonts.
3) Use CSS code that selects font family by Unicode range. I won’t go into details, since this approach has too limited browser support to be practically useful yet.
However, it seems that you are trying to create a problem rather than solve one. By typographic principles, the same font should be used for copy text if possible. You should select a font that is suitable for both English and Farsi, or better still a list of such fonts (since no font is available on all computers), or a downloadable font of that kind. Failing that, you might select two fonts, or two lists of fonts, carefully selected, so that you list them both or all and browsers will use them in a natural way: using, for each character, the first font in the list that contains it.
use B-Nazanin or others for persian content and use Open sans for english contect.
If you want to set B-nazanin for persian and set open sans for english, try this code in css:
body{
font-family: "Open sans","B-nazanin";
}
If I understand your question correctly, you will mix Farsi and English on one web site.
Assign two classes, perhaps "farsi" and "english" with appropriate font-family declarations. Then put the Farsi text inside <div class="farsi"> and the English in <div class="english">.
Edited to address mixing languages: You put the <div> around the primary language and use <span> for words in the other language.
I don't think there is an easy way to finely mix languages with different alphabets and even writing directions. Perhaps you can use a macro in your HTML composition tool, or something, to accomplish adding the necessary tags.
I'm facing this problem,
If opened in IE9 under windows 7, in my pre formatted html block \ is rendered as wong symbol ₩ if courier font is used. If I set Tahoma, e.g. it's ok. In chrome, even if courier is set, symbol is rendered as backslash.
How to fix it?
Edit: code that reproduces this:
<html><head>
<style>
pre {
margin-top: 10px;
padding-left: 7px;
padding-top: 5px;
margin-left: 50px;
font-family: courier;
background-color:#ddd;
}
</style></head><body>
<pre>
Can\'t
</pre>
</body></html>
I cannot reproduce the problem on my Win 7, so I still suspect the reason is that your system has an actual font under the name “Courier” (normal Windows 7 is not shipped with such a font). Either that font is broken regarding the backslash, or it simply lacks it and the browsers picks up the character from another font. In the latter case, that font might be broken.
There are surprisingly many fonts that have a glyph for “₩” U+20A9 WON SIGN where they should have a glyph for backslash. There has been some speculation about the reasons. But the point is that there should be no reason why such a font would be used unless your browser resorts to picking up backup fonts. In that case, IE might have been set to use e.g. Batang Che as the default monospace font – and it’s one of the fonts with that problem.
On the practical side, “Courier” should almost never be used. In systems that have a font under such a name, it is often a bitmap font that looks rather bad especially when font size is changed. Use “Courier New” instead. Or something better, such as
pre, tt
{ font-family : Consolas, Lucida Console, Courier New, monospace; }
As Raymond Chen pointed out in the comments, the browser has likely guessed the encoding incorrectly.
If you want to specify the encoding directly in the file, then you can use a meta tag in the head element of the page, like this:
<meta http-equiv="Content-Type" content="text/html; charset=my_encoding_here">
Where my_encoding_here is actually a string representing the encoding you used when creating the HTML. Common encodings are utf-8 and ISO-8859-1, but you should figure out exactly which encoding your editor is using and make sure you match it.
If you're serving pages like this, then you might choose to specify the encoding in your webserver, which will put the information into an HTML header when it returns the page.
I have a standalone HTML document I want to distribute, without any external dependencies. I'm using a non-standard font in this document that only some of my users will have installed.
For those users that do not have the font installed, I am including a copy of the font in an embedded SVG document at the top of the <body>. (I'm using a one-glyph font for this example, the real document is using a complete font.)
<svg style="display: none;"><defs>
<font id="MyFontElement">
<font-face font-family="MyFont" />
<glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" />
</font>
</defs></svg>
SVG fonts do not look as nice as ordinary fonts, so I only want the SVG font to be used if the font is not installed locally. If the font was defined in an external SVG document, I could use it at a lower priority than the locally-installed font like this: (fiddle)
<style>
#font-face {
font-family: "My Font";
src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
Unfortunately, none of the obvious variations seem to work for a font in the current document: (fiddle)
src: local("My Font"),
url("./#MyFontElement") format("svg"),
url("./#MyFontElement"),
url("#MyFontElement") format("svg"),
url("#MyFontElement");
Even without a #font-face declaration, the font is already available in the document as MyFont, the font-family specified in the <font-face />. However, this will be used at a higher priority than a native font named MyFont, so it is not an solution.
I hoped that I might be able to refer to it as local("MyFont")... (fiddle)
src: local("My Font"), /* local */
local("MyFont"); /* embedded */
...but that doesn't work either.
I could give the embedded font a different name and use it at a lower priority, style="font-family: LocalFont, EmbeddedFont", but I'm allowing users to import snippets from local files into the document and those local files will refer to the font only by the standard name. It would be possible to rewrite these references when they're imported, but I don't like that solution.
How do I refer to an SVG font embedded in the current document from a #font-face declaration?
Convert the font to a data URI and embedded it in the CSS declaration: (fiddle)
<style>
#font-face {
font-family: "My Font";
src: url("data:application/octet-stream;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+CiAgPGZvbnQgaWQ9Ik15Rm9udEVsZW1lbnQiPgogICAgPGZvbnQtZmFjZSBmb250LWZhbWlseT0iTXlGb250IiAvPgogICAgPGdseXBoIHVuaWNvZGU9IkEiIGhvcml6LWFkdi14PSI5NTAiIGQ9Ik0wLDBMMCwxMDBMMTAwLDEwMEwxMDAsMjAwTDAsMjAwTDAsMzAwTDEwMCwzMDBMMTAwLDQwMEwyMDAsNDAwTDIwMCw1MDBMMzAwLDUwMEwzMDAsNjAwTDQwMCw2MDBMNjAwLDYwMEw2MDAsNTAwTDcwMCw1MDBMNzAwLDQwMEw4MDAsNDAwTDgwMCwzMDBMOTAwLDMwMEw5MDAsMjAwTDgwMCwyMDBMODAwLDEwMEw5MDAsMTAwTDkwMCwwTDYwMCwwTDYwMCwxMDBMNzAwLDEwMEw3MDAsMjAwTDgwMCwyMDBMODAwLDMwMEwxMDAsMzAwTDEwMCwyMDBMMjAwLDIwMEwyMDAsMTAwTDMwMCwxMDBMMzAwLDBMMCwwTTMwMCw0MDBMNjAwLDQwMEw2MDAsNTAwTDMwMCw1MDBMMzAwLDQwMFoiIC8+ICAgIAogIDwvZm9udD4KPC9kZWZzPjwvc3ZnPgo=") format("svg");
}
</style>
<p style="font: 3em 'My Font';">
Alphabet
</p>
There's one caveat: you can't use an ID specifier (#MyFont) with a data URI like this. Therefore you can only have a single font in the encoded file, rather than having multiple and referring to them individually. (Not that you'd want to; duplicating the data for multiple embedded fonts in the declaration for each font would be a huge waste of space.)
Specify the local font name first in the css, then the embedded font name:
p {
font-family: MyFontLocalName, MyFontEmbeddedName;
}
http://jsfiddle.net/gilly3/xX6Bv/5/
If the MyFontLocalName is installed on the user's computer, that font will be used, otherwise MyFontEmbeddedName will be used.