Category Archives: fonts

Building a Responsive Navigation Menu

In today's blog post, I'm going to demonstrate how to make a horizontal responsive navigation menu anywhere on your webpage. This tutorial also demonstrates how to make a completely responsive web site if you follow it through. Here is a link to the final product:

http://jafty.com/ResponsiveSite.html

If you want a vertical responsive menu, you can adapt the code accordingly yourself. I am posting this here for reference because it seems like every time I have to do this for a responsive website, I have to relearn it. Now myself and anyone else that needs the technique can find it right here. Another appropriate title for this tutorial could have been how to make a responsive image map since that is what led me to doing this in the first place.

Using Divs Instead of Image Maps

While this tutorial is technically about doing a navigation menu, this exact same method can be used in place of image maps because, if you've tried to make a responsive page that has an image map in it, you know it doesn't work well.

Building a Responsive Nav

First, lets' build our HTML:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="page">
<div id="header-menu-overlay">
<img src="topnav0map.png" style="width:100%;"  border="0" alt="top navigation menu"/>
<div>
    <div>
        <div><a href=""></a></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</div>
</div>
</body>
</html>

To follow along with the tutorial, copy and paste the above code into a new notepad document and save it as test.html. The first div includes an img tag in it as you can see above. Here is the actual image to give you a better idea of what I have done here. So "topnav0map.png" refers to the following image:

topnav0map.png:
topnav0map

Again, if you're following along, right click on the above image and save it to the same directory as your test.html file. I put the image in a blue background here so you can see it because it is mostly white over a transparent layer done in Photoshop. The reason I use an image here is because it is responsive when you set the width to 100% and height to auto. This is about when I got the idea for an image map to link the items in the nav as you see them in the above image, but quickly found out that image maps do not resize well when changing either the page size or the zoom level when looking at the page live. therefore I used divs as they are more responsive when used properly with percentages as you'll see below when I get to the CSS part.

Responsive CSS Layout

The most important part is probably the responsive CSS code. Here is what I used:

#page{
position:relative;
width:100%;
max-width:900px;
background-color:#222288;
margin:0 auto;
min-height:1200px;
margin-top:25px;
}

.header_menu_overlay{
position: absolute;
top: 100px;
left:0px;
width: 100%;
min-height: 30px;
text-align: center;
z-index: 99999;
}
.navwrap{
top:-20px;
min-height:27px;
position: relative;
}

.nav_item_wrap{
position:relative;
width:100%;
max-width:1125px;
height:27px;
border: 1px solid brown;
margin:0 auto;
}

.nav_item{
position: relative;
border: 1px solid red;
height: 33px;
display: block;
float: left;
z-index: 999;
}

.nav_item a{
width: 100%;
height: 100%;
position: relative;
display: block;
}

.nav1{
width: 7%;
margin-left: 9%;
}

.nav2{
width: 10%;
margin-left: 1%;
}

.nav3{
width: 10%;
margin-left: 1%;
}

.nav4{
width: 20%;
margin-left: 1%;
}

.nav5{
width: 19%;
margin-left: 1%;
}

.nav6{
width: 10%;
margin-left: 1%;
}

.pg{
position:relative;
width:100%;
max-width:900px;
min-width: 225px;
background-color:#8a1734;
margin:0 auto;
min-height:600px;
margin-top:125px;
}

First, I used the "page" div as a page wrapper by setting a standard 900px width which you may adjust to your needs. I also set width to 100% which is very important for responsive designs, but also notice the max-width is set to 900px this is so your page won't go crazy-wide when you open a large browser window on a PC. If you want to always cover the width of the screen regardless, then you could remove this, but I recommend using a maximum width myself for most scenarios. Next I'll include a short description for each CSS declararation after "page" which I just explained:

  • header_menu_overlay - is used to position the overall navigation menu where you want. You'll see I decided to put it a hundred pixels from the top of the page, but you can put yours wherever you need it even at the bottom of the page for a footer menu if that's what you need. the header-menu-overlay div is the one that holds the image as well as the rest of navigation divs. Be sure to set the width only of the image in this div and set that width to 100% so it is responsive.
  • navwrap - is the div that wraps the other divs we will use for our links. we set it's position to relative and top to a negative number to force it on top of the image above it.
  • nav_item_wrap - wraps around the individual menu items and has a margin of "0 auto" so it centers the group of menu items to the rest of the page nicely.
  • nav_item - this class is set to all of the navigation item divs and is used to set their height, display and to float them left which is important for responsiveness.
  • nav_item a - is a style definition for the anchor/link tags inside of the nav_item div. Without this the links will not work. It sets the width and height to 100% of the containing element. You have to set "position: relative", width and height for this to work.
  • nav1 - nav6 - the next six CSS declarations are used to set each individual menu item's width and margin-left properties since they can all be different.

Add CSS Classes & Content to HTML:

Okay now we just need to add the classes above in the proper spots in our original HTML code and add some content for each page so that your new HTML page  looks like this:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="page">
<div id="header_menu_overlay">
<img src="topnav0map.png" style="width:100%;"  border="0" alt="top navigation menu"/>
<div class="navwrap">
<div class="nav_item_wrap">
<div class="nav_item nav1"><a href="#pg1"></a></div>
<div class="nav_item nav2"><a href="#pg2"></a></div>
<div class="nav_item nav3"><a href="#pg3"></a></div>
<div class="nav_item nav4"><a href="#pg4"></a></div>
<div class="nav_item nav5"><a href="#pg5"></a></div>
<div class="nav_item nav6"><a href="#pg6"></a></div>
</div>
</div>
</div>

<div class="pg"><a name="pg1">page 1</a>
<h1>Place all of your page 1 content here...</h1>
</div>

<div class="pg"><a name="pg2">page 2</a>
<h1>Place all of your page 2 content here...</h1>
</div>

<div class="pg"><a name="pg3">page 3</a>
<h1>Place all of your page 3 content here...</h1>
</div>

<div class="pg"><a name="pg4">page 4</a>
<h1>Place all of your page 4 content here...</h1>
</div>

<div class="pg"><a name="pg5">page 5</a>
<h1>Place all of your page 5 content here...</h1>
</div>

<div class="pg"><a name="pg6">page 6</a>
<h1>Place all of your page 6 content here...</h1>
</div>
</div>
</body>
</html>

Now you should be done and you have a completely responsive website in no time at all! You should go back and remove the borders from the navigation menu's CSS as those were just for demonstration.

Summary

So if you followed this tutorial, you should have learned quite a bit about responsive design. Not only should you be able to grasp how to develop a navigation menu from this article, but you should now be able to understand how to replace an inline image map with responsive divs and even how to make an entire responsive website using the techniques demonstrated here. Remember to use percentages instead of pixels for widths and even heights wherever you can and your design will be responsive and evenly laid out for all devices. Congratulations, you are now a responsive developer if you understood all of this. Good Luck!

View outcome of tutorial here:

http://jafty.com/ResponsiveSite.html

 

 

How to Identify a Font

Today I was challenged with figuring out what a font was that a client wanted. He had sent me an image of some text with the font he wanted, but no name and no example HTML code to look at. So what did I do? It wasn't easy at first until I found some helpful sites on the internet.

Identify Font From Image

A site to help you discover what a font is from an image:

http://www.myfonts.com/WhatTheFont/

The above website allows you to idenfy a font by uploading an image of the font then asking a series of questions about what letter is what. A tip is to take an image of the font that is about 14 characters long and save it as a .jpg before uploading to that site.

Identify Font by Answering Questions

Here is another site that will help you figure out what a font is just by answering a series of multiple choice questions about the font in question:

http://www.identifont.com/

Just answer the first question on that page on the left site and keep on going until it gives you the answer you were seeking with several alternative fonts from which your font will most likely be one of.

Summary

I used both above methods successfully after years of having issues identifying fonts, so I thought I should share them.

How to Add Custom Fonts to Windows

Here we discuss how to add fonts to your Windows OS. You may find this necessary to use new fonts in Photoshop or any other program running under the Windows OS.

Here are the simple steps:

  1. download the .ttf file from any free fonts website such as one I found here: http://www.dafont.com/
  2. unzip the file you download from dafont.com and from your Windows desktop, simply double click on the .ttf file(s) one at a time and Windows will know what to do with them. You'll only have to click the "Install" option in the pop up window that opens when you double click on the .ttf file.

Summary

Yes, that's really all there is to do! Now open your Photoshop or other program you wanted to use a custom font in and it will be there now! Just like magic!

How to Add Custom Fonts to Any Website

Today we are exploring how to add custom fonts to any website including WordPress. First let's take a quick look at the basic available font formats:

Font Formats:

TTF - Works in Firefox and most decent browsers but does NOT work IE and iPhone.
EOT - IE only because they have to be difficult.  EOT is an acronym for Embedded Open Type. The format was created by Microsoft (the creator of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.
WOFF - Web Open Font Format. Created for use on the web, and developed by Mozilla, it is the compressed, emerging standard. Should soon work with ALL modern browsers!
SVG - SVG or Scalable Vector Graphics fonts are For iPhone/iPad. Its the only format allowed by Safari version 4.1 and below. iPhoneSVG fonts are basically for older versions of iOS Safari (3.2-4.1).

Here is how to embed custom fonts on your website using the @font-face property of CSS:

  1. First be sure to have at least a true type font file and a .woff file because .woff is for modern browsers including Firefox while true type fonts are for some versions of Firefox, safari, android, etc. browsers. so if you only have a .ttf file for your new font, use an online file converter to convert the .ttf file to a .woff file like the one found HERE: http://everythingfonts.com/ttf-to-woff
  2. find your site's main CSS style sheet and add the following code to the start of the file:
      @font-face{
    font-family: 'shapefont';
    src:  url('fonts/OptimusPrinceps.woff') format('woff'), /* Modern Browsers */
    url('fonts/OptimusPrinceps.ttf')  format('truetype');/* Safari, Android, iOS */
    }
  3. Then simply declare your font wherever needed in the site's css sytles using the new font-family you created so an example CSS delaration for the above font which I named "shapefont" would be:
    font-family: shapefont;

NOTE: if you copy and paste, you'll need to replace all quotes, single and double because this site uses fancy ones that don't work with CSS code.

Using Free Web Font Kits from FontSquirrel.com

A quick and easy way to make sure that you have fonts that will work in all browsers and devices is to include all four basic font types, tff, wof, eot and svg. An easy way to assure that you can get all four in a nicely wrapped font kit is to use Font Squirrel. Here are the simple instructions for geting a complete free font kit from Font Squirrel:

  1. Go to http://www.fontsquirrel.com/fonts/list/find_fonts and you'll see a list of the fonts available through Font Squirrel.
  2. Click on one of the fonts(not on the download button because that is for one font type only).
  3. Then select the "webfont kit" tab on that font's page.
  4. Make sure that all 4 file types are checked then click on the button that reads "DOWNLAD @FONTFACE KIT" and click "ok" to download to your computer.
  5. Unzip the zip file on your desktop and open it. You'll see a file named "How_to_use_webfonts.html" which will have step by step instructions on how to install the fonts from here.

A Sure-Fire Method to Make your Font Work

I understand that the instructions from Font Squirell can be a little vague, so here is my sure-fire method for installing a web font kit and this method will work with fonts from anywhere by the way.

  1. After you have your font files(steps 1-5 above). Make a new folder on your desktop named "mysite".
  2. put your HTML page or a test HTML page into your "mysite" folder.
  3. Inside of the head tags in your HTML page, add:      <!--Custom fonts:-->
        <link rel="stylesheet" href="font.css" type="text/css" charset="utf-8" />
  4. Create a new CSS file called font.css and paste the following code into it: @font-face{
    font-family: 'MyFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?iefix') format('eot'), url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg');
    }
  5. In line two of the above code, where font-family is declared, change "MyFont" to whatever you want to call your new font. This is the name you will use to call your font by in your regular style sheet.
  6. Save the font.css file and put it inside your "mysite" folder with your HTML page.
  7. Move your .wott, .eot, .ttf and .svg font files into the same "mysite" folder as the HTML and CSS files. If you are using a Font Squirrel kit, open the folder you unzipped earlier, find the "web fonts" folder inside and select the one you want. There are different types such as light, medium, bold etc. for most fonts. You may choose to install more than one type. If so, simply repeat the process for each type and give it a unique font-family name. If you're not sure which folder has your font files, use the one that ends with "regular_macroman" and open it. copy the .svg, .eot, .wott and .ttf files into your "mysite directory."
  8. Take the name you named your custom font(originally MyFont") in steps 4 & 5 above and use it in your web page's CSS style sheet. If you don't have one yet, create a new file called style.css and add the following code to it:

    body{
    font-family: "MyFont";
    }

  9. Save your style sheet as style.css if you made a new one. If you had an existing CSS file already, modify the font-family declarations you want to include the custom font name you created for "MyFont". Simply replace whatever comes after "font-family:" with the name of your new font wherever you want to use it and you are done!

 Summary

That's really all there is to it. The Font Squirrel method just described was made simple by putting everything in the same folder. You'll probably desire a different structure, so be sure to change any file paths accordingly if you do so. If you're doing this to a WordPress website, just locate your current theme's style.css file and add the @font-type declaration shown above to the top of the file then add the font you named wherever you like in the site using the font-family declaration. It's easy as pie! Good Luck!