OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Web Fonts

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear CSS Box Sizing CSS Display CSS Positioning CSS Z-Indexing CSS Opacity CSS Icons CSS Media Queries

ADVANCE

CSS Multiple Backgrounds CSS Gradient CSS Shadow CSS 2D Transform CSS 3D Transform CSS Transition CSS Animation CSS Image Reflection CSS Masking CSS Navigation Bar CSS Dropdown CSS !important CSS Specificity CSS Math Functions CSS Web Fonts CSS Pagination CSS Multiple Columns CSS Resizing and Offset CSS Variables CSS Conclusion

CSS Web Fonts

PREVIOUS NEXT

Web fonts give room for web developers to make use of fonts not installed on the user's computer device. We use the @font-face rule for this.

There are different font-formats which includes:

  • True Type Fonts (TTF)
  • Open Type Fonts (OTF)
  • Web Open Font Format (WOFF)
  • Embedded OpenType Font (EOT)

How To Use Web Fonts

  • Specify the @font-face
  • Define the font-family property name and value
  • Define the src property and value.
  • src is the location of the address of the font.
TRY IT OUT YOURSELF
  • Reference the font to the HTML element that you want it to be applied to, by using the same font family property and value
TRY IT OUT YOURSELF
tips
TIP:

URL should always be in small letters (lowercase)
font-weight, font-variant and other font property can be specified inside the @font-face rule, and it will be referred according with only its name

PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT