Using Web Fonts

Using Web Fonts అంటే ఏమిటి?

Web Fonts అంటే visitor computer లో ముందుగా install చేయని font ను కూడా webpage లో ఉపయోగించడం. CSS లో సాధారణంగా @font-face rule ద్వారా web font ను define చేస్తాము.

@font-face ఎలా పనిచేస్తుంది?

@font-face లో మనం ఒక font family పేరు మరియు ఆ font file location ను చెబుతాము. ఆ తర్వాత font-family property ద్వారా ఆ font ను HTML text కు apply చేస్తాము.

సాధారణంగా web font files కు .woff2 format ఉపయోగిస్తారు. ఈ format చిన్న file size తో మంచి browser support ఇస్తుంది.

ముఖ్యమైన syntax

@font-face {
  font-family: "MyWebFont";
  src: url("fonts/my-web-font.woff2") format("woff2");
}

.title {
  font-family: "MyWebFont", sans-serif;
}

ఇక్కడ MyWebFont అనేది మనం ఇచ్చిన పేరు. src లో font file location ఉంటుంది. ఆ font load కాకపోతే sans-serif fallback font గా పనిచేస్తుంది.

ఈ lesson లోని runnable example

Browser editor లో external font file అవసరం లేకుండా example run కావడానికి క్రింది code లో local() source ఉపయోగించాం. ఇది computer లో ఇప్పటికే ఉన్న font ను custom web-font family పేరు ద్వారా apply చేస్తుంది. నిజమైన website లో local source స్థానంలో project లోని .woff2 file path ను ఉపయోగించవచ్చు.

Web Fonts ఎందుకు ఉపయోగిస్తారు?

• Brand design కు సరిపోయే ప్రత్యేక font ను ఉపయోగించడానికి.
• అన్ని devices లో text appearance ను దగ్గరగా ఉంచడానికి.
• Website headings మరియు content కు మంచి visual identity ఇవ్వడానికి.
• Visitor system లో ఆ font install చేయకపోయినా font file ను browser load చేయడానికి.

Simple Explanation

ఒక font మన computer లో లేకపోయినా webpage లో కనిపించాలంటే web font ఉపయోగిస్తాము. ముందుగా @font-face తో font ను పేరు పెట్టి define చేయాలి. తర్వాత ఆ పేరును font-family లో ఉపయోగించాలి.

Font load కాకపోతే text పూర్తిగా కనిపించకుండా ఉండకూడదు. అందుకే sans-serif వంటి fallback font ను చివరలో ఉంచడం మంచిది.

Real-Life Example

ఒక restaurant తన logo మరియు menu కోసం ప్రత్యేకమైన brand font ఉపయోగిస్తుందని అనుకోండి. Customer computer లో ఆ font లేకపోయినా menu అదే style లో కనిపించాలి. Restaurant ఆ font file ను website తో పాటు అందించి, CSS లో @font-face ద్వారా ఆ font ను load చేస్తుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Fonts Example</title>
  <style>
    @font-face {
      font-family: "DemoWebFont";
      src: local("Trebuchet MS"), local("Arial");
    }

    body {
      background-color: #f3f7fb;
      margin: 30px;
    }

    h1 {
      font-family: "DemoWebFont", sans-serif;
      color: #123b63;
    }

    p {
      font-family: "DemoWebFont", sans-serif;
      color: #333333;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Beautiful Web Typography</h1>
  <p>This text uses a custom font family defined with @font-face.</p>
</body>
</html>

ఒక light background పై dark blue heading మరియు gray paragraph కనిపిస్తాయి. Heading మరియు paragraph రెండూ DemoWebFont family ద్వారా apply చేసిన readable font style లో కనిపిస్తాయి.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Web Fonts</title>
  <style>
    @font-face {
      font-family: "PageFont";
      src: local("Georgia"), local("Times New Roman");
    }

    h1,
    p {
      font-family: "PageFont", serif;
    }

    h1 {
      color: #194d33;
    }
  </style>
</head>
<body>
  <h1>My Font Practice</h1>
  <p>Change the font family name or local font and test the result.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• @font-face ద్వారా custom web font ను define చేస్తాము.
• font-family లో custom font కు ఇచ్చిన exact name ను ఉపయోగించాలి.
• src property font source లేదా font file location ను సూచిస్తుంది.
• సాధారణ web font file format .woff2.
• Font load కాకపోతే sans-serif లేదా serif fallback ఇవ్వాలి.
• నిజమైన project లో font file path ను సరైన విధంగా check చేయాలి.