I am using a custom font which is missing the special character: "#", but although I add more fonts on the font-family of the element the missing character isn't being replaced. Shouldn't it be displayed?
#font-face {
font-family: 'mainFont';
src: url('fonts/font1.eot');
src: local('☺'), url('../fonts/font1.svg') format('svg'), url('fonts/font1.woff') format('woff'), url('fonts/font1.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
&
.text {
font-family:"mainFont", Verdana, sans-serif;
}
html
<span class="text">email #</span>
Specifying multiple font-families instructs the browser to look for alternatives if the entire font is missing. It won't work for single characters.
You'll have to add the character to your font, or use a different font when using the # character.
Here is a list of Open-Source Windows font editors that may help.
As a really crappy alternative, you could use jQuery to find all # characters when the document loads and wrap a span around them that has a different font family. But that's likely to cause flickering on the user's screen.
I add more fonts on the font-family of the element the missing character isn't being replaced. Shouldn't it be displayed
No, it won't. Using multiple font names is useful when the first or second font is not found, then browser looks as the third one.
It seems the # sign character doesn't exist in your mainFont character set.
Related
My goal is to apply a custom font that I have to a range of Unicode characters (Chinese in this case), and have the remaining characters retain their font.
Via this Stack Overflow question: How to apply font-face only to a certain range of Unicode characters and looking at the source code of this Chrome extension that forces custom fonts, I was able to create the below CSS code. The code is to be inserted as <style> element contents above the <head> of a webpage.
#font-face {
font-style: normal;
font-family: "李国夫手写体";
src: local("李国夫手写体");
unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FE4F, U+20000-2FA1F;
}
#font-face {
font-style: bolder;
font-family: "李国夫手写体";
src: local("李国夫手写体");
unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FE4F, U+20000-2FA1F;
}
:not(pre):not(code):not(textarea):not(tt):not(kbd):not(samp):not(var) {
font-family: "李国夫手写体" !important;
}
This does indeed change the fonts in the range to my custom one. However, it also sets all the fonts used by other characters outside the range to a default value.
Before:
After：
*Here the difference in English fonts is not super clear, but there are changes if you look closely at the font. The difference is however significant with different size/custom/fancy fonts — see below image.
Is there any way of applying a custom font to only characters in some range without affecting other characters?
Is there any way in CSS to specify a different font to be used just for Chinese characters?
Specifically, I have some user inputted text which can contain either standard English, Han characters or a mix of both. I'd like to use Myriad Pro for non-Han characters, and Kaiti Std for all Han characters.
I realize this can be done by running over the content with JavaScript, adding span tags around the Chinese characters and then applying styles to them, but is there any more standard/efficient way?
I don't care about old browsers, although it should work in the latest version of Chrome/Firefox/Safari/IE.
You can specify a unicode-range for font-faces so that that each font only applies to a subset of unicode characters.
http://dev.w3.org/csswg/css-fonts/#composite-fonts
A very basic implementation would look something like (adjust for font files and formats as needed):
#font-face {
font-family: 'MyFonts';
src: local('Kaiti Std');
unicode-range: U+4E00-9FFF;
}
#font-face {
font-family: 'MyFonts';
src: local('Myriad Pro');
}
body {
font-family: 'MyFonts', sans-serif;
}
Some interesting browser quirks/work-arounds documented at http://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/
I'm using a custom icon-font using CSS3's #font-face and in older version of Google Chrome, only the unicodes are showing and are not being replace or rendered in my custom font, which shows the glyphs for those unicodes.
Here is the #font-face syntax that I am using:
#font-face{
font-family:'glyphs';
src:url('../fonts/glyphs.eot');
src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphs.svg#glyphs') format('svg'),
url('../fonts/glyphs.woff') format('woff'),
url('../fonts/glyphs.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Any idea why the unicodes are showing and not the symbols that are part of the icon-font?
You're possibly running into unicode-range limitations. As described here you can define in a font-face declaration which Unicode characters are covered. It could very well be that older Chrome versions only replaced Latin characters by default. You should be able to fix this by adding this to your font-face declaration:
unicode-range: U+00-FFFF;
Having said that, it could very well be that you're only having a local issue. Check in your Chrome settings, under Advanced Settings, under Web Content click Customize Fonts, then at the bottom check the current setting for Encoding. Changing its value to "Unicode (UTF-8)" could solve the issue as well.
Try switching the orders of the fonts you are loading. Some browsers, even older version of chrome, load svg fonts in weird / incomplete ways.
Try:
#font-face{
font-family:'glyphs';
src:url('../fonts/glyphs.eot');
src:url('../fonts/glyphs.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphs.woff') format('woff'),
url('../fonts/glyphs.ttf') format('truetype');
url('../fonts/glyphs.svg#glyphs') format('svg'),
font-weight: normal;
font-style: normal;
}
I may be going out on a limb here, but is it possible that the document displaying the font either a) declares a character encoding other than UTF-8 / UTF-16 (or isn't explicitly declared) or b) the html document is saved in an encoding other than UTF-8 / UTF-16?
A very common problem causing websites to display characters incorrectly is having a different declared character encoding in the HTML than the encoding used to save the HTML document. Also, the use of characters that are part of either of these encodings can create issues.
You should post the HTML code as well for us to answer better. I'm assuming you are using data-icon attribute in HTML. In that case, you should add this code after your font-face css code.
[data-icon]:before {
font-family: 'glyphs';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
I've had some problems with relative paths, old browsers and font-face declarations in the past: you might want to try with a fixed path (/someFolderInRoot/fonts/glyphs.svg) or a relative path under the css file-path (fonts/glyphs.svg).
Does it all work in a newer version of Chrome and other browsers?
Chrome installs updates automatically for most users, so perhaps you're making the website backwards compatible for a version nobody uses.
I'm trying to use androids roboto font on a website it works fine until I get a german letter in a text then it looks like the font-weight is changed.
Its imported like this:
#font-face {
font-family: 'RobotoLight';
src: url('Roboto-Light-webfont.eot');
src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-Light-webfont.woff') format('woff'),
url('Roboto-Light-webfont.ttf') format('truetype'),
url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal;
}
and then it looks like bellow.
Would this be of a faulty font or because of a css setting? Any suggestions of how this could be fixed?
Answer: the font is faulty. If you want to use non-english characters and the Roboto-font dont download the web-prepared one. It seems to be reduced to be quicker to load and is there for missing some characters. Download the original and convert the fonts yourself.
Something is wrong with the font, but without more information (where did you get the font from, what did you do with it?), it is impossible to say what went wrong. But assuming you mean the Roboto font distributed at developer.android.com (which is distinct from the Google font with the same name, by a different designer), just download their font package, unzip it, process it with Fontsquirrel #font-face generator, and use the CSS provided by the generator. I just tested, and German characters appear OK.
The characters that look bolder might be from a normal (weight 400) typeface of the font, or from a different font, presumably because the light typeface does not contain them.
i am currently building a website which i am using a custom font for. The font is not avaible # google webfonts, so i had to download the font and load it through #fontface.
I used the markup from the examples from the site where i downloaded the font.
Link to the font - http://www.fontsquirrel.com/fonts/Colaborate
heres the css markup
#font-face {
font-family: 'ColaborateRegular';
src: url('ColabReg-webfont.eot');
src: url('ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
url('ColabReg-webfont.woff') format('woff'),
url('ColabReg-webfont.ttf') format('truetype'),
url('ColabReg-webfont.svg#ColaborateRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The font works fine on the webpage , but to get to the problem.
I need to use swedish special characters Å Ä Ö - and they just get super weird on the webpage.
heres a image
http://oi44.tinypic.com/2r4tmo0.jpg
What could possibly be the problem? In the photoshop i've recieved from the designer they all look allright with the font.
Thanks!
The special characters aren't the characters of the font Colaborate, they are from the fallback font I suppose.
You need to make sure the package from fontsquirrel contains those special chars.
I see that your font set doesn't include those special chars and for this the browser uses your default font family. You should pick a set that supports them.