One of the cool things about Flash was the ability to use any font in the web design on a page. Those days are over. Until recently, there wasn’t an HTML alternative to use custom fonts. Some industrious people found a workaround by using images with the custom font, but that proved less than SEO friendly. So, services came along like WebKit and Google Font to utilize fonts in browsers that weren’t considered web safe. Basically, they inject some code into your design so browsers will recognize the font on their server
However, webkit is a pay to play service. Google font, on the other hand, is free and you can download the font of choice for use on your local machine for other print or typography design work. But what if you don’t want to use either service or inject third party code into your work? If you are like me and want direct control over your designs, and have FTP access to the host of your website files, you can EASILY use any font on a website with some simple CSS and it will work on any device or modern browser.
Basically, you upload the True Type font file of your choice to the root directory on your server and use this code in your CSS file:
@font-face {
font-family: aFont;
src: url(“aFont.eot”); /* For IE browsers */
}
@font-face {
font-family: aFont;
src: url(“aFont.ttf”); /* For most other browsers */
}
Then you add a CSS class for the font including any style specifications. For example:
.myFontClass {
font-family: aFont, Arial, Helvetica, sans-serif;
letter-spacing: 1px;
color: #4D7731;
}
Simple!
Because the font is on your server, it doesn’t matter if the end user’s computer or tablet or cell phone has the font installed.Call that class in the HTML for a DIV or any other tag and voila, you have a custom text on your website. Search engines can find it and if you need to make a change to content, just retype what you need.I found this technique on my favorite goto site for web tutorials: Develop PHP.The entire process is on video..check it out!