Skip to main content

HOW TO USE FONT FACE IN HTML WEBSITE

HOW TO USE FONT FACE IN HTML SITE



when we work on localhost font work properly but when we upload project and run online font not worked
 to solve this problem we have to set font-face property or make font online runable





click on this link 

to online generate font face 


in this page add font and create font-face kit it will download auto matic

copy all file except stylesheet and html file 

and past it in a new folder 

rename tha folder into font

copy this code in your stylesheet 

@charset "utf-8";
/* CSS Document */


@font-face {
    font-family: 'azo_sanslight';
    src: url('../fonts/rui_abreu_-_azosans-light-webfont.eot');
    src: url('../fonts/rui_abreu_-_azosans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rui_abreu_-_azosans-light-webfont.woff') format('woff'),
         url('../fonts/rui_abreu_-_azosans-light-webfont.ttf') format('truetype'),
         url('../fonts/rui_abreu_-_azosans-light-webfont.svg#azo_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'azo_sansbold';
    src: url('../fonts/rui_abreu_-_azosans-bold-webfont.eot');
    src: url('../fonts/rui_abreu_-_azosans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rui_abreu_-_azosans-bold-webfont.woff') format('woff'),
         url('../fonts/rui_abreu_-_azosans-bold-webfont.ttf') format('truetype'),
         url('../fonts/rui_abreu_-_azosans-bold-webfont.svg#azo_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


now set the font-family property where u want

u have to create different kit for different font-face


.........................................................................................................................................................
Labels:

Comments

Post a Comment

Popular posts from this blog

Wo-commerce sidebar navigation

There is Plus Minus Image you can change it in your own code
Post a Comment
Read more

How to add attribute in input type onload

Add this script this will target your input type submit and set an attribute on it when page load. <script> function functionAddAttribute(){     $("input:submit").attr("accesskey","g"); }; window.onload = functionAddAttribute; </script> <noscript>Your browser does not support JavaScript!</noscript> This is html <input type="submit" value="this is button" />
Post a Comment
Read more

HOW TO IMPLEMENT ADAPTIVE IMAGE IN WORDPRESS

If you don't know about Adaptive image please Read my last artical. STEP:1 COPY .htaccess , Adaptive-image.php, ai-cookie.php, DS_Store file in your root directory STEP 2: CREATE folder in wp-contant/uploads/adaptive/ai-cache if .htaccess file already exist then pest this code in it but be carefull take its backup CODE #START Adaptive-Images #Add any directories you wish to omit from the Adaptive-Images process on a new line. #Omit plugins, wp-includes and wp-admin content. RewriteCond %{REQUEST_URI} !wp-content/plugins RewriteCond %{REQUEST_URI} !wp-includes RewriteCond %{REQUEST_URI} !wp-admin #Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories #to adaptive-images.php so we can select appropriately sized versions RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php #END Adaptive-Images UNDER # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On STEP3: Open Adaptive-image.php change with it $cache_path    = "wp-content/upl...
Post a Comment
Read more