Generate webfont | Create Online Free @font-face

Free Webfont Generator Convert

Select or drag and drop your TTF, Open Type file and simply create WOFF or EOT font type files online free.

Upload or Drag Drop font (.ttf) file here to into convert web font format

Scroll down to check other free tools

HTML Compress

{Check Now}

Keyword Density Checker

{Check Now}

Web Font Convertor

{Check Now}

Check out more free tools list

{Check Now}

How to use webfont in CSS


                                         @font-face { 

                                     font-family: webfont;

                                     src: url(sansation_light.woff);

                                    }



                                    div {

                                     font-family: webfont;

                                    }

Define the font name in the font-family property after using the font-family name in HTML elements.


                                             Detailed define @font-face in CSS

                                    @font-face {

                                        font-family: Poppins;

                                        src: url('fonts/'Poppins'.eot');

                                        src: url('fonts/'Poppins'.eot?#iefix') format('embedded-opentype'),

                                             url('fonts/'Poppins'.woff') format('woff'),

                                             url('fonts/'Poppins'.ttf') format('truetype'),

                                             url('fonts/'Poppins'.svg') format('svg');

                                        font-weight: normal;

                                        font-style: normal;

                                    }

What is @font-fcae

@font-face allows to use of custom fonts used in webpages. Once added in the css file, the rule commands the browser to use the fonts where web font is hosted then fonts working with your webpage.

Without define @font-face, a webpage is limited to fonts and displays already loaded on the user computer.

Help Us for Imporve Our Website - Report Issue or Suggestion For Better Quality

Report a Bug, Issue, Problem

Suggest New Feature, New Tools

Other

Your report have been send, thanks you submit bug or report to us

Get My Best Resources for Graphic & Web Design and Development

Packed with tons of amazing FREE resources, this resource collection is your perfect guide for starting a brand new web project.

I spent countless hours gathering the resources in this list just for you.

You're going to find free fonts, stunning images, beautiful icons, HTML and CSS references, testing tools, and so much more, all for free!

Check Out The Resources