Basing on your experience in frontend and web applications, can you provide good and solid source or list with web-safe fonts? Or any other good tool ensuring font safety in web browsers?
Most of the time I was using Squirrel Fonts but a lot of fonts, which my designers use, are blocked there and the only way I can show them are PNGs.
There's no absolute safety, unless you're going with generic classes like "serif", "sans-serif" etc.
Here are some resources that can give you an idea about the most prevalent fonts:
https://web.archive.org/web/20160610001431/http://www.awayback.com/revised-font-stack/
http://cssfontstack.com/
You'll see that no single font exists on all operating systems. The best thing you can do is to use a font stack that covers the greatest percentage and hope for the best. Using a sensible font stack is the way to go...
You can generator font from here also http://www.font2web.com/ & you can use Google fonts also http://www.google.com/webfonts
There is no definitive list of web safe fonts that I have found. The research gave me some basic idea but then I had to experiment on my own machines. I wanted something that would work on Windows, Mac, and Linux machines. Luckily I had one of each.
There are 5 types of fonts recognized by HTML, namely serif, sans-serif, monospace, fantasy, and cursive. However, I see 6 types myself, being as cursive breaks down into scripts and handwritten fonts in my mind. What I came up with for 'web safe' font stacks is as follows:
/* Web Safe Font Stacks */
.head { font-family: Georgia, 'Times New Roman', serif; } /* H1-H6 */
.para { font-family: Verdana, Arial, sans-serif; } /* Paragraphs, body text */
.mono { font-family:'Courier New', Courier, monospace; } /* code, pre, etc. */
.fant { font-family: Papyrus, Impact, fantasy; } /* Fantasy */
.curs { font-family:'Apple Chancery', 'Lucida Calligraphy', cursive; } /* Cursive */
.hand { font-family:'Comic Sans MS', Chalkboard, cursive; } /* Handwritten */
I hope that helps...
The list of “safe” fonts, if that means a list of font names that will give you the desired rendering in all situations, or even in almost all situations, is exactly the empty list.
Most purported lists of “web-safe fonts” fail immediately if you test them on Android, for example.
If you actually meant to ask about the problems of using embedded fonts (with #font face), I suggest that you check the previous questions and answers on them first.
Related
body {
background-color: silver;
color: white;
padding: 20px;
font-family: Arial, Verdana, sans-serif;
}
What does it mean when there are multiple csv font families, like above?
It means that the font will fall back to the next font listed if the client's browser doesn't have the prior font available.
By listing out multiple fonts, you can ensure the client gets to see the font you want to display even if the first font you have listed is not available in their browser.
In your example:
body {
background-color: silver;
color: white;
padding: 20px;
font-family: Arial, Verdana, sans-serif;
}
Arial will fallback to Verdana which will fall back to sans-serif
Best practice:
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
As an interesting tidbit font-families can be significant on a character by character basis:
The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not simply stop at the first font named in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph that can display a character needed, the later available fonts are tried. However, this doesn't work in Internet Explorer 6 or earlier.
They're fallback options. The "sans-serif" is a generic family meaning the browser will select a default font that is also sans-serif.
I was searching here and in Google for a couple of hours but I could not find any clue on my issue, or I found some answers with non stable or poor supported solutions.
To make it short and clear I have a web page with a menu bar, where I use a condensed font from "Google Web Font":
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin">
Then I have a CSS like this:
.menu {
font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-size: 23px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
text-align: left;
}
What I want to do is to have font-size: 23px; assigned to font-family: 'Yanone Kaffeesatz' and font-size: 18px; assigned to font-family: 'Trebuchet MS', etc for the others.
Why I want to do that? Because if the user is offline or is unable to download the font from http://fonts.googleapis.com the layout get messed up, because 23px is right for the condensed font 'Yanone Kaffeesatz', but is very large for the others (almost the double in width).
Is there a way to do something like this? (just to explain the concept)
font-family: 'Yanone Kaffeesatz'[size:23px], 'Trebuchet MS'[size:18px], Arial[size:20px], Helvetica, Sans-Serif;
Sass can't really help here since it doesn't actually run on the client. Sass simply compiles into CSS. Also, I'm pretty sure there's no real way to get CSS to set various font-family/size pairs either.
I know this doesn't really address your "with the same class" bit, but as far as I know, the best way to do this is going to be JavaScript, which is pretty unfortunate because setting typeface/sizing pairs is something more people should do. David Walsh wrote an article about the Google Fonts API and mentions some of the methods the JavaScript font loader provides.
By defining an alternate body class with the non-webfont styles, you can use the inactive callback to fire off a function to apply that class.
There are methods of doing what you're asking, but not reliably, and not with Google Webfonts, since you have no control over the request made to Google's server.
You can try it with Sass, a CSS pre-processor. Sass provides the conditional implementation of CSS styles.
Here's:
Conditionals & Control Structures
https://gist.github.com/chriseppstein/674726
This question already received answer on SO. For example:
css different font sizes on different families
Specifying different font-sizes for different font-families
Assigining different font-size per each font in one font-family
In addition, there are several external references like:
Specifying different font-size for different fonts in a font-family
Setting Multiple Font Values
Hope these help :-)
I've noticed a significant difference in rending of Open Sans (Google Web Font) from Chrome, to Safari/Firefox. I attach two photos, the first being chrome and the second safari.
All I have in the stylesheet is:
font-family: 'Open Sans', sans-serif;
font-size:14px;
Hope you can help, as I really like the chrome (first image) rendering but HATE the other one!!
Add to head
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
CSS rule
.btn{
font-family: 'Open Sans', sans-serif;
font-weight:300;
text-rendering: optimizeLegibility;
font-size: .9em;
}
I've had luck in the past using font-weight: lighter!important; on fonts that appear bolder and completely different than what they are intended to look like. Each browser interprets fonts differently. Google Web Fonts tries its best to serve the correct versions, but sometimes there are drastic changes between browsers and operating systems.
Hope this information helps! Let me know if this solution works, otherwise I can look into it further. Open Sans is a nice font for web, nice choice :)
I added directly this line im my header and it's working!
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
.nav > li > a {
color: #000; font-size: 13px; font-weight: 600;
}
Instead of just calling the font without sizes in the Header and defining it afterward as bold, a method who doesn't work.
There is an issue where Safari renders fonts at fixed sizes and other browsers render them more exactly:
example at tech.Ozake.com
So if you request your text to be a size that falls between two of Safari's steps, you will get a different result in Safari than in other browsers.
So depending on how you declare the font sizes and how the window is sized, you will get differently-sized results.
This workaround helped me to make Open Sans to look very close in different browsers.
<script>
function loadCss(path){
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", path);
document.getElementsByTagName("head")[0].appendChild(fileref);
}
if (ViewUtil.isChromeBrowser()) {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
} else {
loadCss('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
}
we are forcing a bit 'bolder' version of font for chrome
You apparently didn't reset the default browser CSS, try setting font-weight explicitly.
I'm having trouble with some CSS.
Currently I'm using #fontface which works fine and dandy.
However for the times that it doesn't I have implemented other fonts to be read however I'd like to style them all a bit differently.
For an example, if Rockwell is displayed I'd like the font-weight to be set to bold. But not if it is Times New Roman.
Furthermore, I'd only like the "letter-spacing: -4px;" to apply if Times New Roman is being displayed.
Is this even possible? And if so, please assist with some code.
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia; letter-spacing: -4px; }
h1 span{ font: 88px Times New Roman, Georgia, serif; letter-spacing: -4px; }
You have expressed yourself clearly, don't worry.
I do not think there is a direct solution, however in some cases you can use this workaround.
Embed font.
Detect if you succeed (http://www.lalit.org/lab/javascript-css-font-detect/)
If yes/no add to <html> class="fontName" attribute.
In CSS add special declarations, like .fontName body { font-weight:bold; } - be prepared it means a lot of work. Especially with bolding - keep in mind how does <strong> will look like.
Good luck ;)
As every workaround it has some issues - like JS availability and so on. Maybe it will work for you.
What you are trying to do is definitely possible. In order for your script to work as you have it written. You need to follow the steps below:
Upload the font to your CSS directory (if thats where you want to host the font). (You can't just call the ChunkFive font without uploading the font to the directory your CSS is in based on your code)
Specify the #font-face above all your other CSS styles where you plan on using the font.
#font-face {
font-family: "ChunkFive";
src: url('chunkfive.ttf'); // Or whatever the font name is
}
Once you have accomplished steps 1 and 2 you can then call your font like you specified above :
h1{ font: 88px 'Chunkfive', Rockwell, Times New Roman, Georgia}
For a more definitive guide into font-face and CSS3 fonts I suggest reading this very thorough and informative blog post:
http://webdesignerwall.com/general/font-face-solutions-suggestions
Cheers and goodluck
Use two classes, one for each font
.font1 { font-family: 'Chunkfive'; font-weight: bold; }
.font2 { font-family: 'Times New Roman'; letter-spacing: -4px; font-weight: normal; }
Then in your HTML, use them like
<h1 class="font1">...</h1>
<div class="font2">...</div>
I made a cross-stitch pattern generator.
Some of the people who use it say that once a pattern is generated, they can't see the Unicode symbols rendered in the pattern. Here's the CSS I'm using in a sample fix to test an embedded font:
#font-face
{
font-family: FreeSerif;
src: url(Fonts/FreeSerif.ttf) format("truetype");
}
*
{
font-family: FreeSerif;
font-size: 24px;
}
Wikipedia lists the Unicode blocks that FreeSerif implements. However, some of the symbols won't render. Why might this be happening?
The pages now specify
{
font-family: Helvetica,Verdana,Tahoma,Arial,sans-serif;
}
and this is not overridden for the large table containing the stitch pattern. It is quite possible that Helvetica exists in different versions, with varying character coverage; Mac specialists might know about this. But in most computers of the world, there is no font under that name. On such computers, browsers will either use one of the other fonts, failing to display many of the characters as e.g. Verdana does not contain them, or (more usefully, and in accordance with CSS specs) scan thru the font list until they find one that contains the character being displayed and ultimately falling back to some system−dependent font.
For better predictability and robustness, you could use
td {
font-family: "Arial Unicode MS", "Lucida Sans Unicode", "DejaVu Sans",
"Quivira", "Symbola", "Code2000", ;
}
Cf. to font coverage information:
http://www.fileformat.info/info/unicode/char/25ec/fontsupport.htm
But you would really need to check that each of the fonts you list contains all of the characters you use in the table.
Other options: 1) Use font embedding (font #face) for some suitable font for which embedding is allowed—but this would probably involve considerable overhead since any font that contains all those characters is probably big. 2) Use small images instead of the special characters.
Just use CSS font priorities.
Information: http://htmlhelp.com/reference/css/font/font-family.html
Also set:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />