How to Use Custom Web Fonts with CSS3

In the past, web designers relied explicitly on hypertext markup language (HTML) when creating layouts. Unfortunately, HTML doesn't allow much more control over the appearance of fonts on a website since the 90’s -- but cascading style sheets (CSS) do. CSS modifies HTML to enable web designers to apply styles across multiple elements (such as tables, images, or text) in a web page. The most current version of CSS is CSS3. You can use CSS to embed fonts of you or your clients liking right into your web page, rather than using the default fonts like Arial or Times New Roman. CSS uses the "@font-face" tag to tell the browser to convert the text in the web document to the target font. For example, if you wanted to use a font named "Retro," you would insert "@font-face" tag and the appropriate code into the page's HTML, and when you viewed the site in the browser, all of the text on the page would show up in the Retro font. To use CSS3 web fonts on your page, insert the following code in between the tags at the top of your HTML document or in your separate CSS stylesheet (recommended): @font-face { font-family: fontname; src: url('fontname.ttf'); } Replace "fontname" with the name of the appropriate font. Using the same example above, if you were using a font named Retro, your code would look like this: @font-face { font-family: Retro; src: url('Retro.ttf'); } If you want to use more custom web fonts in your page, you can just insert the "@font-face" tag into your code multiple times, like so: @font-face { font-family: fontname1; src: url('fontname1.ttf'); } @font-face { font-family: fontname2; src: url('fontname2.ttf'); } Like above, just replace "fontname1" and "fontname2" with the appropriate names for the font. After inserting the code into your page document, you can apply the font to all of the text on the page by inserting the following after the "@font-face" tag. For example: @font-face { font-family: fontname; src: url('fontname.ttf');rnbody { font-family: fontname; } If you only want to change the font for a single element, or for a specific set of elements, just replace "body" with the name of appropriate objects, inserting a comma in between each. For example, if you want to apply a custom font to any of the text fount in a table or a div element, you'd use the following code: div, table { font-family: fontname; } For your CSS3 web fonts to work, though, you'll need to upload the appropriate fonts to your website. Otherwise you can hire a web design company to host the fonts for you and just refer to it via a link like so: @font-face { font-family: fontname; src: url('http://yourdomain.com/fontname.ttf'); } So go spruce up your website with some new typography!