Beautiful Still photography by Simon Winnall

Beautiful Still photography by Simon Winnall

find out more at www.simonwinnall.com

Have a look at my Blog Feeds.

CSS3 Examples by Johan

CSS3 examples by Johan, covers

• @font-face
• css3  box-shadow, text-shadow
• css3 animation
• css3 Rgba component
• css3 transformations
• css3 gradients

Subscribe to my Blog Feeds.

The state of web type

• The State of WEB TYPE Auckland Web Meetup  20 May 2010  Matthew Buchanan

 

• A seventh-grader writing a book report on Microsoft Word had more font choices than the person designing Esquire magazine’s website or the Ikea online catalog. —D EBO RA H N ET BURN, LO S AN GE LE S TI ME S latimesblogs.latimes.com/home_blog/2010/05/the-changing-typography-of-the-web.html

 

• BROWSER FONTS Verdana Arial sans Helvetica SERIF Lucida Tahoma Trebuchet Calibri Times Georgia SERIF Palatino Cambria

 

• IMAGE REPLACEMENT <h1>My Title</h1> h1 { background-image: url(title.png); text-indent: -999em; overflow: hidden; } Any typeface Not dynamic the the GOOD Consistent rendering Typographic control BAD Inefficient Text selection Widest support Images-off issue

 

• FLASH REPLACEMENT <h1>My Title</h1> <script> if(typeof sIFR == “function”) sIFR.replaceElement(“h1”, “font.swf”); </script> Reasonably secure Licensing the the GOOD Consistent rendering Wide support BAD Configuration Text selection Text scaling No Apple love

 

• CANVAS / VML REPLACEMENT <h1>My Title</h1> <script> Cufon.set(“fontFamily”, “League Gothic”); Cufon.replace(“h1”); </script> Reasonably secure Licensing the the GOOD Consistent rendering No plugins BAD Font conversion Configuration Wide support Screen readers Works on iPhone OS FOUT

 

• FONT-FACE EMBEDDING @font-face { } First introduced in CSS2 recommendation Removed from CSS2.1 specification Implemented in IE4, September 1997 —Proprietary EOT format Now in Firefox 3.5, Safari 3.1, Opera 10, Chrome 4

 

• Being a web designer will soon require a deeper understanding of typography and how typefaces work.

 
Subscribe to my Blog Feeds.

The type we want… – FontVilla

Best presentation about typography I have seen. Must see this.

Subscribe to my Blog Feeds.

Rich Typography Options For The Web – Why sIFR is Dead in 2009

Subscribe to my Blog Feeds.

Employing Custom Fonts – FontVilla

Paul Irish is giving presentation about employing custom @font-face on website.  He is talking about below points.

• embedding @font-face on webpage
• employing custom fonts
• wotf, ttf, otf fonts
• sIFR, Facelift,Cufon, typeface
• Faas Shops
• Fonts as a service and more.

Subscribe to my Blog Feeds.

Practical steps for Use Any Font in WordPress or Any Website

What is @font-face?

@font-face web fonts Source

@font-face is a css3 rule/technique by which allows us to embed fonts through css rule. With this, you can embed any true-type fonts or open-type fonts in wordpress or any of your website very easily.  With this technique we are able to use our local fonts instead of users installed fonts on his/her browser.

Advantages of using @font-face

• Rely on browser rendering, the same as with web safe fonts
• Cufon/Sifr are really the good in approach but css support is incomplete
• Cufon/Sifr techniques must be implemented with java script support  ( a great dependency )
• Its really easy to embed fonts with just @font-face rule in stylesheet
• Much better options are available as compare to Cufon / Sifr

These are web fonts and can be integrated to web page with very much ease. Here is a simple tutorial for implementing font face fonts on your webpage.

Let’s Try it

Note: This method work for almost all morden browsers. ( not tested yet, but you can see below for the browser support  )

Important!

Fonts must have a Web-Font License! You  can check the Web site you are downloading or purchasing the font from.

Step 1) Grab the font Files

You need to download the @font-face kit for more than 400 font styles from this website. They had a section for face kit download.

Font face kit - Source

Each @font-face font kit  will come with below files in it:

• TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT fonts for Internet Explorer 4+
• WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG fonts for the iPad and iPhone
• Cufón fonts in case you want them in it
• Demo.html and stylesheet.css so you can get going fast

For this example I’m using Candela-fontfacekit

Step 2) Place font files into web directory

With this step, after downloading the fonts kit, we need to put four kind of font files ( in my case )

1. CandelaBold-webfont.eot
2. CandelaBold-webfont.svg
3. CandelaBold-webfont.ttf
4. CandelaBold-webfont.woff

it on our main directory of our website. Or you can put it on webserver anywhere you want but you need to be aware to locate them into css file.

Step 3) Define the @font-face

Now open your stylesheet for your website. Paste below css rule for giving the reference of the fonts.

@font-face {

font-family: ‘CandelaBold‘;
src: url(‘CandelaBold-webfont.eot‘);
src: local(‘☺’), url(‘CandelaBold-webfont.woff‘) format(‘woff’), url(‘CandelaBold-webfont.ttf‘) format(‘truetype’), url(‘CandelaBold-webfont.svg#webfonta8W2vKU6′) format(‘svg’);
font-weight: normal;
font-style: normal;

}

You need to make little change on this snippet in order to work the snippet for your side.

1) You need to green colored text to your suitable font name you can use in your stylesheet

2) All four red colored font name to your fonts you have downloaded.

Step 4)  Use defined @font-face

Now you can use your fonts anywhere in your css from where you want to give effect. For example you want to use these fonts for h2 tags then you css would be like below I have described here.

You can add this style into your h2 tag. If its not available then you can add your own with below code.

h2{

font: 11px/16px  CandelaBold, Helvetica, Arial, sans-serif;

}

below is the example of the @font-face css code technique.

Step 5) Demo will look like this text.

Step 6 ) Don’t forget to like My Facebook Fan Page

Step 7) And you’re Done. Any Questions?

Let me know if you have any queries regarding above steps. You can send me a comment below for quick solution of your queries/questions.

Let’s see some of the @font-face examples

• http://177designs.com/
• http://randsco.com/index.php/2009/07/04/p680
• http://www.miltonbayer.net/ATfont-face/
• http://jigowatt.co.uk/
• http://speaktheweb.org/
• http://forabeautifulweb.com/
• http://craigmod.com/journal/font-face/

See @font-face Video

Refresh Columbia – 2/24/10: @font-face presentation from Jay Barry from Unmatched Style on Vimeo.

@font-face browser support

Till date this @font-face rule is supported by below browsers.

• safari 3.0

1. OpenType/TrueType ( .ttf  )
2. OpenType PS (.otf)
3. SafariMobile (iPhone/iPad)
4. only SVG Fonts until iOS 4.1
5. TrueType/OpenType since iOS 4.2
6. Wiki: Code samples

• Mozilla/Firefox

1. since Firefox 3.5
2. font formats
3. TrueType/OpenType TT (.ttf)
4. OpenType PS (.otf)
5. WOFF (since Firefox 3.6)
6. Wiki: Code samples

• Google Chrome

1. In Chrome 4.0 stable release. As of January 25th, 2010
2. In Chrome 3.0, you could run the executable with a command line switch of: --enable-remote-fonts
3. It was disabled by default for security review
4. TrueType/OpenType TT (.ttf)
5. OpenType PS (.otf)
6. WOFF since version 6

• Internet Explorer

1. since IE 4
2. Embedded OpenType (EOT) created by Microsoft’s WEFT tool
3. WOFF since IE9
4. Wiki: Code samples

• Opera

1. since Opera 10
2. TrueType/OpenType TT (.ttf)
3. OpenType PS (.otf)
4. SVG (.svg)

• Netscape

1. since version 4, discontinued since Netscape Navigator 6
2. Portable Font Resource (.pfr)
3. more info: http://en.wikipedia.org/wiki/TrueDoc

More information on css3 @ font-face resources

• Web Fonts with Font Face
• CSS Fonts Module Level 3
• Font Sprint @font-face page

Subscribe to my Blog Feeds.

How to modify WordPress article Font Size

On the wordpress theme a lot, but each theme can be used not satisfactory, especially with the theme of foreign production, the theme for the foreign or the line spacing, font size and other issues is very prominent, said here about dead wood know about how to modify the wordpress title / article font size and line spacing methods

First, change the title font size methods:

In the web directory /wp-content/themes/default(theme)/style.css（stylesheet）， In the web directory / wp-content/themes/default (theme) / style.css (style sheet),

Step1) Find the entry h2

.entry h2{ . Entry h2 {
font-size:16px; font-size: 16px;
border-bottom:1px dashed #ccc; border-bottom: 1px dashed # ccc;
padding-bottom:2px; padding-bottom: 2px;
} }

font-size:16px modify the site you like  to recommand the  font size the font-size: 16px and modify the size you like to recommend the title font size 18px

Step2)  modify the article line spacing:

Or modify the style.css, find the code line-height, until you find. Post. Content under the line-height as,

.post .content { . Post. Content {
padding:5px 0 5px 5px; padding: 5px 0 5px 5px;
line-height:110%; line-height: 110%;
overflow:hidden; overflow: hidden;
} }

Line-height will be 110% behind the change 150%, 150% recommended spacing

Step 3)  modify the font size of the article:

Find the code font-size, until you find the body under the font-size, as follows:

body {
background:#BEC3C6 url(img/bg.jpg) repeat-x; background: # BEC3C6 url (img / bg.jpg) repeat-x;
color:#555; color: # 555;
font-family:Verdana,”BitStream vera Sans”,Helvetica,Sans-serif; font-family: Verdana, “BitStream vera Sans”, Helvetica, Sans-serif;
font-size:10px; font-size: 10px;

}

The font-size: 10px modify the size you like to, personally recommend 14px font size

Subscribe to my Blog Feeds.