I.T. Discussion Community!
-Collapse +Expand
Design
Search Design Group:

Advanced
-Collapse +Expand Design Store
PRESTWOODSTORE

Prestwood eMagazine

December Edition
Subscribe now! It's Free!
Enter your email:

   ► KBWebsite DesignCascading St...   Print This     
 
Design Cascading Style Sheets (CSS):
How To Make Web Pages Format Uncommon Fonts Most PCs Do Not Have In Windows Font Manager
 
Posted 20 months ago on 4/10/2016
Take Away:

This article describes a cascading style sheet coding technique I use to format uncommon fonts that are not included in the Windows font manager.

KB102740



One of the most frustrating things in website design is trying to make your web pages format rarely used fonts. These are the ones very few people have installed through the Windows font manager. So how are you going to use that cool looking font on your web page knowing that most PCs can’t format it?

The best way I know of for orchestrating this is to upload the specialty font you are trying to use to your website. Then you need to create a reference to the uploaded font through the cascading style sheet your web page uses.

As an example, I will show the cascading style sheet code for Chrome, Firefox and Safari. The code below will reference the uploaded "OldeEnglish" font on my website.

@font-face {
font-family : "OldeEnglish"; src : url("OldeEnglish.ttf");
}

body{
margin: 0;
padding:0;
height: 100%;
line-height: 1.0em;
background: #000000;
max-width: 100%;
width:100%;
min-width:600px;
max-width:2000px;
}

html {
margin: 0;
padding:0;
height: 100%;
max-width: 100%;
}

textarea{border-color:blue; border-style:double; margin-top:6%;}

b{font-size: 10pt; font-family: arial; color: #3399FF;}

p{font-size: 10pt; font-family: arial; color: #FFFFFF; text-align: left;}

H1{font-size: 52pt; font-family: OldeEnglish; color: #BABA21; font-style: regular; text-align: left;}

H2{font-size: 32pt; font-family: OldeEnglish; color: #E0BBA9; font-style: regular; text-align: left;}

H3{font-size: 32pt; font-family: OldeEnglish; color: #E0BBA9; font-style: regular; text-align: center;}

H4{font-size: 10pt; font-family: arial; color: #FFFFFF; font-style: regular; text-align: center;}

em{color: #FFFFFF;}

A:link {text-decoration: underline; color: aqua;}
A:visited {text-decoration: underline; color: aqua;}
A:active {text-decoration: underline; color: aqua;}
A:hover {text-decoration: underline; color: yellow;}

#contentcolumn {
background: #000000;
text-align: left;
float: left;
font-family: arial;
height: auto;
minimum-height: 100%;
width: 100%;
}

#phpsection {
float: left;
text-align: center;
height: auto;
minimum-height: 100%;
width: 100%;
}

.innertube{
margin: 30px;
}

I also use the True Type font in my style sheets for the Opera browser as well as Apple and Android mobile devices. However, the cascading style sheet for Microsoft Internet Explorer can’t use True Type fonts. It must use Embedded OpenType fonts. This is a proprietary specification that is supported exclusively by Microsoft Internet Explorer. Here is the cascading style sheet for Microsoft IE that I use.

@font-face {
font-family : "OldeEnglish"; src : url("OldeEnglish.eot");
}

body{
margin: 0;
padding:0;
height: 100%;
line-height: 1.0em;
background: #000000;
overflow-x: hidden;
width:100%;
min-width:600px;
max-width:2000px;
}

html {
margin: 0;
padding:0;
height: 100%;
overflow-x: hidden;
}

textarea{border-color:blue; border-style:double; margin-top:7%;}

b{font-size: 10pt; font-family: arial; color: #3399FF;}

p{font-size: 10pt; font-family: arial; color: #FFFFFF; text-align: left;}

H1{font-size: 52pt; font-family: OldeEnglish; color: #BABA21; font-style: regular; text-align: left;}

H2{font-size: 32pt; font-family: OldeEnglish; color: #E0BBA9; font-style: regular; text-align: left;}

H3{font-size: 32pt; font-family: OldeEnglish; color: #E0BBA9; font-style: regular; text-align: center;}

H4{font-size: 10pt; font-family: arial; color: #FFFFFF; font-style: regular; text-align: center;}

em{color: #FFFFFF;}

A:link {text-decoration: underline; color: aqua;}
A:visited {text-decoration: underline; color: aqua;}
A:active {text-decoration: underline; color: aqua;}
A:hover {text-decoration: underline; color: yellow;}

#contentcolumn {
background: #000000;
text-align: left;
float: left;
font-family: arial;
height: 100%;
minimum-height: 100%;
width: 100%;
}

#phpsection {
float: left;
height: 100%;
minimum-height: 100%;
width: 100%;
}

.innertube{
margin: 30px;
}

As you can see, the software specification is nearly identical to that for Chrome, Firefox and Safari except for the “.eot” file name extension. I created the Embedded OpenType font from its True Type font counterpart using a font conversion website I found online. You can find many of these utilities by Googling “convert ttf to eot”.

Referencing a font on the website versus the Windows font manager makes life easier for everyone. It takes the guess work out of wondering how many of your website visitors will actually have your website’s specialty font installed on their computers, which is a fool's errand to begin with.


Comments

0 Comments.
Share a thought or comment...
 
Write a Comment...
...
Sign in...

If you are a member, Sign In. Or, you can Create a Free account now.


Anonymous Post (text-only, no HTML):

Enter your name and security key.

Your Name:
Security key = P1156A1
Enter key:
Article Contributed By Douglas.M:

Please visit my software developer website for more information about my services. I offer application development as well as Android app coding services. My developer skills are best suited to dealing with custom software projects. I can perform programming for Corel Paradox as well as C# Sharp and PHP.

In my local area of northeast Ohio, I can cater to computer repair and "fix my computer" issues.

Use my contact web page today to reach me about any software design ideas you have.

Visit Profile

 KB Article #102740 Counter
1640
Since 4/10/2016
-
   Contact Us!
 
PrestwoodBoards.com was developed and is maintainted by me. Do you have a question or suggestion? Do you see a problem? Contact me now. My goal is to build an ad-free and spam-free source of I.T. information with many contributers (ok to promote your website/company in your bio). Yes, my company Prestwood IT Solutions is mentioned in my bio which shows with every post, but you can contribute and promote your pet project too!

1,813 People Online Now!!  
Sign In to see who's online now!  Not a member? Join now. It's free!
Show more stats...


©1995-2017 PrestwoodBoards  [Security & Privacy]
Professional IT Services: Coding | Websites | Computer Tech