CSS Examples

Using custom fonts in CSS with @font-face, using your own font files or loading Google Fonts.

Using custom fonts in CSS with @font-face allows you to apply unique typography to your web projects. You can use your own font files (e.g., TTF or OTF) or fonts from external sources like Google Fonts. Here's how to use @font-face for both scenarios:

In this example, we are using the font Raleway.

Using Your Own Font (TTF or OTF):

Include Your Font Files:

First, upload your TTF or OTF font files to your web server or include them in your project directory like media/fonts for example.

Define the Font with @font-face:

In your CSS file, define the font using @font-face like this:

@font-face{
	font-family:'Raleway';
 	/* In this example, we are using the font Raleway */
 	font-style:normal;
 	font-weight:400;
 	src:url(media/fonts/Raleway-Regular.ttf);
 	/* This is where your font files located */
}
@font-face{
	font-family:'Raleway';
 	font-style:normal;
 	font-weight:bold;
 	src:url(media/fonts/Raleway-SemiBold.ttf);
}

Replace the specs in the example with your desired specs. Be creative. :)

Apply the Font to Elements:

Once the font is defined, you can apply it to body of your page or specific elements in your CSS:

body{
	font-family:Raleway, Helvetica, Sans-serif;
	/* this will apply to the entire body */
}
.content{
	font-family:Raleway, Helvetica, Sans-serif;
	/* this will apply to the class named content */
}

Make sure to provide a fallback font family (e.g., Helvetica, Sans-serif) in case the custom font doesn't load.

Using Google Fonts:

Link to Google Fonts:

In your HTML file, add a <link> element in the <head> section to load the Google Fonts you want to use. Replace font name Raleway with the name of the Google Font you are loading:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,400i,600">
/* 400 equals to normal font weight, 400i is italic, and 600 or 900 are bold */

Or use @import in your CSS file to load the Google Fonts you want to use:

@import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,600');
/* 400 equals to normal font weight, 400i is italic, and 600 or 900 are bold */

Apply the Font to Elements:

In your CSS, apply the Google Font to specific elements:

body{
	font-family: Raleway, Helvetica, Sans-serif;
	/* this will apply to the entire body */
}

h1{
	font-family: Raleway, Helvetica, Sans-serif;
	/* this will apply to all the h1 elements */
}

textarea {
	font-family:Raleway, Helvetica, Sans-serif;
	/* this will apply to all the textarea elements */
}

As with custom fonts, provide a fallback font family in case the Google Font fails to load. In this example, I used fallback fonts Helvetica and Sans-serif.

Use Font Variations:

Many Google Fonts offer variations like bold and italic. You can specify these variations in your CSS, if needed.

p{
	font-family:Raleway, Helvetica, Sans-serif;
}

h2{
	font-family:Raleway, Helvetica, Sans-serif;
 	font-weight:bold;
}

.quote {
	font-family:Raleway, Helvetica, Sans-serif;
 	font-weight:bold;
 	font-style:italic;
}

Remember to adjust the font names, paths, and styles according to your specific font and design requirements. Also, consider the licensing terms of the fonts you use to ensure compliance with any usage restrictions.

Remember, if you applied the font to the body of the page, then you do not have to apply that same font to other HTML elements within the body. But you may apply a different font to an element to override its font family.

body{
	font-family: Raleway, Helvetica, Sans-serif;
	/* this will apply to the entire body */
}

code{
	font-family: Consolas, Helvetica, Sans-serif;
	/* this will override the Raleway font with Consolas 
	for the code element */
}

Be creative. :)