CSS @font-face - what does src: local('☺') mean?
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.
@font-face src: local - How to use the local font if the user already has it?
If you want to check for local files first do:
@font-face {
font-family: 'Green Sans Web';
src:
local('Green Web'),
local('GreenWeb-Regular'),
url('GreenWeb.ttf');
}
There is a more elaborate description of what to do here.
Using @font-face src: local with fonts.com web fonts
From my experience the the term "local" here means that the user has the font installed into their OS, and not that it's simply a locally cache file in your browser.
For a new user to your site you want to be able to guarantee that they get your font so typically the "local" font is pointed at a non-existent reference so they have to down load from your web server. This is to protect against the user having a naff font with the same name as yours and the design looks awful.
See the smiley-face answer also on SO
If you are in a controlled environment where you know you can trust the client's installed fonts (i.e. they have all the Foobar
variations installed) then your approach would work.
To use local font in HTML using font face
I made the following changes and I got the result
- Quotation marks for font-family
- Using of URL instead of local
- Changing of "\" to "/"
Note:
Use of the local
css function throws an error in the developer console saying resource is not loaded. See the modified code below.
<!DOCTYPE html><html><head><style>@font-face { font-family: "myFirstFont"; src: url("C:/Users/Desktop/Website/fonts/Harlow_Solid_Italic.ttf");}
.harlow { font-family: "myFirstFont";}</style></head><body><div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div><p><b class="harlow">Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p></body></html>
@font-face where does the 'smiley' (src: local('the_smiley_image') come from?
Found this on another question so I can past it here and here it is:
src: local("☺")
Given no other answer I will use this.
Related Topics
Css Text-Decoration Property Cannot Be Overridden by Child Element
How to Change the Height of an Image in CSS :Before/:After Pseudo-Elements
Difference Between :First-Child and :First-Of-Type
What Does the Forward Slash Mean in the CSS Font Shorthand
How to Clear the CSS Style "Float"
Svg Animation Is Not Working on Ie11
Why Should We Include Ttf, Eot, Woff, Svg,... in a Font-Face
Any Way to Limit Border Length
How to Change an Input Button Image Using Css
Css Native Variables Not Working in Media Queries
How to Make Round Corners to Both Inside of a Box and Its Border
What's the Difference Between Inline Styles VS Classes
Using Variables in Property Names in Less (Dynamic Properties/Property Name Interpolation)
Sass Invalid CSS Error: "Expected Expression"
Css @Font-Face Absolute Url from External Domain: Fonts Not Loading in Firefox
IE7 Relative/Absolute Positioning Bug with Dynamically Modified Page Content