Font Families What are they and why do I need them?

How does it work? You can define the font family by either applying it in the html or the css. Css example -.text { font-family: "calibri"; } Html example – H2 { font-family:'Lucida Casual', 'Comic Sans MS'; } The web browser can only apply the font if it is available on the system which it operates, in other words, if the computer doesn’t have the font it won’t work. What is a font family? It is a typeface that will be applied by a web browser to some text. It is relevant for the display of text on the screen, printer or other device

How can I ensure it will work with the font I want? If the system doesn’t have the font, you can choose a substitute font for that system to use..text { font-family: "calibri", Garamond, 'Comic Sans'; } You must separate each font by a comma. You should also list the fonts in prefferencial order, in the case above, calibri is preffered, but if it doesn’t exist then Garamond would be next. Any font families that have a space in the name has to be encapsulated in either quotes or single quotes.

How can I get around users not having the font I want to use? First understand that there are fonts available on all systems, see this list: Andale Mono Arial/Arial Black Courier/Courier New Comic Sans Georgia Impact Times / Times New Roman Trebuchet MS Verdana Most web developers try to limit themselves to this list of fonts. Cross platform matters. Windows, mac, android, and iOS all have different fonts just because all windows computers have a certain font, other Operating Systems may not.

How can I get around users not having the font I want to use? Now that you understand that you have many choices in fonts, we can push the amount even further using Font Web Services. What is a Font Web Service? The idea is simple – a font can be licensed and the code connects that font to the webpage, eliminating the need to have fonts installed on users computers. Who operates these? Google - Typekit - Is there a cost? Google has 466 fonts for free. Typekit has over 700 fonts but for a fee.

body { font-family: ‘Lobster', serif; font-size: 48px; } Lobster Font! h1 {font-family: 'Lobster', cursive;} How to I use this awesome webfont? The webfont provider will help you with the code, googles webfont told me to embed this into the html of my website. Google also gave me this code for the css

Summary This example was created by researching what a font family is and then cross referencing the html and css implementation of it. Fonts play a large part in web development because fonts are art, and as such their appearance can change the feel and functionality of a website. Although it may be a subconscious thing for the end user. Choose your fonts carefully, make sure the represent the site in a way that doesn’t clash with your theme. Make sure they are cross platform and most of all make sure that your text is legible.