What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Custom Fonts

Modern webbrowsers support fonts that are not installed on the user’s machine. The fonts are stored on the server or within the app and are used by the browser. Follow these five steps for adding your own custom fonts:

  1. Choose a font. Note: Please be careful with licensing. Font licenses, even of those you bought, may prevent usage on websites. You need a license for including fonts via @font-face. Font services like “Typekit” do not work in iOS apps, when the user is offline. So always include your fonts! A great place for free web fonts is the Google Font Directory.
  2. Upload the font to the “Font Squirrel @font-face-Generator”. It produces the necessary markup and files for cross-browser compatibilty.
  3. Transfer the font files (.eot, .svg, .ttf and .woff) into a new directory inside the folder “fonts”.
  4. Update the @font-face entry in “fonts.css” with the ones provided in “stylesheet.css” by Font Squirrel. Correct the path to the files accordingly. For example:
    url('pt_serif-web-regular-webfont.eot'); 

    becomes

    url('../fonts/ptserif/</strong>pt_serif-web-regular-webfont.eot');
    
  5. Use the custom font by adding “font-family: “Your Font Family” to the content you want to style. The name of the family must match the one provided under “font-family” in “fonts.css”.
    In the following example all first headlines will be styled in “PTSerifRegular”. Excerpt from “typography.css”:

    h1 {
    Font-family: "PTSerifRegular";
    }
    

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

7 Responses to “Custom Fonts”

  1. Hallo Herr Franke,

    ich bin kräftig dabei und versuche gerade die Font zu ändern (so wie sie vorgeschlagen haben, komme aber nicht ganz weiter. Ich habe eine neue Directory angelegt und die Fontpfade in typography.css geändert, bekomme aber nur eine Font bei der h1-Überschrift.

    Ausserdem: wie stelle ich Umlaute im Text der dossiers dar????

    Ansonsten superklasse. :-)

    Herzliche Grüße

    Reinhold Deisenhofer

  2. Alle Links sind sicher richtig gesetzt? Die Pfade stimmen? Die Bezeichnung im CSS für P stimmt auch (auch nicht die Anführungszeichen vergessen?).

    Umlaute sollten kein Problem sein, sofern die Schriftart diese unterstützt.

  3. Interesting product. Note, make sure you have a license before embedding fonts, or converting them in Font Squirrel.

  4. Where is my water Another interesting post! This is one of the few blogs I can return to on a regular basis….

    Another interesting post! This is one of the few blogs I can return to on a regular basis….

  5. It’s really a nice and useful piece of information. I am glad that you shared this useful info with us. Please keep us up to date like this. Thank you for sharing.

    Stop by my webpage :: Phen375 Reality

  6. Hi there friends, good post and pleasant urging commented at this place, I am truly enjoying by these.

    My website – tanteifukuoka.com

  7. I just could not leave your site before suggesting that I actually enjoyed the usual info
    an individual supply in your guests? Is going to be again ceaselessly to
    check up on new posts

    My weblog: massager for back pain

Leave a comment, suggestion or question.

You must be logged in to post a comment.