Hi I am doing styles for my website but I'd like to know what's the best pracice for the font-family property in CSS:
Should I use quotation marks for the font's names?
font-family: Sora-Bold, sans-serif;
or
font-family: 'Sora-Bold', 'sans-serif';
Thanks
The first font is one downloaded from Google Fonts while the second is a secondary font specific to the Operating System.
Related
As we know when register any google font url in your website and then can use it during font-family css property, after each google font name we see the Generic font families name like sans-serif, serif, cursive and monospace like these exapmles below
font-family: 'Tulpen One', cursive;
font-family: 'Ubuntu', sans-serif;
font-family: 'Trykker', serif;
font-family: 'Ubuntu Mono', monospace;
Is google fonts work with font-family property without using Generic font families name? and only using google font name? like this examples below
font-family: 'Tulpen One';
font-family: 'Ubuntu';
font-family: 'Trykker';
font-family: 'Ubuntu Mono';
This question highlights a misunderstanding of CSS - the font-face rules you get from google tell the CSS engine which bytecode to use as font-resource for specific font families (and at which style/weight). That's all it does, and can do. Whether you use external fonts from Typekit or Google or github.io or even your own locally hosted ones.
In contrast to this, your page CSS is responsible for saying which font-families the browser should used for specific content: if you list one or more font-families then the browser will try each of those until it finds one that supports the text it needs to style, and it checks that for every letter. If there's a single letter that isn't supported by one font-family, it'll check a next font. And if it runs out of fonts to check (for instance, you only lists a single font-family value) then the browser will just guess, and pick whatever it feels like, which you don't want it to do.
So you (and only you) get to make sure your page CSS has a correct font-stack. Especially when you rely on external font resources, it's entirely realistic that some of the time those will not be available and your font-family instruction for that font will fail: what then? So at the very least always add the generic font family, but also add one or more of the "websafe" fonts in between. Will it look perfect? No, of course not, but it will look better than a complete guess by the browser.
Keep your generic category keywords, and add some more:
font-family: Ubuntu, Tahoma, Geneva, sans-serif;
Use full font-stacks, because you don't control the internet. Plan for when it doesn't do what you want.
The Liberation Sans Narrow font is included with many versions of Microsoft Windows. It is a discrete font, defined by the file LiberationSansNarrow-Regular.ttf.
How, in CSS, can this font be specified? Simply specifying:
font-family: "Liberation Sans Narrow";
will not work.
Note that specifying:
font-family: "Liberation Sans";
will work to specify the Liberation Sans font, which is defined by a different TrueType font file.
I only need the CSS code to work in Firefox. It is perfectly acceptable (and expected) that it will only work in browsers running on systems that have that specific font installed.
Note that I don't want to approximate Liberation Sans Narrow; I want that specific font to be used due to the clarity of rendering.
I want to specify this font for modifying the chrome within Firefox using userChrome.css.
it depends on how the file has been included in the page.
1) font included through url then the file would have the font name used for it. we need to use the same font name
2) font included locally through the font-face then we need to use the name we mention to that font
I tried to copy the font of this website menu but when I put the style in my own WordPress CSS theme I still get the bold version of it. Is there a special trick so I can get the light version of the font?
Got the font the same way loaded in what they have.
If you are indeed looking for the font Montserrat and you want the light version, you can use this import reference:
#import url(http://allfont.net/allfont.css?fonts=montserrat-light);
And you can use it like this in css:
font-family: 'Montserrat Light', arial;
More information about this font can be found here: http://allfont.net/download/montserrat-light/
It looks like the Google font Montserrat:
http://www.google.com/fonts/specimen/Montserrat
It seems this font only comes in Normal (400) and Bold (700):
http://www.google.com/fonts#UsePlace:use/Collection:Montserrat
For the Normal version of the font, try adding:
font-weight: 400;
to your CSS. Also, make sure you're referencing the font correctly by importing it first:
#import url(http://fonts.googleapis.com/css?family=Montserrat);
then adding the style to the correct element:
font-family: 'Montserrat', sans-serif;
As title already says: font-face does not work with my Chinese fonts.
I have downloaded some Chinese fonts, but for some reason these are not recognized by my css.
This is the css I use:
#font-face
{
font-family: 'chinese';
src: url('chinese.ttf') format('truetype');
}
html {
height:100%;
font-family:"chinese";
}
Now, if I change the url to a 'normal' font, it works; also for downloaded fonts (I tested it with Din). Unfortunately the 'normal' fonts do not support Chinese, so the characters will stay unaffected.
Both fonts are located in the same folder as the css file, so the url is not the problem. Also all character sets are correct (or else I couldn't see the default Chinese at all).
Is there maybe some extra thing I have to do for Chinese? Or what is it?
When declaring a Chinese font family, it’s typically a good idea to type out the romanization of the font (for example, “SimHei”) and declare the Chinese characters as a separate font in the same declaration. What this does is help reference the font file regardless of weather it’s been stored in the local system under its Chinese or western name – you’re covering all your bases here.
Example :
font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
For Your Reference : Good Rules for Using Chinese fonts in CSS
I think this may help you to resolve your problem.
refer this post,
I think you need the same answer :)
http://stackoverflow.com/questions/15756093/is-the-css-right/15756147#15756147
convert fonts to "woff"
that will solve your purpose..
Sample :
#font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 700;
src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}
you need to modify font name and url :)
As far as I know, there's a service based in Taiwan can help you use different Chinese font.
http://en.justfont.com/fonts
Due to the large size of Chinese font file, it's recommended to use Google cloud service. But there's no appropriate Chinese font on it. So you can give it a try on this justfont web font service.
Select any font you want for specific font weight. Then it'll be added to your project.
Choose your selector like .notosans, #notosans or h2
Click "JS" button and get your code for your setting
Add it befor <body>
Insert your class or id.
Give it a try and get your beautiful Chinese font. :)
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">