This question already has answers here:
Do I need to wrap quotes around font family names in CSS?
(3 answers)
Closed 9 years ago.
When should the value for CSS 'font-family' have quotes around it?
I've seen both font-family: arial and font-family: "arial".
As a specific example, I declare a font this way:
#font-face {
font-family: 'entypo';
font-style: normal;
font-weight: 400;
src: url('/css/fonts/entypo.woff') format('woff');
}
What would be the correct CSS to have an element use this font-family?
You only need quotes when the font itself has a space such as "Times New Roman".
Arial does not need quotes, but some people use quotes such as "Arial" to be more consistent. It is simply personal preference.
Seen in Justin's below comment: font-family: times new roman; works without quotes (JSFiddle).
You can call your new #font-face using font-family: 'entypo'; as you would normally expect. (link)
Just going to answer from this:
http://www.w3.org/TR/CSS2/fonts.html#font-family-prop
To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:
body { font-family: "New Century Schoolbook", serif }
Font family names that happen to be the same as a keyword value ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', and 'cursive') must be quoted to prevent confusion with the keywords with the same names.
By the CSS 2.1 spec, a font name needs to be in quotes if it contains characters other than identifier characters (which is a broader concept than just “Ascii letters and digits”) and spaces. So font-family: foo bar is correct, and so is e.g. font-family: entypo of course.
Coding style is a different issue. It is always correct to quote a specific font family name (as opposite to generic names like sans-serif), so font-family: "entypo" is correct, too.
Very theoretically, a font name also needs to be quoted if a specific font family name coincides with a generic name (I don’t think anyone ever created such a font) or if its name contains leading or trailing spaces or consecutive spaces (but no one in his sense would name his font that way).
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?
A string queried from database look like this អាស័យដ្ឋានបច្ចុប្បន្ន 123, Street: National Road 3, ភូមិ ១, អូរឫស្សីទី ២, ៧មករា, ភ្នំពេញ តទៅនេះហៅថាភាគី«ក»។
I used font face font-family: 'Battambang', cursive;. The ASCII characters look good using that font, but the other characters inside the string look a bit cumbersome.
Rendering on browser, it looks like this:
If I remove font-face the non-Unicode characters look good, but the Unicode characters don’t.
Therefore, is there any CSS trick I can use to apply the font only to certain Unicode characters but not to others?
Since the Battambang typeface doesn’t contain those characters, they’re falling back to what you specified: cursive. Use the one that would normally be inherited instead.
font-family: Battambang, Roboto; /* or whatever it would be normally */
For typefaces that do contain characters you want excluded, you’ll also need to specify a unicode-range:
#font-face {
src: /* … */;
font-family: Battambang;
unicode-range: U+1780-17FF, U+200B-200C, U+25CC;
}
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.
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/
We are creating a site that uses both Japanese and English. We want to get away from the default Japanese fonts which can't use ClearType. Is there a way to tell the browser to use a different Japanese font JUST for Japanese characters (Like Meiryo) and another font just for latin characters (Like Helvetica) on the same page? We don't want any English words to use the Meiryo font.
We actually used a tip to specify English fonts first in the CSS from this article: http://www.lukew.com/ff/entry.asp?118
However, this doesn't work in IE. Even if we specify Helvetica, Verdana, or any other widely available font first and then the Japanese font in the CSS, IE will still use the Japanese font for English words. Firefox, Chrome, etc. work as expected.
(If possible we hope not to resort to something like wrapping each English word in a span)
I've solved my problem using 'unicode-range' CSS property.
You can find the details here:
https://developer.mozilla.org/en/docs/Web/CSS/#font-face/unicode-range
Example:
/* bengali */
#font-face {
font-family: 'Atma';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/atma/v2/tUcVDHNCVY7oFp6g2zLOiQ.woff2) format('woff2');
unicode-range: u+0980-09FF;
}
body {
font-family: 'Atma', arial, sans-serif;
font-size: 18px;
}
<p>Example is better than precept.</p>
<p>উপদেশের চেয়ে দৃষ্টান্ত ভালো।</p>
You cannot get around marking every language section with a class and font if you want this to work cross-browser. It cannot be done with only CSS.
You can apply a language class manually or automatically. Manually might be a lot of work to support and maintain, but is robust. Dynamically it can be done using a back-end script or Javascript, by scanning a string for characters that fall within certain unicode character blocks, and applying a language class accordingly.
You can find the block definitions here (Japanese is Hiragana and Katakana): http://www.fileformat.info/info/unicode/block/index.htm
I'd recommend the back-end way of doing this, because changing a font on the page might cause flickering or shifting of elements during page load.
Create css class for English and Japanese text.
.ja { font-family: meiryo, sans-serif; }
.en { font-family: arial, verdana, sans-serif; }
If entire page is in Japanese, add class="ja" to body tag, if there's mixed content, add class="ja" to the html element that contains Japanese text, for example:
<td class="ja">日本語</td>
How are you telling the page what language to print to screen?
If you are getting a variable can you not use this variable as a class which you use for a div of body.
<body class="english">
or
<body class="japanese">