Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Using Web Fonts and Typography

Page of 168

Reviewing Supported Fonts

iOS webkit supports a large number of fonts, however, very few of these are also supported by Android's native browser. To ensure that your applications uses the same font across a wide variety of devices you should make use of Webkit's support for downloadable fonts.

Google Web Fonts contains over 600 free, open-source fonts that have been optimized for the web.

Downloading a Font

CSS-3 capable browsers can download fonts and use them to format your text. Use the @font-face selector to define a font name and associated download url. You can then reference the font in subsequent style definitions as indicated below:

@font-face {
  font-family: 'Droid Sans';
  src: url(fonts/Droid_Sans.ttf);
}

h1{
  font-family: 'Droid Sans';
}

Setting Text Stroke and Fill Color

CSS3 supports the following attributes:

Property Description
text-fill-color Sets the fill color of the text
text-stroke-color The "outline" color of the text
text-stroke-width The thickness of the stroke line

The following snippet illustates how to use these properties:

Using CSS3 Font Attributes

This is a test


Adding Text Shadows

The CSS3 text-shadow property enables you to cast a shadow behind your text as indicated below:


This is a demonstration of text shadows


Text-ShadowOutput
2px 10px 5px #000;
10px 2px 5px #000;
2px 10px 1px #000;

As illustrated at right, text-shadow takes four arguments:

  1. Right shadow offset
  2. Vertical (down) shadow offset
  3. Blur radius
  4. Shadow color




Using Web Fonts and Advanced Typography in a Sencha Touch Theme

The following code snippet illustrates how add a downloadable web font to your app's .scss file. Note the following:

  • The @import on line 6 fetches the font from Google
  • The $font-family variable set on line 9 uses the font that was specified on line 6
  • The overriding of the .x-innerhtml style class on line 52 sets the global font color to dark-brown and applies a subtle text shadow that is particularly noticable in the app's titlebar.

Using downloadable web fonts and CSS3 typography

$base-color: #da9100;
$base-gradient: glossy;
$include-default-icons: false;

// Importing our custom web font.
@import url(http://fonts.googleapis.com/css?family=Rambla:700);

// use custom web font as default
$font-family: 'Rambla', sans-serif !default;

@import 'sencha-touch/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
// @include sencha-list-paging;
// @include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
// @include sencha-draw;
// @include sencha-charts;


// Your custom code goes here...
@include pictos-iconmask('user_add');
@include pictos-iconmask('user_list');
@include pictos-iconmask('team1');
@include pictos-iconmask('phone_ring1');
@include pictos-iconmask('search');
@include pictos-iconmask('tv');
@include pictos-iconmask('mail');
@include pictos-iconmask('phone1');
@include pictos-iconmask('info');

#beerintro img {
  float: right;
  border-radius: 5px;
  margin-left: 5px;
}

.x-innerhtml {
    color: #3a1515;
    text-shadow: 0px 1px rgba(255,255,255,.3);
}
Page of 168
comments powered by Disqus