Im using ▾ and ✓ characters which are inputted by the user so I chant use their full html value (something like this ✓).
These are working fine in Chrome, FF and IE9. However in IE8 they are replaced by a square character (see image below).
When I want unicode characters on IE8, I use
<span class="unicode">unicode characters here</span>
and
.unicode {
font-family: 'DejaVu Serif';
}
#font-face {
font-family: 'DejaVu Serif';
src: url('fonts/DejaVuSerif.eot');
src:local('DejaVu Serif'),
local('DejaVu Serif Book'),
url('fonts/DejaVuSerif.eot?#iefix') format('embedded-opentype'),
url('fonts/DejaVuSerif.woff') format('woff'),
url('fonts/DejaVuSerif.ttf') format('truetype'),
url('fonts/DejaVuSerif.svg#font') format('svg');
}
Where DejaVu fonts are public domain fonts that provide a wider range of characters. You can download their .ttf fonts here, and convert them to the other types using online tools.
You can use the Wingdings font, but Mozilla and Opera are standard-compiliant. Wingdings is not standard (what a surprise coming from Microsoft) because not mapped to Unicode, and so should never be used on a website.
However, do not despair, most symbols are available in Unicode : check
http://www.alanwood.net/demos/wingdings.html
The symbol you want is number 252 in the list.
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
This is a general question about why certain font weights and styles need to be specifically included, but not others.
I use Open Sans and Roboto Mono web fonts on my website, hosted on Google fonts, with the basic <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono" rel="stylesheet"> statement in the HTML head. As one would expect, I don't have to specify that I want bold font weight or italic style text in the <link>; all browsers can generally handle <foo style="font-weight: bold"> and <foo style="font-style: italic"> and render those stylistic changes, even though it's technically a separate font (of the same typeface) that I haven't included.
However, if I wanted <foo style="font-weight: lighter"> (or <foo style="font-weight: 200">) and <foo style="font-style: oblique">, it won't render: lighter just looks like normal, and oblique looks like italic.
I know how to make it work, obviously; I'm just wondering two things:
How does the browser "make" the bold and italic (and bold-italic) versions of a typeface without the font?
Why can't it "make" the lighter and oblique versions?
NB: Typeface refers to the set of typographical symbols and characters in a particular shape (eg: Open Sans or Roboto Mono), and font is the typeface in a specific style (eg: Open Sans 400 italic or Roboto Mono 200 Italic)
You can find user friendly explanations to your question on the font-weight MDN page, including:
Meaning of relative weights
Base element Bolder Lighter
-----------------------------------------
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700
Common font weight mapping.
A more technical set of documentation can be found in official specs.
The current Candidate Recommendation CSS Fonts Module is Fonts Module Level 3 which is unchanged from the counterpart definition in Fonts Module Level 1.
In CSS Font Module Level 4 (currently working draft) there are a few notable changes proposed:
font-weight numeric values will vary from 1 to 1000
there might be additional strings mapped to particular numeric values (i.e: thin => 100, medium => 500, etc).
Browsers currently display the closest available font weight to 400 for font-weight: normal and the closest available font weight to 700 for font-weight: bold.
To make sure a particular font-weight is used, you need to:
load the weight
specify the exact numeric weight for your element(s).
To load multiple font weights from font files, use multiple #font-face declarations:
#font-face {
font-family: 'MyWebFont';
src: url('myfont-normal.woff2') format('woff2'),
url('myfont-normal.woff') format('woff'),
url('myfont-normal.ttf') format('truetype');
}
#font-face {
font-family: 'MyWebFont';
src: url('myfont-bold.woff2') format('woff2'),
url('myfont-bold.woff') format('woff'),
url('myfont-bold.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: 'MyWebFont';
src: url('myfont-italic.woff2') format('woff2'),
url('myfont-italic.woff') format('woff'),
url('myfont-italic.ttf') format('truetype');
font-style: italic;
}
#font-face {
font-family: 'MyWebFont';
src: url('myfont-bold-italic.woff2') format('woff2'),
url('myfont-bold-italic.woff') format('woff'),
url('myfont-bold-italic.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
In the above example, the file names don't really matter. What matters is that they point to the file containing the correct font style and font weight glyphs.
For Google fonts, it's easier. When loading more than just the default weight, specify all weights and styles as comma separate values, after the font-family name followed by a colon:
<link href="https://fonts.googleapis.com/css?family=MyFamily:n,i,b,bi" rel="stylesheet">
Besides n (normal), bi (bolditalic), you can also load numeric values: 400, 400i.
To find out more on how to load multiple weights, styles and subsets of the same font family from Google, you should read their "Getting started" page.
Note the required font styles, weights and subsets need to be available in order to be usable. If you request something that does not exist, Google will return the closest match to your request from available weights/styles/subsets.
You can easily see a list of available weights, styles and subsets on each font page and the correct URL will be generated for you by checking the appropriate checkboxes.
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
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;
}
I downloaded the Webfont Kit (for Quicksand font) from font squirrel website; and I am trying to display the word Erdös using the new font; using the HTML entry ö however, does not seem to work.
Looking at the list of glyphs for that font (Quicksand); I can see that they have the letter o (both capital letter and small letter) with two dots on top of it.
Here is what I'm getting:
As shown in the above picture, the other letters are displayed correctly (using the correct font); but not the o with two dots!
Here is my HTML code:
<h1 id="erdos">Erdös</h1>
Where I specify erdos in my css file to use that font!
Edit: I'm posting additional information/code about the question:
I downloaded the Webfont Kit from the Webfont Kit tab from the same page.
CSS:
#font-face {
font-family: 'QuicksandLight';
src: url('fonts/Quicksand/Quicksand_Light-webfont.eot');
src: url('fonts/Quicksand/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Quicksand/Quicksand_Light-webfont.woff') format('woff'),
url('fonts/Quicksand/Quicksand_Light-webfont.ttf') format('truetype'),
url('fonts/Quicksand/Quicksand_Light-webfont.svg#QuicksandLight') format('svg');
font-weight: normal;
font-style: normal;
}
h1#erdos {
margin-top: 0;
margin-bottom: 0;
font-family: quicksandlight;
}
I tested the output in both Chrome 27.0 and Firefox 21.0
The output of Chrome is:
The output of Firefox is:
On the Webfont Kit page at FontSquirrel, you need to select “Don’t Subset” in the dropdown “Choose a Subset:”. The default there is “English”, which apparently means that only Ascii letters are included.