Archive

Archive for the ‘CSS’ Category

Include new style fonts in Client Server/ Projects

http://www.fontsquirrel.com/fontface/generator

If we want to include any new style folnt in Server we can run the file and get the script and include in our CSS file in two ways,

First Way

@font-face {
font-family: ‘GothamBlackRegular’;
src: url(‘font/gotham-black-webfont.eot’);
src: url(‘font/gotham-black-webfont.eot?#iefix’)
format(’embedded-opentype’), url(‘font/gotham-black-webfont.woff’)
format(‘woff’), url(‘font/gotham-black-webfont.ttf’)
format(‘truetype’),
url(‘font/gotham-black-webfont.svg#GothamBlackRegular’)
format(‘svg’);
font-weight: normal;
font-style: normal;
}

Second Way

1. Copy the “Calibri” font from System font folder and place in our Project CSS folder.

2. Include in the CSS file as below, (This is for Iphones& Tablet. This option will not work in IE. So we need to prefer the First Way)

@font-face {
font-family: ‘Calibri’;
src: url(‘fonts/calibri.ttf’);
font-weight: normal;
font-style: normal;
}

Categories: CSS

Why You Should Place Style Sheets Before Scripts

Best prac­tices for web design don’t just exist on the user inter­face. They also exist on the back-end where the code is. Where you place your style sheets and scripts in your doc­u­ment can affect the speed of your website.

If you want your web­site to load faster, place your CSS at the top in the <head> sec­tion and JavaScript at the bot­tom. This allows the browser to load your CSS first, so that users can see your site load vis­i­bly. Users won’t find them­selves star­ing at a blank white page. Impor­tant visual ele­ments, such as the logo, header and nav­i­ga­tion, will pro­gres­sively show up. This works as a form of visual feed­back to let users know they’re on the right page and that the page is load­ing. All of this hap­pens before exe­cut­ing the JavaScript at the bot­tom of the page. Thus, it gives users the impres­sion that your site has fin­ished load­ing before it actu­ally has.

If you put your JavaScript at the top of the page and CSS at the bot­tom, users will have to stare at a blank white page until the JavaScript fin­ishes load­ing because <script> tags block par­al­lel down­loads. This means yourCSS won’t load and the visual ele­ments of your site won’t show up until the JavaScript fin­ishes down­load­ing first. When it does fin­ish, users will expe­ri­ence a flash of unstyled con­tent and a shift­ing of ele­ments on the screen.

Mak­ing users wait to see your site and show­ing them incor­rectly for­mat­ted con­tent is not a good user expe­ri­ence. Fol­low this best prac­tice with your code, and your users should have no com­plaints about the speed of your website.

Source : UX Movement

Categories: CSS