സിഎസ്എസ് ഫോണ്ട് ഫേസ്: ഗ്ലോബൽ വെബ് ഡിസൈനിനായി കസ്റ്റം ഫോണ്ട് ലോഡിംഗും ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങളും

വെബ്സൈറ്റ് ഡിസൈനിൽ ടൈപ്പോഗ്രാഫി ഒരു നിർണായക പങ്ക് വഹിക്കുന്നു, ഇത് ഉപയോക്തൃ അനുഭവം രൂപപ്പെടുത്തുകയും നിങ്ങളുടെ ബ്രാൻഡിന്റെ ഐഡന്റിറ്റി അറിയിക്കുകയും ചെയ്യുന്നു. സിഎസ്എസ്-ലെ @font-face നിയമം ഡെവലപ്പർമാരെ അവരുടെ വെബ്സൈറ്റുകളിലേക്ക് നേരിട്ട് കസ്റ്റം ഫോണ്ടുകൾ ഉൾച്ചേർക്കാൻ സഹായിക്കുന്നു, ഇത് ടെക്സ്റ്റിന്റെ ദൃശ്യപരമായ അവതരണത്തിൽ കൂടുതൽ നിയന്ത്രണം നൽകുകയും അതുല്യവും ആകർഷകവുമായ ഉപയോക്തൃ അനുഭവം സാധ്യമാക്കുകയും ചെയ്യുന്നു. എന്നിരുന്നാലും, തെറ്റായ രീതിയിലുള്ള ഉപയോഗം വെബ്സൈറ്റിന്റെ പ്രകടനത്തെ ബാധിക്കുകയും ലോഡിംഗ് സമയം വർദ്ധിപ്പിക്കുകയും ഉപയോക്താക്കളുടെ സംതൃപ്തിയെ പ്രതികൂലമായി ബാധിക്കുകയും ചെയ്യും, പ്രത്യേകിച്ചും വേഗത കുറഞ്ഞ ഇന്റർനെറ്റ് കണക്ഷനുകളുള്ള പ്രദേശങ്ങളിലെ ഉപയോക്താക്കൾക്ക്.

ഈ സമഗ്രമായ ഗൈഡ് @font-face-ന്റെ സങ്കീർണ്ണതകൾ പര്യവേക്ഷണം ചെയ്യുന്നു, കസ്റ്റം ഫോണ്ട് ലോഡിംഗിനുള്ള മികച്ച രീതികളും ആഗോള ഉപയോക്താക്കൾക്ക് സുഗമവും മികച്ച പ്രകടനവുമുള്ള അനുഭവം ഉറപ്പാക്കുന്നതിനുള്ള ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങളും ഇതിൽ ഉൾക്കൊള്ളുന്നു. വെബ് ടൈപ്പോഗ്രാഫിയിൽ വൈദഗ്ദ്ധ്യം നേടാൻ നിങ്ങളെ സഹായിക്കുന്നതിന് വിവിധ ഫോണ്ട് ഫോർമാറ്റുകൾ, ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ, നൂതന ഫീച്ചറുകൾ എന്നിവയെക്കുറിച്ച് നമ്മൾ വിശദമായി ചർച്ചചെയ്യും.

@font-face നിയമം മനസ്സിലാക്കാം

നിങ്ങളുടെ വെബ്സൈറ്റിൽ ഡൗൺലോഡ് ചെയ്യാനും ഉപയോഗിക്കാനും കഴിയുന്ന കസ്റ്റം ഫോണ്ട് ഫയലുകൾ വ്യക്തമാക്കാൻ അനുവദിക്കുന്ന ശക്തമായ ഒരു സിഎസ്എസ് അറ്റ്-റൂൾ ആണ് @font-face. സിസ്റ്റം ഫോണ്ടുകളുടെ പരിമിതമായ ശേഖരവും കസ്റ്റം ടൈപ്പോഗ്രാഫിയുടെ വിശാലമായ ലോകവും തമ്മിലുള്ള വിടവ് ഇത് നികത്തുന്നു.

അടിസ്ഥാന ഘടന ഇതാ:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

ഘടകങ്ങൾ വിശദമായി പരിശോധിക്കാം:

• font-family: നിങ്ങളുടെ സിഎസ്എസ് നിയമങ്ങളിൽ കസ്റ്റം ഫോണ്ടിനെ പരാമർശിക്കാൻ ഉപയോഗിക്കുന്ന പേര് ഈ പ്രോപ്പർട്ടി നിർവചിക്കുന്നു. വിവരണാത്മകവും അതുല്യവുമായ ഒരു പേര് തിരഞ്ഞെടുക്കുക.
• src: ഫോണ്ട് ഫയലുകളുടെ സ്ഥാനം ഈ പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു. നിങ്ങൾക്ക് ഒന്നിലധികം ഉറവിടങ്ങൾ നൽകാൻ കഴിയും, ഇത് ബ്രൗസറിന് അതിന്റെ കഴിവുകൾക്കനുസരിച്ച് ഏറ്റവും അനുയോജ്യമായ ഫോർമാറ്റ് തിരഞ്ഞെടുക്കാൻ അനുവദിക്കുന്നു. format() ഫംഗ്ഷൻ ഓരോ ഫയലിന്റെയും ഫോണ്ട് ഫോർമാറ്റിനെ സൂചിപ്പിക്കുന്നു.
• font-weight: ഫോണ്ടിന്റെ കനം (boldness) ഈ പ്രോപ്പർട്ടി നിർവചിക്കുന്നു. normal, bold, lighter, bolder, കൂടാതെ 100, 400, 700 പോലുള്ള സംഖ്യാ മൂല്യങ്ങളും സാധാരണയായി ഉപയോഗിക്കുന്നു.
• font-style: ഫോണ്ടിന്റെ ശൈലി (ഉദാഹരണത്തിന്, normal, italic, oblique) ഈ പ്രോപ്പർട്ടി നിർവചിക്കുന്നു.

നിർവചിച്ചുകഴിഞ്ഞാൽ, നിങ്ങളുടെ സിഎസ്എസ് നിയമങ്ങളിൽ കസ്റ്റം ഫോണ്ട് ഇതുപോലെ ഉപയോഗിക്കാം:

            body {
  font-family: 'MyCustomFont', sans-serif;
}
            

              
                Copy
              
            
          

ഇത് നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ മുഴുവൻ ബോഡിയിലും 'MyCustomFont' പ്രയോഗിക്കും. കസ്റ്റം ഫോണ്ട് ലോഡ് ചെയ്യുന്നതിൽ പരാജയപ്പെട്ടാൽ ഉപയോഗിക്കുന്ന ഒരു ഫാൾബാക്ക് ഫോണ്ടാണ് sans-serif.

ശരിയായ ഫോണ്ട് ഫോർമാറ്റുകൾ തിരഞ്ഞെടുക്കൽ: ഒരു ആഗോള കാഴ്ചപ്പാട്

വ്യത്യസ്ത ബ്രൗസറുകൾ വ്യത്യസ്ത ഫോണ്ട് ഫോർമാറ്റുകളെ പിന്തുണയ്ക്കുന്നു. വിപുലമായ അനുയോജ്യത ഉറപ്പാക്കാൻ, നിങ്ങളുടെ ഫോണ്ടുകൾ ഒന്നിലധികം ഫോർമാറ്റുകളിൽ നൽകേണ്ടത് അത്യാവശ്യമാണ്. സാധാരണ ഫോണ്ട് ഫോർമാറ്റുകളുടെയും അവയുടെ ബ്രൗസർ പിന്തുണയുടെയും ഒരു വിവരണം താഴെ നൽകുന്നു:

• WOFF2 (Web Open Font Format 2): ഏറ്റവും ആധുനികവും വളരെ ശുപാർശ ചെയ്യപ്പെടുന്നതുമായ ഫോർമാറ്റാണിത്, മികച്ച കംപ്രഷനും പ്രകടനവും നൽകുന്നു. എല്ലാ ആധുനിക ബ്രൗസറുകളും ഇത് പിന്തുണയ്ക്കുന്നു.
• WOFF (Web Open Font Format): വ്യാപകമായി പിന്തുണയ്‌ക്കുന്നതും നല്ല കംപ്രഷൻ നൽകുന്നതുമായ ഒരു ഫോർമാറ്റാണിത്. പഴയ ബ്രൗസറുകൾക്ക് ഇപ്പോഴും പ്രസക്തമാണ്.
• EOT (Embedded Open Type): ഇന്റർനെറ്റ് എക്സ്പ്ലോററിനായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്തത്. വളരെ പഴയ ഐഇ പതിപ്പുകളെ പിന്തുണയ്‌ക്കേണ്ട ആവശ്യമില്ലെങ്കിൽ സാധാരണയായി ഇപ്പോൾ ഇതിന്റെ ആവശ്യമില്ല.
• TTF (TrueType Font) / OTF (OpenType Font): സാധാരണയായി വലുപ്പം കൂടിയതും വെബ് ഉപയോഗത്തിന് അത്ര ഒപ്റ്റിമൈസ് ചെയ്യാത്തതുമായ പഴയ ഫോർമാറ്റുകൾ. സാധ്യമെങ്കിൽ ഇവ നേരിട്ട് ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക.
• SVG Fonts: ബ്രൗസർ പിന്തുണയും മറ്റ് പരിമിതികളും കാരണം ഇന്ന് അധികം ഉപയോഗിക്കാത്ത ഒരു പഴയ ഫോർമാറ്റാണിത്.

ശുപാർശ: നിങ്ങളുടെ പ്രാഥമിക ഫോർമാറ്റായി WOFF2 ഉപയോഗിക്കുക, പഴയ ബ്രൗസറുകൾക്കായി WOFF ഒരു ഫാൾബാക്ക് ആയി നൽകുക. ഇന്റർനെറ്റ് എക്സ്പ്ലോററിന്റെ വളരെ പഴയ പതിപ്പുകളെ പിന്തുണയ്‌ക്കേണ്ടതുണ്ടെങ്കിൽ മാത്രം EOT പരിഗണിക്കുക.

നിങ്ങളുടെ @font-face നിയമത്തിൽ ഒന്നിലധികം ഫോണ്ട് ഫോർമാറ്റുകൾ നൽകുന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff'),
       url('mycustomfont.eot') format('embedded-opentype'); /* For older IE */
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

ഫോണ്ട് ലോഡിംഗ് തന്ത്രങ്ങൾ: വേഗതയ്ക്കും ഉപയോക്തൃ അനുഭവത്തിനും വേണ്ടി ഒപ്റ്റിമൈസ് ചെയ്യുക

നിങ്ങൾ ഫോണ്ടുകൾ ലോഡ് ചെയ്യുന്ന രീതി നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ പ്രകടനത്തെ കാര്യമായി സ്വാധീനിക്കും. നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ കഴിയുന്ന നിരവധി ഫോണ്ട് ലോഡിംഗ് തന്ത്രങ്ങൾ താഴെ നൽകുന്നു:

1. അടിസ്ഥാന ഫോണ്ട് ലോഡിംഗ് (ഡിഫോൾട്ട് സ്വഭാവം)

ഡിഫോൾട്ടായി, ഫോണ്ട് ഡൗൺലോഡ് ചെയ്യുന്നതുവരെ ബ്രൗസറുകൾ സാധാരണയായി ടെക്സ്റ്റിന്റെ റെൻഡറിംഗ് തടയും. ഇത് പ്രകടനത്തിൽ ഒരു തടസ്സമായി തോന്നാം, ഉപയോക്താക്കൾക്ക് ഒരു ചെറിയ സമയത്തേക്ക് ശൂന്യമായ സ്ക്രീനോ അദൃശ്യമായ ടെക്സ്റ്റോ കാണാൻ കഴിയും (ഇതിനെ "ഫ്ലാഷ് ഓഫ് ഇൻവിസിബിൾ ടെക്സ്റ്റ്" അഥവാ FOIT എന്ന് പറയുന്നു).

നടപ്പിലാക്കാൻ ലളിതമാണെങ്കിലും, മികച്ച ഉപയോക്തൃ അനുഭവത്തിന് ഈ സമീപനം സാധാരണയായി ശുപാർശ ചെയ്യുന്നില്ല.

2. font-display പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നത്

font-display പ്രോപ്പർട്ടി ഫോണ്ടുകൾ എങ്ങനെ ലോഡ് ചെയ്യുകയും പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു എന്നതിൽ കൂടുതൽ നിയന്ത്രണം നൽകുന്നു. ഫോണ്ട് ലോഡിംഗ് പ്രക്രിയയിലെ സ്വഭാവം ഇഷ്ടാനുസൃതമാക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് സുഗമമായ അനുഭവം നൽകുന്നു. മിക്ക സാഹചര്യങ്ങളിലും ഇതാണ് ശുപാർശ ചെയ്യപ്പെടുന്ന സമീപനം.

font-display-യുടെ സാധ്യമായ മൂല്യങ്ങൾ താഴെ നൽകുന്നു:

• auto: ബ്രൗസർ അതിന്റെ ഡിഫോൾട്ട് ഫോണ്ട് ലോഡിംഗ് തന്ത്രം ഉപയോഗിക്കുന്നു (സാധാരണയായി FOIT).
• block: ഫോണ്ടിന് ഒരു ചെറിയ ബ്ലോക്ക് കാലയളവും അനന്തമായ സ്വാപ്പ് കാലയളവും നൽകുന്നു. ബ്രൗസർ ആദ്യം ടെക്സ്റ്റ് മറയ്ക്കുകയും ഫോണ്ട് ലോഡ് ചെയ്യുമ്പോൾ അത് പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു. ഒരു ചെറിയ സമയത്തിനുള്ളിൽ (സാധാരണയായി 3 സെക്കൻഡ്) ഫോണ്ട് ലോഡ് ചെയ്തില്ലെങ്കിൽ, ഫാൾബാക്ക് ഫോണ്ട് പ്രദർശിപ്പിക്കും.
• swap: ഫോണ്ടിന് പൂജ്യം ബ്ലോക്ക് കാലയളവും അനന്തമായ സ്വാപ്പ് കാലയളവും നൽകുന്നു. ബ്രൗസർ ഉടൻ തന്നെ ഒരു ഫാൾബാക്ക് ഫോണ്ട് ഉപയോഗിച്ച് ടെക്സ്റ്റ് പ്രദർശിപ്പിക്കുന്നു. കസ്റ്റം ഫോണ്ട് ലോഡ് ചെയ്തുകഴിഞ്ഞാൽ, ടെക്സ്റ്റ് കസ്റ്റം ഫോണ്ടിലേക്ക് മാറ്റുന്നു. ഇത് FOIT ഒഴിവാക്കുന്നു, പക്ഷേ "ഫ്ലാഷ് ഓഫ് അൺസ്റ്റൈൽഡ് ടെക്സ്റ്റ്" (FOUT) ഉണ്ടാകാൻ കാരണമായേക്കാം.
• fallback: ഫോണ്ടിന് വളരെ ചെറിയ ബ്ലോക്ക് കാലയളവും ഒരു ചെറിയ സ്വാപ്പ് കാലയളവും നൽകുന്നു. ഇത് block-നും swap-നും ഇടയിലുള്ള ഒരു ഒത്തുതീർപ്പാണ്. ബ്രൗസർ വളരെ കുറഞ്ഞ സമയത്തേക്ക് ടെക്സ്റ്റ് മറയ്ക്കുകയും, കസ്റ്റം ഫോണ്ട് ലോഡ് ചെയ്തില്ലെങ്കിൽ ഫാൾബാക്ക് ഫോണ്ടിലേക്ക് മാറുകയും ചെയ്യുന്നു. കുറഞ്ഞ സമയത്തേക്ക് ഇത് ഫോണ്ടുകൾ മാറ്റുന്നത് തുടരും, അതിനുശേഷം അത് നിർത്തി ഫാൾബാക്ക് ഫോണ്ട് മാത്രം ഉപയോഗിക്കും.
• optional: ഫോണ്ടിന് വളരെ ചെറിയ ബ്ലോക്ക് കാലയളവും സ്വാപ്പ് കാലയളവും ഇല്ലാതെ നൽകുന്നു. പേജിന്റെ പ്രാരംഭ റെൻഡറിംഗിന് അത്ര പ്രാധാന്യമില്ലാത്ത ഫോണ്ടുകൾക്ക് (ഉദാഹരണത്തിന്, അത്യാവശ്യമല്ലാത്ത യുഐ ഘടകങ്ങളിൽ ഉപയോഗിക്കുന്ന ഫോണ്ടുകൾ) ഇത് ഉപയോഗപ്രദമാണ്.

ശുപാർശകൾ:

• മിക്ക സാഹചര്യങ്ങളിലും, swap പ്രകടമായ പ്രകടനവും ദൃശ്യ സ്ഥിരതയും തമ്മിലുള്ള മികച്ച സന്തുലിതാവസ്ഥ നൽകുന്നു. ഉപയോക്താക്കൾക്ക് ഉടൻ തന്നെ ടെക്സ്റ്റ് കാണാൻ കഴിയും, അത് തുടക്കത്തിൽ ഒരു ഫാൾബാക്ക് ഫോണ്ട് ഉപയോഗിച്ചാണെങ്കിലും.
• FOUT കുറയ്ക്കണമെന്നുണ്ടെങ്കിൽ, എന്നാൽ കസ്റ്റം ഫോണ്ടിന് മുൻഗണന നൽകണമെങ്കിൽ fallback ഉപയോഗിക്കുക.
• പേജ് റെൻഡറിംഗിന്റെ അനാവശ്യമായ തടസ്സം ഒഴിവാക്കാൻ പ്രാധാന്യമില്ലാത്ത ഫോണ്ടുകൾക്ക് optional ഉപയോഗിക്കുക.

font-display: swap ഉപയോഗിക്കുന്നതിന്റെ ഉദാഹരണം:

            @font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
            

              
                Copy
              
            
          

3. ഫോണ്ടുകൾ പ്രീലോഡ് ചെയ്യുക

ഫോണ്ടുകൾ പ്രീലോഡ് ചെയ്യുന്നത് എത്രയും പെട്ടെന്ന് ഫോണ്ട് ഫയലുകൾ ഡൗൺലോഡ് ചെയ്യാൻ ബ്രൗസറിനോട് നിർദ്ദേശിക്കുന്നതിലൂടെ പ്രകടനം മെച്ചപ്പെടുത്താൻ സഹായിക്കും. ഇത് ഫോണ്ട് ലോഡിംഗുമായി ബന്ധപ്പെട്ട കാലതാമസം കുറയ്ക്കുകയും, വേഗതയേറിയ ലോഡിംഗ് സമയമായി അനുഭവപ്പെടുകയും ചെയ്യും.

ഫോണ്ടുകൾ പ്രീലോഡ് ചെയ്യുന്നതിനായി നിങ്ങളുടെ HTML ഡോക്യുമെന്റിന്റെ <head>-ൽ <link rel="preload"> ടാഗ് ഉപയോഗിക്കുക:

            <link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
            

              
                Copy
              
            
          

വിശദീകരണം:

• rel="preload": റിസോഴ്സ് പ്രീലോഡ് ചെയ്യണമെന്ന് വ്യക്തമാക്കുന്നു.
• href: ഫോണ്ട് ഫയലിന്റെ URL വ്യക്തമാക്കുന്നു.
• as="font": പ്രീലോഡ് ചെയ്യുന്ന റിസോഴ്സിന്റെ തരം വ്യക്തമാക്കുന്നു (ഇവിടെ, ഒരു ഫോണ്ട്).
• type="font/woff2": ഫോണ്ട് ഫയലിന്റെ MIME തരം വ്യക്തമാക്കുന്നു.
• crossorigin: ഫോണ്ട് മറ്റൊരു ഉറവിടത്തിൽ നിന്ന് (ഉദാഹരണത്തിന്, ഒരു CDN) ലോഡ് ചെയ്യുകയാണെങ്കിൽ ഇത് ആവശ്യമാണ്.

ശ്രദ്ധിക്കുക: വളരെയധികം റിസോഴ്‌സുകൾ പ്രീലോഡ് ചെയ്യുന്നത് പ്രകടനത്തെ പ്രതികൂലമായി ബാധിക്കും. പേജിന്റെ പ്രാരംഭ റെൻഡറിംഗിന് അത്യാവശ്യമായ ഫോണ്ടുകൾ മാത്രം പ്രീലോഡ് ചെയ്യുക.

4. ഫോണ്ട് ലോഡിംഗ് എപിഐ (അഡ്വാൻസ്ഡ്)

ഫോണ്ട് ലോഡിംഗ് എപിഐ ഫോണ്ട് ലോഡിംഗിൽ കൂടുതൽ സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുന്നു. ഒരു ഫോണ്ട് എപ്പോൾ ലോഡ് ചെയ്തു എന്ന് കണ്ടെത്താനും, ലോഡിംഗ് പുരോഗതി ട്രാക്ക് ചെയ്യാനും, പിശകുകൾ കൈകാര്യം ചെയ്യാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. കൂടുതൽ സങ്കീർണ്ണമായ ഫോണ്ട് ലോഡിംഗ് തന്ത്രങ്ങൾ നടപ്പിലാക്കാൻ ഇത് ഉപയോഗപ്രദമാകും.

ഉദാഹരണം (ജാവാസ്ക്രിപ്റ്റ്):

            document.fonts.load('1em MyCustomFont').then(function() {
  // Font has loaded successfully
  console.log('MyCustomFont loaded!');
});
            

              
                Copy
              
            
          

ഫോണ്ട് ലോഡിംഗ് എപിഐ font-display പ്രോപ്പർട്ടിയേക്കാൾ ഉപയോഗിക്കാൻ സങ്കീർണ്ണമാണ്, പക്ഷേ ഇത് നൂതന ഉപയോഗങ്ങൾക്ക് കൂടുതൽ വഴക്കം നൽകുന്നു.

ഫോണ്ട് ഫയലുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക: വലുപ്പം കുറയ്ക്കുകയും പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുക

വെബ്സൈറ്റ് പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനും ലോഡിംഗ് സമയം കുറയ്ക്കുന്നതിനും നിങ്ങളുടെ ഫോണ്ട് ഫയലുകൾ ഒപ്റ്റിമൈസ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. നിങ്ങൾക്ക് ഉപയോഗിക്കാൻ കഴിയുന്ന നിരവധി ടെക്നിക്കുകൾ താഴെ നൽകുന്നു:

1. ഫോണ്ട് സബ്സെറ്റിംഗ്

മിക്ക ഫോണ്ടുകളിലും ധാരാളം ഗ്ലിഫുകൾ (അക്ഷരങ്ങൾ) അടങ്ങിയിരിക്കുന്നു, അവയിൽ പലതും നിങ്ങളുടെ വെബ്സൈറ്റിൽ ഉപയോഗിക്കണമെന്നില്ല. ഫോണ്ട് സബ്സെറ്റിംഗ് എന്നാൽ ഉപയോഗിക്കാത്ത ഗ്ലിഫുകൾ ഫോണ്ട് ഫയലിൽ നിന്ന് നീക്കം ചെയ്യുക എന്നതാണ്, ഇത് അതിന്റെ വലുപ്പം ഗണ്യമായി കുറയ്ക്കുന്നു. ഒന്നിലധികം ഭാഷകളെ പിന്തുണയ്ക്കുമ്പോൾ ഇത് വളരെ പ്രധാനമാണ്, കാരണം ഒരു പ്രത്യേക പ്രദേശത്ത് ഉപയോഗിക്കാത്ത അക്ഷരങ്ങളുടെ ഗ്ലിഫുകൾ ഫോണ്ടുകളിൽ അടങ്ങിയിരിക്കാം.

പ്രയോജനങ്ങൾ:

• ചെറിയ ഫോണ്ട് ഫയൽ വലുപ്പം
• വേഗതയേറിയ ഡൗൺലോഡ് സമയം
• മെച്ചപ്പെട്ട വെബ്സൈറ്റ് പ്രകടനം

ഫോണ്ട് സബ്സെറ്റിംഗിനുള്ള ടൂളുകൾ:

• FontForge (ഓപ്പൺ സോഴ്സ്): ഫോണ്ടുകൾ നേരിട്ട് സബ്സെറ്റ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്ന ശക്തമായ ഒരു ഡെസ്ക്ടോപ്പ് ഫോണ്ട് എഡിറ്റർ.
• Glyphhanger (കമാൻഡ് ലൈൻ): ഉപയോഗിക്കാത്ത ഗ്ലിഫുകൾ തിരിച്ചറിഞ്ഞ് സബ്സെറ്റുകൾ സൃഷ്ടിക്കുന്ന ഒരു കമാൻഡ്-ലൈൻ ടൂൾ.
• ഓൺലൈൻ ഫോണ്ട് സബ്സെറ്റിംഗ് ടൂളുകൾ: ഫോണ്ടുകൾ സബ്സെറ്റ് ചെയ്യുന്നതിന് നിരവധി ഓൺലൈൻ ടൂളുകൾ ലഭ്യമാണ്, ഉദാഹരണത്തിന് Font Squirrel's Webfont Generator.

യൂണിക്കോഡ്-റേഞ്ച്

ബഹുഭാഷാ സൈറ്റുകൾക്കായി, ഫോണ്ട് ഏത് യൂണിക്കോഡ് അക്ഷര ശ്രേണിയിലാണ് ഉപയോഗിക്കേണ്ടതെന്ന് വ്യക്തമാക്കാൻ unicode-range സിഎസ്എസ് ഡിസ്ക്രിപ്റ്റർ ഉപയോഗിക്കാം. ഇത് ഫോണ്ടിന്റെ ആവശ്യമായ ഭാഗങ്ങൾ മാത്രം ഡൗൺലോഡ് ചെയ്യാൻ ബ്രൗസറിനെ പ്രാപ്തമാക്കുന്നു, ഇത് പ്രകടനം മെച്ചപ്പെടുത്തുന്നു. ചൈനീസ്, ജാപ്പനീസ്, കൊറിയൻ (CJK) പോലുള്ള വലിയ അക്ഷരങ്ങളുള്ള ഭാഷകൾ കൈകാര്യം ചെയ്യുമ്പോൾ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

            @font-face {
  font-family: 'NotoSansCJK';
  src: url('NotoSansCJK-Regular.woff2') format('woff2');
  unicode-range: U+4E00-9FFF, /* Common CJK Unified Ideographs */
                 U+3040-309F, /* Hiragana */
                 U+30A0-30FF;  /* Katakana */
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

2. കംപ്രഷൻ

നിങ്ങളുടെ ഫോണ്ട് ഫയലുകൾ Gzip അല്ലെങ്കിൽ Brotli ഉപയോഗിച്ച് ശരിയായി കംപ്രസ് ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. മിക്ക വെബ് സെർവറുകളും ഈ കംപ്രഷൻ അൽഗോരിതങ്ങളെ പിന്തുണയ്ക്കുന്നു, ഇത് കൈമാറ്റ സമയത്ത് ഫോണ്ട് ഫയലുകളുടെ വലുപ്പം ഗണ്യമായി കുറയ്ക്കാൻ സഹായിക്കും.

പ്രയോജനങ്ങൾ:

• കൈമാറ്റ സമയത്ത് ചെറിയ ഫയൽ വലുപ്പം
• വേഗതയേറിയ ഡൗൺലോഡ് സമയം

3. എസ്വിജി ഫോണ്ടുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക

നിങ്ങൾ എസ്വിജി ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നുണ്ടെങ്കിൽ (സാധാരണയായി ശുപാർശ ചെയ്യുന്നില്ലെങ്കിലും), അനാവശ്യ മെറ്റാഡാറ്റ നീക്കം ചെയ്യാനും ഫയൽ വലുപ്പം കുറയ്ക്കാനും SVGO (SVG Optimizer) പോലുള്ള ടൂളുകൾ ഉപയോഗിച്ച് എസ്വിജി ഫയലുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക.

4. വേരിയബിൾ ഫോണ്ടുകൾ

വേരിയബിൾ ഫോണ്ടുകൾ താരതമ്യേന പുതിയൊരു ഫോണ്ട് സാങ്കേതികവിദ്യയാണ്, ഇത് ഒരൊറ്റ ഫോണ്ട് ഫയലിൽ ഒരു ടൈപ്പ്ഫേസിന്റെ ഒന്നിലധികം വ്യതിയാനങ്ങൾ, അതായത് വ്യത്യസ്ത കനം, വീതി, ശൈലികൾ എന്നിവ ഉൾക്കൊള്ളാൻ അനുവദിക്കുന്നു. ഓരോ വ്യതിയാനത്തിനും പ്രത്യേക ഫോണ്ട് ഫയലുകൾ ഉപയോഗിക്കുന്നതിനെ അപേക്ഷിച്ച് ഇത് മൊത്തത്തിലുള്ള ഫയൽ വലുപ്പം ഗണ്യമായി കുറയ്ക്കാൻ സഹായിക്കും.

പ്രയോജനങ്ങൾ:

• ഒന്നിലധികം വ്യതിയാനങ്ങൾ ഉപയോഗിക്കുമ്പോൾ പരമ്പരാഗത ഫോണ്ട് ഫോർമാറ്റുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ചെറിയ ഫയൽ വലുപ്പങ്ങൾ
• കൂടുതൽ ഡിസൈൻ വഴക്കം

5. കാഷിംഗ്

ഫോണ്ട് ഫയലുകൾ ശരിയായി കാഷെ ചെയ്യാൻ നിങ്ങളുടെ വെബ് സെർവർ കോൺഫിഗർ ചെയ്യുക. ഇത് ബ്രൗസറുകളെ ഫോണ്ട് ഫയലുകൾ പ്രാദേശികമായി സംഭരിക്കാൻ അനുവദിക്കുന്നു, തുടർന്നുള്ള സന്ദർശനങ്ങളിൽ അവ വീണ്ടും ഡൗൺലോഡ് ചെയ്യേണ്ടതിന്റെ ആവശ്യകത കുറയ്ക്കുന്നു.

പ്രയോജനങ്ങൾ:

• തിരിച്ചുവരുന്ന സന്ദർശകർക്ക് വേഗതയേറിയ ലോഡിംഗ് സമയം
• സെർവർ ലോഡ് കുറയ്ക്കുന്നു

പ്രവേശനക്ഷമത പരിഗണനകൾ

കസ്റ്റം ഫോണ്ടുകൾ ഉപയോഗിക്കുമ്പോൾ, വികലാംഗർ ഉൾപ്പെടെ എല്ലാവർക്കും നിങ്ങളുടെ വെബ്സൈറ്റ് ഉപയോഗയോഗ്യമാണെന്ന് ഉറപ്പാക്കാൻ പ്രവേശനക്ഷമത പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്.

1. മതിയായ കോൺട്രാസ്റ്റ്

ടെക്സ്റ്റ് നിറം പശ്ചാത്തല നിറവുമായി WCAG (വെബ് കണ്ടന്റ് അക്സസിബിലിറ്റി ഗൈഡ്‌ലൈൻസ്) മാനദണ്ഡങ്ങൾ പാലിക്കുന്നതിന് മതിയായ കോൺട്രാസ്റ്റ് നൽകുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. കോൺട്രാസ്റ്റ് അനുപാതം പര്യാപ്തമാണോ എന്ന് പരിശോധിക്കാൻ ഒരു കോൺട്രാസ്റ്റ് ചെക്കർ ടൂൾ ഉപയോഗിക്കുക.

2. വായിക്കാവുന്ന ഫോണ്ട് വലുപ്പം

പ്രത്യേകിച്ച് കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾക്ക് എളുപ്പത്തിൽ വായിക്കാൻ കഴിയുന്നത്ര വലിയ ഫോണ്ട് വലുപ്പം ഉപയോഗിക്കുക. അമിതമായി ചെറിയ ഫോണ്ട് വലുപ്പങ്ങൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക.

3. ഫോണ്ടിന്റെ കനം

എളുപ്പത്തിൽ വായിക്കാൻ കഴിയുന്ന ഒരു ഫോണ്ട് കനം തിരഞ്ഞെടുക്കുക. അമിതമായി കനം കുറഞ്ഞ ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക, കാരണം അവ ചില ഉപയോക്താക്കൾക്ക് വായിക്കാൻ പ്രയാസമുണ്ടാക്കും.

4. ഫാൾബാക്ക് ഫോണ്ടുകൾ

കസ്റ്റം ഫോണ്ട് ലോഡ് ചെയ്യുന്നതിൽ പരാജയപ്പെട്ടാലും ടെക്സ്റ്റ് വായിക്കാൻ കഴിയുമെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ സിഎസ്എസ് നിയമങ്ങളിൽ അനുയോജ്യമായ ഫാൾബാക്ക് ഫോണ്ടുകൾ നൽകുക. കസ്റ്റം ഫോണ്ടിന് സമാനമായ ശൈലിയും രൂപവുമുള്ള ഫാൾബാക്ക് ഫോണ്ടുകൾ തിരഞ്ഞെടുക്കുക.

5. ടെക്സ്റ്റ് റീസൈസിംഗ്

ബ്രൗസർ സൂം അല്ലെങ്കിൽ മറ്റ് പ്രവേശനക്ഷമത ടൂളുകൾ ഉപയോഗിച്ച് ഉപയോക്താക്കൾക്ക് നിങ്ങളുടെ വെബ്സൈറ്റിലെ ടെക്സ്റ്റ് എളുപ്പത്തിൽ വലുതാക്കാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക. ഫോണ്ട് വലുപ്പങ്ങൾക്കായി നിശ്ചിത വലുപ്പത്തിലുള്ള യൂണിറ്റുകൾ (ഉദാ. പിക്സലുകൾ) ഉപയോഗിക്കുന്നത് ഒഴിവാക്കുക. പകരം ആപേക്ഷിക യൂണിറ്റുകൾ (ഉദാ. em, rem) ഉപയോഗിക്കുക.

6. ഭാഷാ ആട്രിബ്യൂട്ടുകൾ

പേജിന്റെ ഭാഷ സൂചിപ്പിക്കുന്നതിന് <html> ടാഗിൽ lang ആട്രിബ്യൂട്ട് ശരിയായി സജ്ജമാക്കുക. ഇത് സ്ക്രീൻ റീഡറുകളെയും മറ്റ് സഹായ സാങ്കേതികവിദ്യകളെയും ടെക്സ്റ്റ് ശരിയായി റെൻഡർ ചെയ്യാൻ സഹായിക്കുന്നു.

ഉദാഹരണം:

            <html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <p>This is some text in English.</p>
  </body>
</html>
            

              
                Copy
              
            
          

ക്രോസ്-ബ്രൗസർ അനുയോജ്യത

നിങ്ങളുടെ കസ്റ്റം ഫോണ്ടുകൾ വിപുലമായ ബ്രൗസറുകളുമായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. അനുയോജ്യത പ്രശ്നങ്ങൾ തിരിച്ചറിയാൻ നിങ്ങളുടെ വെബ്സൈറ്റ് വിവിധ ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും പരീക്ഷിക്കുക. ബ്രൗസർസ്റ്റാക്ക് അല്ലെങ്കിൽ സോസ് ലാബ്സ് പോലുള്ള ടൂളുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ വെബ്സൈറ്റ് വിവിധ ബ്രൗസറുകളിലും ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങളിലും പരീക്ഷിക്കുക.

വിവിധ ബ്രൗസറുകളിലുടനീളം ഡിഫോൾട്ട് സ്റ്റൈലുകൾ സാധാരണ നിലയിലാക്കാൻ ഒരു സിഎസ്എസ് റീസെറ്റ് സ്റ്റൈൽഷീറ്റ് (ഉദാ. Normalize.css) ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ഒഴിവാക്കേണ്ട സാധാരണ തെറ്റുകൾ

• വളരെയധികം കസ്റ്റം ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നത്: വളരെയധികം കസ്റ്റം ഫോണ്ടുകൾ ഉപയോഗിക്കുന്നത് പ്രകടനത്തെ പ്രതികൂലമായി ബാധിക്കുകയും കാഴ്ചയിൽ അലങ്കോലമുണ്ടാക്കുകയും ചെയ്യും. നിങ്ങളുടെ വെബ്സൈറ്റിൽ ഉപയോഗിക്കുന്ന കസ്റ്റം ഫോണ്ടുകളുടെ എണ്ണം രണ്ടോ മൂന്നോ ആയി പരിമിതപ്പെടുത്തുക.
• വലിയ ഫോണ്ട് ഫയലുകൾ ഉപയോഗിക്കുന്നത്: വലിയ ഫോണ്ട് ഫയലുകൾ ലോഡിംഗ് സമയം ഗണ്യമായി വർദ്ധിപ്പിക്കും. മുകളിൽ വിവരിച്ച ടെക്നിക്കുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ ഫോണ്ട് ഫയലുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുക.
• ഫാൾബാക്ക് ഫോണ്ടുകൾ നൽകാതിരിക്കുന്നത്: ഫാൾബാക്ക് ഫോണ്ടുകൾ നൽകാതിരിക്കുന്നത് കസ്റ്റം ഫോണ്ട് ലോഡ് ചെയ്യുന്നതിൽ പരാജയപ്പെട്ടാൽ അദൃശ്യമായ ടെക്സ്റ്റിന് കാരണമാകും.
• പ്രവേശനക്ഷമത പരിഗണനകൾ അവഗണിക്കുന്നത്: പ്രവേശനക്ഷമത പരിഗണനകൾ അവഗണിക്കുന്നത് നിങ്ങളുടെ വെബ്സൈറ്റ് വികലാംഗർക്ക് ഉപയോഗശൂന്യമാക്കും.
• വിവിധ ബ്രൗസറുകളിൽ പരീക്ഷിക്കാതിരിക്കുന്നത്: വിവിധ ബ്രൗസറുകളിൽ പരീക്ഷിക്കാതിരിക്കുന്നത് അനുയോജ്യത പ്രശ്നങ്ങൾക്ക് കാരണമാകും.
• ഡിസൈനറുടെ സൈറ്റിൽ നിന്നോ മറ്റ് വിശ്വസനീയമല്ലാത്ത ഉറവിടങ്ങളിൽ നിന്നോ ഫോണ്ട് ഫയലുകൾ നേരിട്ട് ഹോട്ട്‌ലിങ്ക് ചെയ്യുന്നത്: നിങ്ങളുടെ സ്വന്തം വെബ്സൈറ്റിൽ നിന്നോ, സിഡിഎൻ-ൽ നിന്നോ അല്ലെങ്കിൽ വിശ്വസനീയമായ ഫോണ്ട് സേവനത്തിൽ നിന്നോ മാത്രം ഫോണ്ടുകൾ ഹോസ്റ്റ് ചെയ്യുക.

ആഗോള വെബ് ടൈപ്പോഗ്രാഫിക്കുള്ള മികച്ച രീതികൾ

ഒരു ആഗോള പ്രേക്ഷകർക്കായി വെബ്സൈറ്റുകൾ രൂപകൽപ്പന ചെയ്യുമ്പോൾ, വെബ് ടൈപ്പോഗ്രാഫിക്കായി ഇനിപ്പറയുന്ന മികച്ച രീതികൾ പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്:

• ഒന്നിലധികം ഭാഷകളെ പിന്തുണയ്ക്കുന്ന ഫോണ്ടുകൾ തിരഞ്ഞെടുക്കുക: നിങ്ങളുടെ വെബ്സൈറ്റിൽ പിന്തുണയ്ക്കാൻ ഉദ്ദേശിക്കുന്ന ഭാഷകൾക്കുള്ള ഗ്ലിഫുകൾ ഉൾപ്പെടുന്ന ഫോണ്ടുകൾ തിരഞ്ഞെടുക്കുക.
• വിവിധ ഭാഷകൾക്ക് അനുയോജ്യമായ ഫോണ്ട് വലുപ്പങ്ങൾ ഉപയോഗിക്കുക: ഒരു ഭാഷയ്ക്ക് അനുയോജ്യമായ ഫോണ്ട് വലുപ്പങ്ങൾ മറ്റൊരു ഭാഷയ്ക്ക് അനുയോജ്യമാകണമെന്നില്ല. വിവിധ ഭാഷകളിൽ വായിക്കാൻ എളുപ്പമാകുന്നതിന് ആവശ്യാനുസരണം ഫോണ്ട് വലുപ്പങ്ങൾ ക്രമീകരിക്കുക.
• ലൈൻ ഉയരവും അക്ഷരങ്ങൾക്കിടയിലെ അകലവും പരിഗണിക്കുക: ലൈൻ ഉയരവും അക്ഷരങ്ങൾക്കിടയിലെ അകലവും വായനാക്ഷമതയെ ബാധിക്കും, പ്രത്യേകിച്ചും സങ്കീർണ്ണമായ അക്ഷരങ്ങളുള്ള ഭാഷകൾക്ക്. വായനാക്ഷമത ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിന് ഈ മൂല്യങ്ങൾ ആവശ്യാനുസരണം ക്രമീകരിക്കുക.
• അനുയോജ്യമായ ടെക്സ്റ്റ് അലൈൻമെന്റ് ഉപയോഗിക്കുക: ഭാഷയെ ആശ്രയിച്ച് അനുയോജ്യമായ ടെക്സ്റ്റ് അലൈൻമെന്റ് വ്യത്യാസപ്പെടാം. ഉദാഹരണത്തിന്, ഇടത്തുനിന്ന്-വലത്തോട്ടുള്ള ഭാഷകൾ സാധാരണയായി ഇടത് അലൈൻമെന്റ് ഉപയോഗിക്കുന്നു, അതേസമയം വലത്തുനിന്ന്-ഇടത്തോട്ടുള്ള ഭാഷകൾ സാധാരണയായി വലത് അലൈൻമെന്റ് ഉപയോഗിക്കുന്നു.
• വിവിധ ഭാഷകളിൽ നിങ്ങളുടെ വെബ്സൈറ്റ് പരീക്ഷിക്കുക: ടൈപ്പോഗ്രാഫി ശരിയായി കാണപ്പെടുന്നുണ്ടെന്നും എളുപ്പത്തിൽ വായിക്കാൻ കഴിയുന്നുണ്ടെന്നും ഉറപ്പാക്കാൻ വിവിധ ഭാഷകളിൽ നിങ്ങളുടെ വെബ്സൈറ്റ് പരീക്ഷിക്കുക.

ഉദാഹരണം: ആഗോള അക്ഷര പിന്തുണയുള്ള ഒരു ഫോണ്ട് ഉപയോഗിക്കുന്നത്

വിവിധ ഭാഷകളെയും സ്ക്രിപ്റ്റുകളെയും പിന്തുണയ്ക്കാൻ രൂപകൽപ്പന ചെയ്ത നോട്ടോ സാൻസ് പോലുള്ള ഒരു ഫോണ്ട് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. ഗൂഗിൾ നോട്ടോ സാൻസും അതിന്റെ നിരവധി വകഭേദങ്ങളും (നോട്ടോ സാൻസ് സിജെകെ, നോട്ടോ സാൻസ് അറബിക് മുതലായവ) ഒരു സൗജന്യ വെബ് ഫോണ്ടായി വാഗ്ദാനം ചെയ്യുന്നു.

ഉപസംഹാരം

സിഎസ്എസ് @font-face-ൽ വൈദഗ്ദ്ധ്യം നേടുന്നതും ഫലപ്രദമായ ഫോണ്ട് ലോഡിംഗും ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങളും നടപ്പിലാക്കുന്നതും ഒരു ആഗോള പ്രേക്ഷകർക്കായി മികച്ച പ്രകടനവും കാഴ്ചയിൽ ആകർഷകവുമായ വെബ്സൈറ്റുകൾ സൃഷ്ടിക്കുന്നതിന് നിർണായകമാണ്. ഫോണ്ട് ഫോർമാറ്റുകൾ, ലോഡിംഗ് ടെക്നിക്കുകൾ, ഒപ്റ്റിമൈസേഷൻ രീതികൾ എന്നിവയുടെ സൂക്ഷ്മതകൾ മനസ്സിലാക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് ഭൂമിശാസ്ത്രപരമായ അതിരുകളും സാംസ്കാരിക വ്യത്യാസങ്ങളും മറികടക്കുന്ന സുഗമവും ആകർഷകവുമായ ഉപയോക്തൃ അനുഭവം നൽകാൻ കഴിയും.

ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന മികച്ച രീതികൾ പാലിക്കുന്നതിലൂടെ, നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ ടൈപ്പോഗ്രാഫി അതിന്റെ മൊത്തത്തിലുള്ള ഡിസൈൻ മെച്ചപ്പെടുത്തുന്നു, അതിന്റെ പ്രകടനം മെച്ചപ്പെടുത്തുന്നു, കൂടാതെ എല്ലാ ഉപയോക്താക്കൾക്കും അവരുടെ സ്ഥാനമോ ഉപകരണമോ പരിഗണിക്കാതെ പ്രവേശനക്ഷമമായ അനുഭവം നൽകുന്നു എന്ന് ഉറപ്പാക്കാൻ കഴിയും.