PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Written By
Views

Adding font-faces in CSS3

The common fonts used for web development are all very boring (Arial, Verdana, Times, Helvetica, etc...). Using the font-face attribute in CSS3 you can specify fonts to be used on your site. This means you can use a true-type font face located on your server; however, you will have to be cautious about licensing issues. Be sure to check out the following link to learn more about font face licensing: http://www.fonts.com/FontServices/FontEmbedding.htm. Okay, so to embed a font on your page, you will want to obviously make sure that you have added the font file to your web server, then you will need to link to the file from your CSS file:

@font-face{
	font-family: 'BleedingCowboys';
	src: url('../../../go/fonts/bleeding-cowboys.ttf') format('truetype');	
}

@font-face{
	font-family: 'BirthOfAHero';
	src: url('../../../go/fonts/birth-of-a-hero.ttf') format('truetype');	
}

Then in your html you can add:

<p style='font-family:BleedingCowboys; font-size:22px;'>This is the Bleeding Cowboys Font Face</p>
<p style='font-family:BirthOfAHero; font-size:22px;'>This is the Birth Of A Hero Font Face</p>

If your browser does not support the font-face attribute, then the above will be displayed as a default font.

Comments (0)

loading comments