Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Embeding Font Files in 1.4

edited December 2013 in Help! with 1.x
Greetings!

I'm trying to figure out how to embed a font. From the 1.4 release notes:

[quote]You can now embed font files, which can then be used in stylesheets, or, if you don't know CSS, the <font> element. Fonts are simply imported as stylesheet passages containing the font file in base64 encoding. Supported font file extensions are TTF, WOFF, OTF and SVG.

So, I downloaded the font I wanted. Then, I Googled Base 64 Encoder and found one. I uploaded the file, encoded it and pasted the huge mass of text into a passage with a stylesheet tag.

Is that it?

Thanks!


EDIT: Nah, I'm not doing something right because on my friend's computer, it's some standard font.

Comments

  • Here's how you embed a font:

    undefined

    undefined

    undefined

    undefined
  • Wow! That's service, answering questions on Christmas. With pictures, even! Nice new avatar, too. :)

    Thanks a lot, man! It says it was successful.
  • Now here's a question. Suppose I have a specific font, but I only want to use it when one character speaks. Let's say that this character is an alien and speaks in an alien language. How would I finagle that?
  • CSS: http://www.w3schools.com/css/css_font.asp
    HTML: http://www.w3schools.com/tags/tag_font.asp

    HTML: <font face="Times New Roman" size="10" color="green">I am a space alien!</font>

    CSS: <span style="color:blue; font-size: 10; font-family: Serif;">I am a Space Marine!</span>



    Now, as for the "correct way" to do it, I'm not 100% certain, but I tested the code below so I know it works.

    In your CSS stylesheet (any passage with the tag "stylesheet" without quotes), you could enter to following code:
    #spaceAlien {
    color: green;
    font-weight: bold;
    font-size: 200%;
    font-family:"Times New Roman", Times, serif;
    }
    Then, in your passage, you could make a more simplified version of the CSS code above:
    <span id="spaceAlien">I am an alien!</span>
    Doing it that way will mean less text and less typing, and as far as I know, it's the "right" way to do what you're seeking.

    For more information on id and class selectors: http://www.w3schools.com/css/css_id_class.asp

    Hope that helps! :)
  • Strictly speaking, the most correct way is to use class selectors instead of id selectors:

    .alien { color: green; font: bold 1.5em "Times New Roman"; }

    <span class="alien">Greetings.</span>
  • Lovely! Thank you very much!
Sign In or Register to comment.