Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged font-face

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

@font-face gotchas « Paul Irish - 1 views

paulirish.com/...font-face-gotchas

@font-face css3 typography font-face fonts css webdesign web design

shared by Vernon Fowler on 10 Oct 12 - No Cached
  • 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.  (crbug.com/33173) 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. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771 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. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well.
  • 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'); }
  • ...5 more annotations...
  • in Webkit (Chrome/Safari), applying font-weight:bold to faux-bold some @font-face'd text will not succeed. Same applies for font-style:italic.
  • text-transform doesn't play well with @font-face in current implementations.
  • @font-face doesnt play nice with css transitions.
  • If a @font-face declaration is within a media query @media screen { ..., it will fail in Firefox.
  • SVG Fonts - Currently SVG is the only way to get webfonts working on iPhone and iPad.
  • Vernon Fowler on 10 Oct 12
     
    "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.  (crbug.com/33173) 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. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771 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. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well. "
Luciano Ferrer

Convert OpenType Font => Woff Web Font - 1 views

orionevent.comxa.com/otf2woff.html

typography font-face generator converter

shared by Luciano Ferrer on 26 Oct 11 - No Cached
  • Luciano Ferrer on 26 Oct 11
     
    "Convert otf to woff how many times ,after you finished the sites mockup, you wanted your site to actually use the fonts in your beautiful mockup, instead of making pictures for all of them (and don't get me started on the hover effect pictures)? you can make your font (OpenType Font) to a woff and via css make it show on the site! This tool will convert .ttf , .otf , .ttc file type since they are all OTF format (which stands for Open Type Font). OTF is the most common font type for windows/macintosh based systems. The woff format is the mozilla foundation format for a "compressed" Open Type Font (OTF) so it can be of use in web-sites. And thus giving the user much richer visual content and the developer more freedom in design of a web-site. "
Luciano Ferrer

The @Font-Face Rule and Implementation Tricks - 2 views

www.sendesignz.com/...rule-and-implementation-tricks

html webdesign font-face

shared by Luciano Ferrer on 13 Oct 11 - No Cached
  • Luciano Ferrer on 13 Oct 11
     
    "@font-face method is frees designers from the yoke of the standard palette of "web-safe" system fonts that have been used for many years. Surprisingly, however, this capability has been available in Internet Explorer since 1997. IE4 was the first browser to allow web fonts, but it did so with a proprietary format that prevented other browsers from following suit. Microsoft has since submitted its format to the W3C for consideration as a standard, but now that Firefox, Safari, Chrome, and Opera are all implemented now. So you can consider it pretty safe to use."
Luciano Ferrer

Font2Web - Your Online Font Converter Converting .ttf and .otf to .woff, .eot and.svg - 1 views

www.font2web.com

typography font-face generator converter

shared by Luciano Ferrer on 26 Oct 11 - No Cached
  • Luciano Ferrer on 26 Oct 11
     
    "This little tool converts any .ttf (TrueType Font) or .otf (OpenType Font) file to .ttf, .otf, .eot, .woff and .svg files. It also creates a CSS file and a demo HTML file to show you how to use it on your website - using CSS @font-face."
Uzair Ahmed

Zen Elements Blog | CSS3 Embedding a Font Face - 0 views

www.zenelements.co.uk/...css3-embed-font-face

imported Bookmarks_Menu css

shared by Uzair Ahmed on 18 May 09 - Cached
  • Uzair Ahmed on 18 May 09
     
    Use CSS 3 @font-face to embed a font NOT on the 'web safe' list and get away from using images for headers. This will currently only work with certain browsers so again, there is our quick +/- list of compatible browsers.
Vernon Fowler

Best Practice: Get your HEAD in order - EricLaw's IEInternals - Site Home - MSDN Blogs - 1 views

blogs.msdn.com/...s-and-improve-performance.aspx

best practice head order IE browser performance

shared by Vernon Fowler on 10 Sep 12 - No Cached
  • To ensure optimal performance and reliability when rendering pages, you should order the elements within the HEAD element carefully.
  • Optimal Head Ordering <doctype>     <html>         <head>             <meta http-equiv content-type charset>              <meta http-equiv x-ua-compatible>             <base>             <title, favicon, comments, script blocks, etc>
  • If you must specify the character set using a META tag for some reason, it is critical that the META tag is the first element in the HEAD.
  • ...1 more annotation...
  • If you must specify the X-UA-Compatible value using a META tag for some reason, this element MUST appear before any script blocks and SHOULD appear as early in the HEAD element as possible.
Luciano Ferrer

Font Squirrel | Create Your Own @font-face Kits - 0 views

www.fontsquirrel.com/...generator

typography generator font-face

shared by Luciano Ferrer on 17 Jun 10 - Cached
  • Soul Book on 17 Jun 10
     
    Useful when you want to embed fonts into your page and have to deal with browser compatibility issues
Jochen Burkhard

Build Awesome Practical CSS3 Buttons | Nettuts+ - 0 views

net.tutsplus.com/...awesome-practical-css3-buttons

howto css3 nettuts awesome Buttons

shared by Jochen Burkhard on 22 Nov 10 - No Cached
  • Jochen Burkhard on 22 Nov 10
     
    "What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I'll show you how in today's video tutorial. "
  • Jochen Burkhard on 22 Nov 10
     
    A nice video-tutorial in CSS3 Buttons, yum yum...
Jochen Burkhard

CSS Three - Connecting The Dots - Smashing Magazine - 0 views

www.smashingmagazine.com/...css-three-connecting-the-dots

CSS3 Web-Design Animation Best Practices

shared by Jochen Burkhard on 27 May 10 - Cached
  • Jochen Burkhard on 27 May 10
     
    As a web community, we've made a lot of exciting progress in regards to CSS3. We've put properties like text-shadow & border-radius to good use while stepping into @font-face (not a CSS3-property) and visual effects like transitions and animations. We've also spent a great deal of time debating how and when to implement these properties. Just because a property isn't widely supported by browsers or fully documented at the moment, it doesn't mean that we shouldn't be working with it. In fact, I'd argue the opposite.
Luciano Ferrer

Top 4 Free CSS Generators Online - Sepia River: theCreativeflow - 1 views

creativeflowforbusiness.com/p-4-free-css-generators-online

css generator tools

shared by Luciano Ferrer on 26 Sep 11 - No Cached
  • Luciano Ferrer on 26 Sep 11
     
    "http://css3generator.com/ » The drop-down list says "Choose Something". Choices include: shadows, transitions, even transform and @font-face! It has an option for border-radius, but if that's the only thing you need, there's the quick and dirty: http://border-radius.com/ » Super simple, uber-easy-to-use, just does border-radius. What more can I say? http://www.colorzilla.com/gradient-editor/ » Sleek, Photoshop-like gradient editor that spits out cross-browser CSS. Fancy - with live preview and the like. Resist the urge to add gradients to everything you do. http://www.cssbuttongenerator.com/ » Comes with some nice default palettes, but fully customizable with your own color values. Sleek color-picker and sliders to make it how you want it, plus a link to a more advanced button generator. I've definitely been making more buttons since this baby came online :)"
bonwictech

5 Major Website Designing Tips - 0 views

One of the key elements and also a general priority for a brand, especially for a business that has just started out and looked for a greener meadow, is good website design. Honestly speaking, in t...

web design tips webdesign and development

started by bonwictech on 27 Dec 18 no follow-up yet
1 - 16 of 16
Showing 20▼ items per page