PureBasic Forums - English

Posted: **Thu Feb 24, 2011 9:15 pm**

Example : Use the Ubuntu font (Ubuntu.ttf) & Luckiest Guy (Luckiest Guy.ttf) fonts

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"); }

External Stylesheet Example
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;
}

index1.html

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>

You can download all the fonts here Google Font Directory for free ...

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.

Posted: **Thu Feb 24, 2011 9:24 pm**

Nice idea, thanks for the tip!

Jack

PureBasic Forums - English

Embed TrueType Font In HTML - No Google Font API needed !

Embed TrueType Font In HTML - No Google Font API needed !

Re: Embed TrueType Font In HTML - No Google Font API needed