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:
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.
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:
<!–
<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.
Nice. Can’t wait to give this a go.
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.
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 Review
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