Shwan Namiq Shwan Namiq - 2 months ago 12
CSS Question

Is require use Generic font families name with each google font names

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';

Answer

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 your even 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 need 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.