Is using the smiley (☺) in #font-face still relevant? - css

This might be a bit of hasty conclusion, but my question arose when I find that FontSquirrel.com does not generate the smiley (☺) with their #font-face generator.
Instead of the usual bulletproof standard (as laid out by Paul Irish regarding the smiley), the FontSquirrel's #font-face generator generates only this:
#font-face {
font-family: 'sansationregular';
src: url('sansation_regular-webfont.eot');
src: url('sansation_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('sansation_regular-webfont.woff') format('woff'),
url('sansation_regular-webfont.ttf') format('truetype'),
url('sansation_regular-webfont.svg#sansationregular') format('svg');
font-weight: normal;
font-style: normal;
}
I realize it might be too hasty to conclude that by FontSquirrel abandoning the smiley means the smiley is no longer relevant, but considering FontSquirrel's #font-face generator seem to be the most popular and the most used generator out there, it makes me wonder why they don't include the smiley anymore. Especially because they seem to have included it before...
Just in case anyone's not familiar with the smiley, there is a good explanation here.

EDIT - Ran into some more info that may interest: https://stackoverflow.com/a/4520467/1455709
Android 2.2 devices will suffer from local() usage, your #font-face wont work at all.
I can confirm that on Android 2.3.6 (default browser) local() will break your #font-face declaration.
Android 4.0 (default browser) works fine with local().
Unsure of everything in between. So again, I think it's down to your user base, or the effort you want to go to with multiple stylesheets to ensure your font works everywhere.
Well, they are only generating the code needed to display your font on all browsers. It's your decision as to whether you want to take the "risk" as to whether the user has a font by that name installed locally.
Depends on your audience I would say.
Does anyone really install fonts onto their local machine anymore? A lot of people on this site might, designers defiantly will, but the general public? Probably not.
What's the chance that the font your using has the same name as another different font? Small.
What's the chance the user has that particular other font installed? Very small.
If you want to ensure that the user downloads and uses your particular font, use it.
If you want to use Windows fonts (you're probably not allowed) and want them visible on Macs, then you wouldn't want to use the smiley face, so as to save every Windows user from downloading a font they already have (that actually is the same).
If you want to use a custom font called 'Verdana' you will defiantly want to use a smiley face. That, or make the font-family unique... I guess with a smiley face... But that would look messy, so use the local attribute.

The newest "bullet proof" method can always be found by using fontsquirrel's WEBFONT GENERATOR.
So since writing your question, .woff2support has been added.
Anyone wishing to clarify what the up-to-date method is the you should do the following.
Upload a tiny font file and this will generate a zip file with your font converted into all formats but more importantly it also contains a CSS file with the "bullet proof" method.
Which currently looks like this.
#font-face {
font-family: 'font-name';
src: url('fontawesome-webfont-webfont.eot');
src: url('fontawesome-webfont-webfont.eot?#iefix') format('embedded-opentype'),
url('fontawesome-webfont-webfont.woff2') format('woff2'),
url('fontawesome-webfont-webfont.woff') format('woff'),
url('fontawesome-webfont-webfont.ttf') format('truetype'),
url('fontawesome-webfont-webfont.svg#font-name') format('svg');
font-weight: normal;
font-style: normal;
}

Related

How can I force my website to use a Google font instead of a locally one with the same name?

I'm using for a website the font Oxygen via GoogleFont. However, for webdesign purpose, I downloaded in my computer the Oxygen font via FontSquirrel.
Apparently it's the same, but it looks different and I have size issues. So I was thinking:
Is there a way to declare "I want to use the GoogleFont font and not the font stored in the computer even if it has the same name"?
Because if someone has a totally different font with the same name, there could be a lot of display problems.
EDIT: What about downloading the font on Google's server and hosting it on my website? (The font is 100% free for commercial use.) But why do a lot of websites use Google Fonts if it could be that simple?
If you have the web fonts you could host yourself and give them any name you want in the css and avoid the potential of the local font loading.
For example:
#font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
url('oxygen-webfont.woff2') format('woff2'),
url('oxygen-webfont.woff') format('woff'),
url('oxygen-webfont.ttf') format('truetype'),
url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}
Just make sure you're pointing the CSS to the correct path for those files (e.g. if you put them in a fonts folder it'd could be "../fonts/oxygen-webfont")
The main reason people use google is they've optimized it for serving fonts, it takes load off your server, and potentially people have the font cached from google making it load faster. If it's an uncommon font and your server is decent these may negligible.

Font not rendering/displaying correctly?

I ask out to the community if anybody has ever had any issues embedding fonts on their website and it being rendered terrible as the outcome? This is the case across all latest browsers not tied to a specific browser...
Tried adding certain css rules to change the fonts weight, style, smoothness etc but doesn't seem to effect the font by any means, any ideas?
You will notice that the letter 'A' is not as it should be but the correct font types are loaded with no issues.
Font can be found here
Screenshots
Embedded font CSS
#font-face {
font-family: 'Linotte Semi Bold';
src: url('/fonts/linotte-semi-bold.eot');
src: url('/fonts/linotte-semi-bold.eot?#iefix') format('embedded-opentype'),
url('/fonts/linotte-semi-bold.woff2') format('woff2'),
url('/fonts/linotte-semi-bold.woff') format('woff'),
url('/fonts/linotte-semi-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
As we speak I've just received confirmation from MyFonts that sometimes fonts are configured slightly different depending on the font used and may need some tweaking to the Hinting settings when downloading a webfont kit.
The following steps fixed the issue regarding the letter 'A' and now displays correctly as expected:
You may want to try downloading a webfont kit configured to use a different Hinting setting.
Simply log into your MyFonts order history at: https://www.myfonts.com/my/orders/kitbuild.html
Select the webfont you would like to use.
Under the 'Hinting' sub-head, select 'Smooth', 'Native', or 'None' (Best was the default). It may take a couple of tries, depending on the font and how it's used.
The custom Webfont Kit Builder will select a CSS script by default. If you would prefer to use JS, simply change this option at the bottom of the page.
Download the new kit and replace the existing webfonts/stylesheet in your server.
Try this, it fixed some of my font appearance in the past, but it's kind of a shot in the dark. That "A" really looks strange, does it look the same if you install the font on your system and use it in photoshop or word or anything else?
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Some ttf fonts don't work with #font-face while other ttfs work fine. What's wrong?

For example, MachineCTT doesn't work this way
#font-face {
font-family: 'MachineCTT';
src: url('../fonts/test.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
If I put another font file as test.ttf, it works well.
Guys, how to fix?
Also fontsquirrel.com says my file is corrupt while it works fine in OS.
Is tehre a way to hardly reconvert the TTF or smth?
A font, like any computer program, can be broken. This often applies e.g. to copies of commercial fonts distributed illegally on the net. It may also be caused by data transfer errors. So it is essential to check where you got the font from and the report any problems to the font vendor or author.

nice looking CSS fonts for Mac and Windows

I see lots of sites that display great fonts that are not images. For example: The Firebug site and Happy Cog. There seem to be lots of CSS 'tricks', bits of JavaScript and whatever other trickery employed by various web designers to get the job done (I'm not suggesting either of the aforementioned sites do this).
My question is, what is acceptable in terms of CSS / font practices? Is it still that case that only a core set of common fonts should be used? If not, what are the acceptable / reliable practices to display nice looking fonts, particularly for Mac / Windows consistency?
You can embed fonts now. Here's a good place to start: http://www.google.com/webfonts
If you have a font you would like to use, you can use a generator and it will make files that you simply need to include with your website
http://www.fontsquirrel.com/fontface/generator
Simply include something like this in your style sheet:
#font-face {
font-family: 'ArchitectsDaughterRegular';
src: url('fonts/ArchitectsDaughter-webfont.eot');
src: url('fonts/ArchitectsDaughter-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/ArchitectsDaughter-webfont.woff') format('woff'),
url('fonts/ArchitectsDaughter-webfont.ttf') format('truetype'),
url('fonts/ArchitectsDaughter-webfont.svg#ArchitectsDaughterRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Just make the url point to where you actually have that font. There are also a lot of premade fonts available.

CSS #font-face - what does "src: local('☺')" mean?

I'm using #font-face for the first time and downloaded a font-kit from fontsquirrel
The code they recommend inserting into my CSS is:
#font-face {
font-family: 'junctionregularRegular';
src: url('Junction-webfont.eot');
src: local('☺'),
url('Junction-webfont.woff') format('woff'),
url('Junction-webfont.ttf') format('truetype'),
url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}
Now, the smiley face thing has me stumped. But so too does the number of urls in the src - why do they recommend so many files and will they all be sent to the browser when a page is rendered? Is there any harm in removing all but the .ttf?
if you read the notes in font-squirrel's font-face generator, you'll see that it was a gotcha by paul irish.
Here is the excerpt from his blog post:
And.. regarding #font-face syntax
I now recommend the bulletproof smiley variation over the original bulletproof syntax.
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
From the bulletproof post:
Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.
There are a few reasons why smiley is a better solution:
Webkit+Font Management software can
mess up local references, like
turning glyphs into A blocks.
On OS X, Font Management software may
alter system settings to show a
dialog when trying to access a
local() font that's accessible
outside of Library/Fonts. More detail
on my bulletproof post.
Font Explorer X is
also known to mess up other stuff in
Firefox.
Although it's unlikely, you could
reference a local() font which is
completely different than what you
think it is. (Typophile post on
different fonts, same name) At the
very least its a risk, and you're
ceding control of the type to both
the browser and host machine. This
risk may not be worth the benefit of
avoiding the font download.
These are all pretty edge case issues, but it's worth considering.
The local(☺︎) is a css hack to divert IE6-8 from downloading fonts it can't use (it can only use fonts in EOT format).
Explained: The last src property takes precedence in the CSS cascade, meaning that the CSS will be parsed from bottom to top. The local(☺︎) will make IE skip the src at the bottom, without wasting bandwidth downloading fonts it can't use, and rather go straight to the font in .eot format (defined on the line above in your question) that it will use. The smiley is just to ensure there won't be a local font with that name (character combination).
Read more here: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Resources