1: Upload the Ubuntu.ttf & Luckiest Guy.ttf files to your web server in a directory named fonts.
2: Add the lines below at the top of your external CSS StyleSheet or in the <head> section of your HTML file just after the <style> tag to embed the font.
Code: Select all
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu.ttf") format("truetype"); }Code: Select all
@font-face { font-family: "Luckiest Guy"; src: url("fonts/Luckiest Guy.ttf") format("truetype"); }yoursite.css
Code: Select all
/* www.yoursite.css */
/* FONT STYLES */
@font-face { font-family: "Luckiest Guy"; src: url("fonts/Luckiest Guy.ttf") format("truetype"); }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu.ttf") format("truetype"); }
/* HEADLINE STYLES */
h1 {
font-family: "Luckiest Guy";
font-style: normal;
font-weight: normal;
font-size: 48px;
background-color: transparent;
color: #000000;
text-decoration: none;
}
/* PARAGRAPH STYLES */
p {
font-family: "Ubuntu";
font-style: normal;
font-weight: normal;
font-size: 12px;
background-color: transparent;
color: #000000;
text-decoration: none;
margin-left: auto;
margin-right: auto;
text-indent: .5em;
line-height: .2;
}
p:first-line {
font-weight: bold;
background-color: #ffffff;
color: #006600;
padding: 2px 2px 2px 2px;
border: solid 2px #00000;
}
p:first-letter {
font-weight: bold;
font-size: 16px;
background-color: #ffffff;
color: #006600;
padding: 2px 2px 2px 2px;
border: solid 2px #00000;
}
Code: Select all
<html>
<head>
<link rel="stylesheet" type="text/css" href="yoursite.css">
</head>
<body>
<h1>www.yoursite.com</h1>
<p>
Welcome to my website !<br>
Please come again !
</p>
</body>
</html>
Internal Stylesheet Example
index2.html
Code: Select all
<html>
<head>
<style>
@font-face { font-family: "Luckiest Guy"; src: url("fonts/Luckiest Guy.ttf") format("truetype"); }
@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu.ttf") format("truetype"); }
h1 {
font-family: "Luckiest Guy";
font-style: normal;
font-weight: normal;
font-size: 48px;
background-color: transparent;
color: #000000;
text-decoration: none;
}
p {
font-family: "Ubuntu";
font-style: normal;
font-weight: normal;
font-size: 12px;
background-color: transparent;
color: #000000;
text-decoration: none;
margin-left: auto;
margin-right: auto;
text-indent: .5em;
line-height: .2;
}
p:first-line {
font-weight: bold;
background-color: #ffffff;
color: #006600;
padding: 2px 2px 2px 2px;
border: solid 2px #00000;
}
p:first-letter {
font-weight: bold;
font-size: 16px;
background-color: #ffffff;
color: #006600;
padding: 2px 2px 2px 2px;
border: solid 2px #00000;
}
</style>
</head>
<body>
<h1>www.yoursite.com</h1>
<p>
Welcome to my website !<br>
Please come again !
</p>
</body>
</html>
The reason I'm posting this here is because the method can easily be used within PB for applications using
the web gadget. Just include the font in your exe and extract it to your program's data directory and you can
be positive that your application looks the way it should even without the required fonts installed on the users system.
