Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Web safe fonts

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Web Fonts

      Font that is used in a website, but not installed by default on the user's device, is known as the web font. CSS allows to specify the font files, that are available on the web, to be easily downloaded along with your website when accessed.

      CSS Web Fonts - Font Format Types

      The different types of font formats are explained below:
      • TrueType Fonts (TTF): TrueType font is an outline font developed by Apple. It is the most common font format for MacOS and Windows Operating System.
      • OpenType Fonts (OTF): OpenType fonts are derived from TrueType font format's basic structure, but adds some additional intricate data structures to it. It provides more typographic control.
      • Web Open Font Format (WOFF): As the name suggests, it is an open web font developed by Mozilla. It uses a compressed version of structure that is used by TrueType, OpenType, and Open Font Format, along with additional information of metadata and private-use data structures.
      • Web Open Font Format2 (WOFF2): It is the second version of Web Open Font Format. Denoted as woff2. This font has better compressed algorithm than woff.
      • SVG Fonts / Shapes: An SVG font is a new version of OpenType font format. This format allows the characters to be displayed in multiple colors, with different transparencies and even with animation.
      • Embedded Open Type Fonts (EOT): These are compact form of OpenType font designed by Microsoft, used as embedded fonts on web pages. They are supported only by the Microsoft Internet Explorer.

      CSS Web Fonts - Key Points

      Some vital points related to web fonts are specified in following section:
      • The fonts on web are generally not free, to use. You either need to pay for them or follow the license conditions, like giving credit to the creators of the font, in your code or on your site. Stealing these fonts or using them without giving proper credit, is ethically incorrect.
      • Web Open Font Format versions 1 and 2 (WOFF and WOFF2) are supported by major browsers, even the older ones.
      • The TrueType and OpenType specifications, including variable fonts, chromatic fonts, and font collections, are completely supported by the WOFF2 file format.
      • Important is the order in which the font files are listed. The browser selects the first font file that it is able to use from the list of multiple font files provided. Hence, you should list the preferred format first. When a format is not understood by the browser, it fallbacks to the next format.
      • When using legacy browsers, you should provide EOT (Embedded Open Type), TTF (True Type Font), and SVG web fonts for download.

      CSS Web Fonts - @font-face At-Rule

      Using @font-face CSS at-rule, a font can be specified for a website that is not installed on the user's device. The @font-face at-rule has a number of descriptors to identify and describe the font. Refer the following code block for @font-face at-rule syntax:
      @font-face {
         font-family: "Sansation Light Font";
         src: url("font/SansationLight.woff") format("woff");
         font-weight: normal;
         font-style: normal;
      }
      The above syntax lists following properties:
      • font-family: Specifies the name by which you refer a font. The name can be anything you want, but you should be using this name consistently in your css code.
      • src: Specifies the path to the font file to be imported in your CSS, via. the url() and the format of the font file, via. the format, which is optional. Specifying format is useful as it allows browser to determine the font that needs to be used. Multiple declarations can be made using comma separated values.
      • font-weight: Specifies the weight (or boldness) of the font. Accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400;
      • font-style: Specifies whether a font should be styled with a normal, italic, or oblique face from its font-family.
      Note: Values such as font-variant and font-stretch can also be specified for the web font, along with unicode-range in newer browsers. This range is useful, when the font is downloaded only if the page contains these specified characters in the range, saving the unnecessary downloading.
      Let us see an example where @font-face at-rule is applied:
      <html>
      <head> 
      <style>
         @font-face {
            font-family: "Sansation Light Font";
            src: url("font/SansationLight.woff");
         }
         body {
            font-family: "Sansation Light Font", serif;
         }
      </style>
      </head>
      <body>
         <h2>@font-face at-rule</h2>
         <p>This is SansationLight Font.</p>
      </body>
      </html>

      CSS Web Fonts - @font-face / font-stretch

      Following example demonstrates the setting of stretch value for a font face, using the percentage range 50% and 200% used inside the @font-face at-rule:
      <html>
      <head> 
      <style>
         @font-face {
            src: local("monospace");
            font-family: "f1";
            font-style: normal;
            font-stretch: 50% 200%;
         }
      
         .container {
            font: 2rem "f1", sans-serif;
         }
      
         .font-condensed {
            font-stretch: 50%;
         }
      
         .font-normal {
            font-stretch: 100%;
         }
      
         .font-ultra-expanded {
            font-stretch: 200%;
         }
      
         .font-semi-condensed {
            font-stretch: semi-condensed;
         }
      
         .font-extra-condensed {
            font-stretch: extra-condensed;
         }
      
         .font-ultra-condensed {
            font-stretch: ultra-condensed;
         }
      
         .font-semi-expanded {
            font-stretch: semi-expanded;
         }
      
         .font-extra-expanded {
            font-stretch: extra-expanded;
         }
      </style>
      </head>
      <body>
         <div class="container">
            <p class="font-condensed">ultra-condensed (50%)</p>
            <p class="font-normal">normal (100%)</p>
            <p class="font-expanded">ultra-expanded (200%)</p>
            <p class="font-semi-condensed">semi-condensed</p>
            <p class="font-ultra-condensed">ultra-condensed</p>
            <p class="font-semi-expanded">semi-expanded</p>
            <p class="font-extra-expanded">extra-expanded</p>
            </div>
      </body>
      </html>
      The above example shows the declaration of @font-face at-rule along with its descriptors, such as, font-family, src, font-style, and font-stretch.

      CSS Web Fonts - Online Font Service

      Most of the online font service is subscription-based, that generally stores and serves font that you can use. Google Fonts is a free service and easy to use. Refer the following steps to use Google Fonts:
      • Go to Google Fonts.
      • Search for your desired fonts or use the filters provided to look for your choice of fonts and then select a couple of fonts.
      • You can select a font family, by clicking the (+) plus button alongside the font name.
      • After choosing the font family, press the View your selected families button.
      • Copy the line of HTML code shown on the resulting screen and paste it in your html code, under the <head> tag. Place it above the <link> element, so that the desired font is imported before you use it in your CSS.
      • In order to apply the custom fonts to your HTML, copy the CSS declarations listed in your CSS.

      CSS Web Fonts - Import Font

      Following example demonstrates the importing of a google font in the html code and using it.
      <html>
      <head>
         <link href='https://fonts.googleapis.com/css?family=Lobster|Raleway' rel='stylesheet' type='text/css'>
      <style>
         html {
            font-size: 12px;
            margin: 0;
            font-family: sans-serif;
         }
      
         body {
            width: 80%;
            max-width: 600px;
            margin: 0 auto;
         }
      
         h1 {
            font-size: 4.2rem;
         }
      
         h2 {
            font-size: 3.5rem;
         }
      
         h1, h2 {
            font-family: 'Lobster', cursive;
         }
      
         p {
            font-size: 1.4rem;
            line-height: 1.6;
            font-family: 'monospace', sans-serif;
         }
      </style>
      </head>
      <body>
         <h1>Web Font</h1>
         <h2>Google Font</h2>
         <p>Using the Google Font (Lobster) by importing it.</p>
      </body>
      </html>