Custom Fonts - Real Python Part 3

Let’s also use a custom Star Wars font calledStar Jedi.

Custom fonts can be a bit tricky on the web because there are so many different formats you need to support because of cross browser compatibility issues. Basically, you need four different formats of the same font. If you have a TrueType font you can convert it into the

four different fonts that you will need with an online font conversiontool. Then you’ll have

to create the correct CSS entries.

You can do this conversion on your own if you’d like to practice. Simply download the font from the above URL and then convert it. Or you can grab the fonts already converted in the

“chp08” folder on the exerciserepo.

1. Add a new file calledmec.cssin the “static/css” directory. Add the follow styles to start

with: 1 @font-face { 2 font-family: 'starjedi'; 3 /*IE9 */ 4 src: url('../fonts/Starjedi.eot'); 5 /* Chrome, FF, Opera */

6 src: url('../fonts/Starjedi.woff') format('woff'), 7 /* android, safari, iOS */

8 url('../fonts/Starjedi.ttf') format('truetype'), 9 /* legacy safari */

11 font-weight: normal; 12 font-style: normal; 13 } 14 15 body { 16 padding-bottom: 40px; 17 background-color: #eee; 18 } 19 20 h1 {

21 font-family: 'starjedi', sans-serif; 22 } 23 24 .center-text { 25 text-align: center; 26 } 27 28 .featurette-divider { 29 margin: 80px 0; 30 }

The main thing going on in the CSS file above is the@font-facedirective. This defines

afont-familycalledstarjedi(you can call it whatever you want) and specifies the various font files to use based upon the format requested from the browser.

It’s important to note that the path to the font is the relative path from the location of

the CSS file. Since this is a CSS file, we don’t have our Django template tag likestatic

available to us.

2. Make sure to add the newmec.cssto thebase.htmltemplate:

1

2 <link href= "{% static "css/bootstrap.min.css" %}" rel="stylesheet"> 3

4 <link href= "{% static "css/mec.css" %}" rel="stylesheet">

3. Test! Fire up the server. Check out the changes. Our “Hello, world!” is now using the cool startjedi font so our site can look a bit more authentic.

Layout

Not too shabby for somebody with zero design ability.

Ok, there is a lot going on in the page, so let’s break it down a piece at a time (sound familiar?) and look at the implementation for each.

Navbar

Navbarsare pretty common these days, and they are a great way to provide quick links for navigation. We already had a navbar on our existing template, but let’s put a slightly different one in for the sake of another example. The basic structure of the navbar is the same in Bootstrap 3 as it is in Bootstrap 2, but with a few different classes. The structure should look like this:

1  2 <div class="navbar-wrapper">

4 <div class="navbar navbar-inverse navbar-static-top" role="navigation">

5 <div class="container">

6 <div class="navbar-header">

7 <button type="button" class="navbar-toggle"

data-toggle="collapse" data-target=".navbar-collapse"> 8 <span class="sr-only">Toggle navigation</span>

9 <span class="icon-bar"></span> 10 <span class="icon-bar"></span> 11 <span class="icon-bar"></span> 12 </button>

13 <a class="navbar-brand" href="#">Mos Eisley's Cantina</a> 14 </div>

15 <div class="navbar-collapse collapse"> 16 <ul class="nav navbar-nav">

17 <li class="active"><a href="{% url 'home' %}">Home</a></li> 18 <li><a href="/pages/about">About</a></li>

19 <li><a href="{% url 'contact' %}">Contact</a></li> 20 {% if user %}

21 <li><a href="{% url 'sign_out' %}">Logout</a></li>

22 {% else %}

23 <li><a href="{% url 'sign_in' %}">Login</a></li> 24 <li><a href="{% url 'register' %}">Register</a></li> 25 {% endif %}

27 </div>  28 </div>  29 </div>  30

31 </div>

Add this to yourbase.htmltemplate just below the opening body tag.

Comparing the above to our old navbar, you can see that we still have the same set of list items. However, with the new navbar we have a navbar header and some extra divs wrapping

it. Most important are the<div class="container">(aka container divs) because they

are vital for the responsive design in Bootstrap 3.

Since Bootstrap 3 is based on the “mobile-first” philosophy, the site is responsive from the start. For example, if you re-size your browser to make the window smaller, you will see the navbar links will disappear and a drop down button will be shown instead of all the links (although we do have to insert the correct Javascript for this to happen, which we haven’t done yet). Clicking that drop-down button will show all the links. An image of this is shown below (ignore the colors for now).

Figure 9.3: responsive dropdown

Django to bind to your network adapter when you start it so that the development server will accept connections from other machines. To do this, just type the following:

1 $ ./manage.py runserver 0.0.0.0:8000

Then from your mobile phone, put in the IP address of your computer (and port 8000), and you can see the site on your mobile phone or tablet. On unix machine or Macs you can do an ifconfig from terminal to get your IP address. On windows machines it’s ipconfig from the command prompt. We tested it on 192.168.1.12:8000.

There’s always certain sense of satisfaction that comes out of seeing your websites on your own phone. Right?

There are also simpler ways to test out the responsiveness of bootstrap. The simplest being simply resizing your browser and what bootstrap automatically adjust. Also you can use an

online tool likeviewpoint-resizer.

Colors

To make the navbar use our cool starjedi font, update mec.cssby replacing the currenth1

style with:

1 h1, .nav li, .navbar-brand {

2 font-family: 'starjedi', sans-serif; 3 }

This just applies our font selection to the links in thenavbaras well as theh1tag. But as

is often the case with web development, doing this will make the navbar look a bit off when viewed from the iPhone in portrait mode. To fix that, we have to adjust the sizing of the

.navbar-brandto accommodate the larger size of the startjedi font. This can be done by

adding the following tomec.css:

1 .navbar-brand { 2 height: 40px; 3 }

Now your navbar should look great on pretty much any device. With the navbar more or less taken care of, let’s add a footer as well, just below -<h1>Hello, world!</h1>:

1 <hr class="featurette-divider"> 2

3 <footer>

href="http://realpython.com">The Jedi Council</a></p> <p class="text-center"> · Powered by about 37 AT-AT Walkers, Python 3 and Django 1.7 · </p>

6 </footer>

The actual HTML is more or less the same, right? But you may be saying to yourself, “What is the<footer>tag? Why shouldn’t we just use a<div>?

In document Real Python Part 3 (Page 173-180)