How to Embed Your Favorite Fonts into Web Pages

Using web safe fonts, such as “font-family: Arial, Helvetica, sans-serif;” allows readers who don’t have Arial to view your text in Helvetica.

Thanks to CSS3, you’re not limited these basic fonts on web pages. I don’t know about you, but it’s nice to have different options for text.

You can embed the exact font you want, which means your readers don’t have to have that particular font to view it on their web page, and you can choose to apply the font to every text or just selected lines.

Directions:

Embedding the Font in CSS File

Step 1: Open the CSS file that contains the styles for the web page.

Step 2: Create a style for the font you want to use, with the following code:

Here, we have a folder called “font” for the folder containing our fonts. This is completely optional, and you may leave it off or name the folder whatever you want. You’ll just need to add the folder to your web server during upload if you decide to keep it.

You’ll also need to replace “aldine_kirnberg.ttf” and “aldine_kirnberg.eot” with the actual font you wish to embed.

Step 3: To style a particular tag (such as the <h3> tag), add the code as follows. And just to cover all our bases, let’s include some web safe fonts in case the font doesn’t display correctly.

Code for web-safe Sans-Serif fonts with our embedded font:

h3 { font-family: CustomFont, Arial, helvetica, sans-serif; } or

Code for web-safe Serif fonts with our embedded font:

h3 { font-family: CustomFont, “Times New Roman”, Times, serif; }

Step 4: If you’d prefer to style the font for a specific line of text versus a tag, you can create a class instead, such as:

.myclass { font-family: CustomFont, Arial, helvetica, sans-serif; } or
.myclass { font-family: CustomFont, “Times New Roman”, Times, serif; }

Although the class above is called .myclass, you can name it whatever you want.

Step 5: Save the CSS file and skip over to the third section, “Applying the Style.”

Embedding the Font in HTML File

Step 1: Insert the following code between the HEAD tag of your HTML file:

Step 2: As I mentioned in the previous section, you can add, replace or remove the “font” folder for the font as long as it matches the font’s location on your web server.

Step 3: Replace “aldine_kirnberg.tt” and “aldine_kirnberg.eot” with the font’s actual name.

Step 4: Skip over to Step 3 of the next section, “Applying the Style.”

Applying the Style

Step 1: Open the HTML file where the embedded font will be applied.

Step 2: Double-check that the external CSS file is linked to your HTML file, and find the line of text you wish to format.

Step 3: If you added a CSS style for a tag, the style will be automatically applied to any text with those tags.

To apply the code to a specific line versus a tag, call your class into action with the following code:

<h3 class=”myclass”>Your text goes here</h3> or
<p class=”myclass”>Your text goes here</p> or
<span class=”myclass”>Your text goes here</span>

Again, the class “myclass” will be whatever you named it. And you can apply it to any HTML tag, such as a DIV or H1.

Step 4: Save your changes, then upload the HTML/CSS and fonts to the folder you specified on your web server.

Be Sociable, Share!

•