With CSS3, you are not bound to use only 'Web-Safe' fonts. You can use whatever fonts you want.
As we all know CSS3 allows the developers to design the website as the developer wants. It gives us a lot of opportunities,
With HTML, we can just use the web-safe fonts. I'll say, HTML allows us to use only default fonts.
But with CSS3 we are not limited to the web-safe fonts only. We can use any kind of fonts into our pages.
As you see on the top of the page, I've used some different and modern fonts.
If you want to use some different fonts into your web page, you can do this using
@font-face rule.Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TruType is the most commons format for both Mac OS and Microsoft Windows operating systems.
OpenType Fonts (OTF)
OpenTYpe is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major Computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TruType with compression and additional metadata. The Goal is to support font distribution from a server to a client over a network with bandwidth constraints.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within and SVG document. You can also apply CSS to SVG document, and the @font-face rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
Defining your own Fonts
In the CSS3 you can define your own fonts using @font-face rule. In @font-face rule, first you need to define a name for the font and then point to the font file.
@font-face {
font-family: AlexaBrush;
src: url(AlexaBrush-Regular.ttf);
}Using Bold Fonts
If you want to use the same font but with bold style, you need to define another @font-face rule containing the bold font's descriptors.
@font-face {
font-family: TlwgTypist;
src: url(TlwgTypist.ttf);
}
@font-face {
font-family: TlwgTypist;
src: url(TlwgTypist-Bold.ttf);
font-weight: bold;
}
p {
font-family: TlwgTypist;
}
Output:
http://goo.gl/EP1CJ8 (Download TlwgTypist Fonts, HERE)In the above code "TlwgTypist-Bold.ttf" is another font file with Bold fonts.
Browser will use this whenever a TlwgTypist font is rendered as bold.
This way you can use your own fonts using @font-face.
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.