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.

You can use web safe fonts or embed special fonts of your own into a web page.
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:

@font-face {
font-family: CustomFont;
src: url(“font/adine_kirnberg.eot”) /* EOT file for IE9 */
}
@font-face {
font-family: CustomFont;
src: url(“font/adine_kirnberg.ttf”) /* TTF file for CSS3 browsers */
}

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.

By the way: If you don’t have an “.eot” font or vice-versa, you can convert the font using free resources, such as: Online Font Converter, EOTFast, or Font Squirrel, and some will even generate the code for you. And always confirm that you’re permitted to place the font on your web page.

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:

<style type=”text/css”>
<!–
<div class=”note”>
/* EOT file for IE9 */
@font-face {
font-family: CustomFont;
src: url(“font/adine_kirnberg.eot”)
}

/* TTF file for CSS3 browsers */
@font-face {
font-family: CustomFont;
src: url(“font/adine_kirnberg.ttf”)
}

/* add this line to format all h3 tags or replace it with the tag you wish to format with web-safe fonts. */
h3 { font-family: CustomFont, Arial, helvetica, sans-serif; }
h3 { font-family: CustomFont, “Times New Roman”, Times, serif; }

/* add this line to format only specific lines with web-safe fonts*/
.myclass { font-family: CustomFont, Arial, helvetica, sans-serif; }
.myclass { font-family: CustomFont, “Times New Roman”, Times, serif; }
–>
</style>

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!
This entry was posted in Online Fonts, Web Page Design. Bookmark the permalink.

4 Responses to How to Embed Your Favorite Fonts into Web Pages

  1. Mike Swansey says:

    Nice. Can’t wait to give this a go.

    • allyson says:

      Thanks, Mike. I’m glad to hear you’re going to give it a try. Please let me know if you need any additional help along the way.

  2. Adrienne says:

    That really sounds cool Allyson…

    I would love to change fonts for my Header tags but I have the Thesis theme on WordPress so whatever font you use shows up for every post. You can’t pick and chose and I don’t like the plug-in people recommend for changing fonts.

    You are so smart. I love reading about all the cool things you can do.

    I’m glad you’re back and hope everything is going well for you.

    Take care,

    ~drienne
    Adrienne recently posted..The Most Honest EZ Money Method ReviewMy Profile

    • allyson says:

      Thanks, Adrienne. I appreciate you stopping by.

      Hmm, I actually hadn’t heard about the plug-in for changing fonts. Sounds interesting… I’ll have to check it out. I haven’t personally used the Thesis theme, but I would imagine there’s a way to customize your fonts in that theme as well. Thanks for the compliment. Truthfully, with a little practice, anyone can learn and apply these steps.

      Hope you’re having a great week.

      Take care too and see you soon.

      Allyson

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CommentLuv badge