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.
Related
After poking around many stylesheets for different websites, I have consistently noticed font or font-family values that are used which do not appear to use correct font-family names. I am wondering if I just don't fully understand how to reference font family names as used by CSS.
For example, on this stylesheet, the authors use the following several times:
font-family:"minion-pro";
however, as far as Google tells me, no such font family actually exists. For example, if you Google the following:
font minion-pro
none of the first several hits show anything "minion-pro", but rather all the hits are for "Minion" or "Minion Pro"; the fifth hit is for this link, which as far as I understand CSS, requires the user to reference this font as
font-family: "Minion Pro";
I have also seen this on some stylesheets for the font "Myriad Pro" which, when you Google font myriad-pro, only return hits for the font "Myriad" and "Myriad Pro". That is, in CSS stylesheets, I have seen this
font-family: "Myriad-Pro";
but to me, this is not correct, and should be
font-family: "Myriad Pro";
So my simple question is: are fonts which contain spaces able to be rendered properly if the spaces are replaced with hyphens?
I believe the answer to this is "no" based on the docs - I cannot easily test this because I do not have easy access to these fonts and I am at work right now. (when I try Codepenning this with "Myriad Pro" or "Minion Pro" nothing happens - fonts not recognized)
It depends on what you name the font-family when you create the #font-face font definition to serve your font.
Like this:
#font-face {
font-family: 'montserratregular';
src: url('/content/fonts/Montserrat/montserrat-regular.eot');
src: url('/content/fonts/Montserrat/montserrat-regular.eot?#iefix') format('embedded-opentype'),
url('/content/fonts/Montserrat/montserrat-regular.woff2') format('woff2'),
url('/content/fonts/Montserrat/montserrat-regular.woff') format('woff'),
url('/content/fonts/Montserrat/montserrat-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
In this case I would reference font-family: 'montserratregular'; in my css. But if in the #font-face declaration I defined font-family: 'montserrat-regular'; or font-family: 'montserrat regular'; then I would use that in my css.
In the stylesheet you linked the author probably has his #font-face declarations in a separate css file where he defines Minion Pro as "minion-pro", this is common.
Other fonts that you don't serve to the client, System Fonts, should be referenced by their system font name. You can use a site like CSS Font Stack to see what those names are and the likelihood (in %) that they are a system font on Windows or Mac. It also provides common fallbacks for fonts (i.e. you could do this: font-family: 'Myriad Pro', 'Myriad-Pro', 'MyriadPro', Arial;).
A font like Myriad Pro or Minion Pro don't usually ship as an installed system font by default, so thats why we serve the font to the client using the #font-face approach. I user could install Myraid Pro on their machine and then it would be a system font, but you would have to know the exact name and you can't guarantee a user has a unique font or require users who visit your site to manually install it.
I used some special fonts in my asp.net web application .Which are not found on every machine (which use that web application) and due to which that font is not visible to client.how can i resolve it
As mentioned in this W3Schools article you should always specify fallbacks when specifying a font-family:
The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first font, it
tries the next font, and so on.
Start with the font you want, and end with a generic family, to let
the browser pick a similar font in the generic family, if no other
fonts are available.
You can do this in CSS with the font-family property, simply by specifying a comma separated list of different fonts. As mentioned above it should end with a generic family.
The following example prefers Arial, but falls back to the Helvetica "font-family" when Arial is not found. If neither of both is available it then falls back to a font of the sans serif "generic-family".
font-family: Arial, Helvetica, sans-serif;
You should use a webfont in this case. The browser will download your specific font and display the page as you want.
See for instance (never used, first hit in Google search): https://www.web-font-generator.com/ Mind the second checkbox!
Or see https://www.google.com/fonts
I have a script which converts HTML to PDF. On Windows, it runs just fine.
But when I run the script on Ubuntu, the Arial and Courier fonts do not work correctly.
I presume this is because those fonts don't come with Ubuntu by default. That's fine, it's not a big deal.
I'm just wondering what I should change the following to, such that it will still work on Windows and use a font that is close to Arial and Courier respectively on Ubuntu?
font-family: "Arial";
font-family: courier;
Thanks
For the Arial-esque font use
font-family: Arial, sans-serif;
and for the Courier-esque font use
font-family: Courier, monospace;
These rules basically mean: take the first one if available, otherwise the next one, otherwise repeat until the end. It should work in normal CSS (not sure about your particular implementation, though).
sans-serif and monospace are browser or system dependent values for fonts that have been specified as those font classes (e. g. “DejaVu Sans” and “Ubuntu Mono”).
One way is to use Web Safe fonts. Here's a list of Web Safe fonts you can use:
CSS Web Safe Fonts
Another way can be to use a font from your web directory or fonts available on the web from services like Google Fonts,etc.
Here's its usage:
#font-face {
font-family: fontName;
src: url('/font/xyz.woff');
}
Check here for reference on font face rules.
Check this for getting started with Google Fonts.
Check this page for the Font Stack, showing the compatibility of fonts with different OS.
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. :)
My website uses a rather obscure font that about half the computers can properly read. The font is "Lucida Console".
On the computers that can't read this font, they get displayed ugly Times New Roman, is there a way to set the font of my website to Lucida Console but on computers that can't read it, view Arial instead? Using CSS.
you can specify multiple fonts:
p {
font-family: "Times New Roman", Times, serif;
}
The browser will try the first one, if that one isn't available the second, and so forth. In the end it uses the family serif, so the browser chooses any serif font. You should use the monospace family.
So in your case, something like this is what you want:
p {
font-family: "Lucida Console", "Courier New", monospace;
}
Further tips:
Google css font stack for suggested lists of fonts aimed at certain styles of fonts. 'font stack' is the colloquial name for these font lists.
Think cross-platform. Consider adding fonts commonly found on Mac, Linux, iOS, Android, Windows, and other platforms your readers may be using.
Always include a generic-family name at the end of your font stack in case the user has none of your desired fonts:
serif
sans-serif
cursive
fantasy
monospace
Include quotes around fonts named with multiple words, or simply quote all font names.
You can also serve that obscure font with your website (if you are legally able to) using #font-face. It's easy and works even in IE6 :).
Read about it here: http://www.miltonbayer.com/font-face/