Introduction to Using Font-Face for CSS
@font-face is a new CSS rule that allows a font on a website to show even if that font is not web safe or integrated into users browsers or computers. The result is that now you can have any custom fonts you wish on your websites with simple CSS code.
What is Web Safe Fonts?
Arial, Times New Roman, Verdana and Trebuchet are all part of the list of web safe fonts, which contains more then the ones listed here. They are considered to be wide spread and are installed by default on all OS's and browsers. This meant that if you used a font that was not on the web safe font list, users browsers and computers would default to one of the web safe fonts.
Due to that, designers and developers had to build websites and apps with that in mind. Because of @font-face, custom fonts are a easy reality.
How to call a @font-face Font
@font-face is called in CSS files by doing the following:
In your CSS when you begin to define the look and style for different text and segments you can call the new font simply like below.
font-family: NewCoolFont, Arial, Verdana;
Note that when doing CSS styles for text and that includes fonts, always include a secondary and third font just in case the @font-face font is not supported.
Adding your own Custom Fonts
Bringing in your own fonts requires some small tasks. This will ensure that your Font has the widest possibly to show correctly on all devices. The following steps should help you achieve 90% or more, it improves all the time as @font-face becomes more widely standardized.
- Download your font or make your font and try to use .ttf file format. (other formats such as .otf can work, all be it with varied results.
- Head to: Fontsquirrel Generator and upload your font and then let it finish its process. This can take a few seconds to several minutes depending on the font and file used.
- Download the generated kit, which will contain several files.
- Take the font files and place them in a folder called "fonts" into the "css" or "styles" folder on your website.
- Copy the stylesheet.css from the generated kit to the "fonts" folder you just created and rename the file to "fonts.css"
- In the <head> of your html file, add the following as the first stylesheet (above other cssstyle sheets):
<link rel="stylesheet" type="text/css" href="/styles/fonts/fonts.css" />