I'm using the Amatic SC 700 normal from google fonts.
This is the link on google fonts : https://www.google.com/fonts/specimen/Amatic+SC .
The issue is that right now the char ? is converted in ® .
The css code I used is:
#import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);
body {
font-family: 'Amatic SC', cursive;
font-style: normal;
font-weight: 700;
}
The html looks like this :
<html> ???? </html>
This is a screenshot of the issue :
This is the jsfiddle link: http://jsfiddle.net/m4vev43a/
I tested this issue on:
Chrome Version 42.0.2311.90
Firefox 37.0.1
Opera 12.16
Any idea how I can fix this?
Are my browsers getting crazy?
Or it's a bug in the font?
Update:
When using :
#import url(http://fonts.googleapis.com/css?family=Amatic+SC);
So without the suffix :400,700 the question mark character is displayed properly.
Unfortunately using the above code + bold text is totaly messing up with the letter spacing in Chrome, Firefox, Opera.
This is a known issue with the bold version of the Amatic font, as can be seen in this bug report from November, 2011. Your font was implemented correctly, it's just that the font file itself has a bug.
A workaround is to use the regular variant for question marks. I know that's hardly a great solution but it seems there's not much else you can do.
One possible workaround I've used to recover this situation.
Note: is not perfect if you need to trust the letter spacing for each browser.
Actually the idea is :
define again the Amatic font in addition the std one, but without the :700
generate a special class to handle just the sentences with the question mark
#font-face {
font-family: 'Amatic';
src: url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5FtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/amaticsc/v6/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
.has-question-mark {
font-family: Amatic;
}
Related
I have this code :
<option> 🇩🇪 Deutsch</option>
or
<option> 🇩🇪 Deutsch</option>
and I get this on Firefox :
but on Edge it looks like this :
What have I done wrong ?
Sadly, Windows comes without system Emoji font containing colourful flag ligatures (and many more glyphs from Emoji land). Since Chrome and Edge rely on system fonts, we see those simple characters and not the ligature.
Firefox (still) embeds its own nice fallback Emoji font based on Twitters ("Twemoji Mozilla") to mitigate this. So the only way to get it working across browsers is to provide webfont.
There is nicely usable Mozilla's Twemoji font compiled for web usage by Maxime Euziere at https://xem.github.io/unicode13/emoji.html :
/*
Licenses for TwemojiMozilla.ttf: https://github.com/mozilla/twemoji-colr/blob/master/LICENSE.md#license-for-the-visual-design
Derived from: https://twemoji.twitter.com/
Source: https://xem.github.io/unicode13/emoji.html
*/
#font-face {
font-family: "Twemoji from xem.github.io";
src: url("https://xem.github.io/unicode13/Twemoji.ttf") format("truetype");
unicode-range: U+00A9-E007F;
/* #see https://github.com/mozilla/twemoji-colr/issues/56 */
}
:root {
font-family: "Twemoji from xem.github.io", Segoe UI Emoji, Segoe UI Symbol, Segoe, sans-serif;
}
<p>🇩🇪 Deutsch
Is there a way in HTML or Angular to show some text if an emoji is missing? For instance, the thinking face emoji is missing in Windows 8, so I was hoping to show some alternative text if possible.
The emoji code is 🤔
My HTML is simple:
<div ng-switch-when="folder"
ng-bind-html="Some text 🤔">
</div>
I would recommend to use #font-face to import a font that you know contains the required unicode characters. Then, you can either use that font for all of the affected paragraphs, or just for the "emojis" by using the unicode-range descriptor.
Example:
#font-face {
font-family: 'Someemojifont';
src: url('some-emoji-font.otf');
unicode-range: U+1F914; /* thinking face */
}
I understand that this isn't an exact answer to the question at hand, but it might still be a valid solution to the problem that motivated the question.
I have a set of embedded fonts that work fine in Firefox, Chrome, Safari - but, surprise, surprise, not in IE (v11, but tried in 10 and that didn't work either).
I can get some to load in IE, but not others. Sample of css:
/* working */
#font-face {
font-family: 'FoundersGroteskWeb-Semibold';
src: url(./fonts/FoundersGroteskWeb-Semibold.eot);
src: url(./fonts/FoundersGroteskWeb-Semibold.eot?#iefix) format('embedded-opentype'),
url(./fonts/FoundersGroteskWeb-Semibold.woff) format('woff');
font-style: normal;
font-weight: normal;
}
/* not working */
#font-face {
font-family: 'FoundersGroteskX-CondensedWeb-Bold';
src: url(./fonts/FoundersGroteskX-CondensedWeb-Bold.eot);
src: url(./fonts/FoundersGroteskX-CondensedWeb-Bold.eot?#iefix) format('embedded-opentype'),
url(./fonts/FoundersGroteskX-CondensedWeb-Bold.woff) format('woff');
font-style: normal;
font-weight: normal;
}
The fonts are served, all named correctly, etc. One difference I noticed is that all the other browsers were loading the woff file, whereas IE was using the (first, non #iefix) eot file. So I tried deleting all references to the eot files, forcing IE11 to use the woff. Again, it loaded the first one fine, but didn't use the second one (all other browsers loaded both with no problem).
When I check in the network tab on IE, I can see the 200 response for the first font, but there's nothing at all for the second font, looking like it might be choking on the parse of the css. However, given that the two declarations are identical apart from the font name, I can't see why that might be.
Anyone got any ideas what else I can try, because I've run out of straws to clutch at?
IE 9 (and I think 10 and 11 as well) have 31 character limit on font face name declaration. Please try and rename your font name to "FoundersGroteskX-CndWeb-Bld"; which is 30 characters, just to be safe (because this limitation of 31 characters is including quotes and semi-colon.
as per your earlier suggestion I also tried to minimize font names but this still does not work in latest IE:
</style>
<style type="text/css">
#font-face {
font-family:"Avenir";
src: url("./Fonts/Avenir.eot");
src: url("./Fonts/Avenir.eot?#iefix") format("embedded-opentype"),
url("./Fonts/Avenir.woff") format("woff");
}
</style>
Do you think IE no longer accepts woff fonts?
Check font download security, it should be enable to load font icon.
Navigate to:
IE>Internet options>Intranet>Custom Level>Downloads>Font Download
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";
}
I have some custom icons that I want to use as a webface font:
However, I can't seem to get them displayed.. All I get to see is the corresponding letter ('a' and 'f'). As shown here You'll also see the working example of the font 'socialico'
Use #font-face In the past I had lots of troubles with font-face but if you type it out right it works fine:
#font-face {
font-family: 'Custom Font Name';
font-style: normal;
font-weight: 400;
src: url(linktofont.com/font.ttf) format('truetype');
}
Replace "Custom Font Name" with what you would like your font to be named when using CSS. and replace "linktofont.com/font.ttf" with the path to the font.
EDIT
Sorry, I read that wrong, I found the problem. If you look at your #import
#import url (http://pastebin.com/raw.php?i=sc4rCApa);
You have a space between "url" and your path, so reaplace it with:
#import url(http://pastebin.com/raw.php?i=sc4rCApa);
I had the same issue - and all my syntax was correct. I was instructed by a friend that it may be the font itself that was broken or incorrect. Here's how it was resolved:
(1) Used original font downloaded from fontfabric.com
(2) Went to www.fontsquirrel.com to generate a new font kit... including the css
(3) Uploaded fonts generated from FontSquirrel
(4) Replaced my CSS with the css generated from FontSquirrel for the #font-face section
(5) Updated the name of the font that is called for later in the CSS
and that was it.... worked like a charm!