R.I.B.H.U. Academy^®

Font-family

There are four types of font-families, generally, used in WEB-PAGES:

<p style="font-family: monospace;"> TEXT </p>

<p style="font-family: serif;"> TEXT </p>

<p style="font-family: sans-serif;"> TEXT </p>

<p style="font-family: cursive;"> TEXT </p>

    Some Operating System, e.g. MicroSoft Windows supports some font-families, for example, "Times New Roman", whereas others, e.g. Mac (Apple) OS supports other font-families, for example, "Times", both font-families mentioned herein, are of " serif " class.

    If you want to know which font-families are installed with your operating system (OS), just open the Paint or WordPad (for example, in MS Windows OS) or other similar applications. You will see at the top TOOLBAR (just below the Menu Bar), the A or Calibri, and when you click with left-mouse-button on it, you will find a long list of NAMES of different font-families.

    "serif " class font-families have HAT and BOOT (as 'serif ' in Police Department of some countries). Names of font-families consisting of single word, are written simply without single-quotes, but when any font-family name is multiple words, then it is written within single-quotes. Consider the following letters:

<p style="font-family: times, serif;"> TEXT </p>

<p style="font-family: 'Times New Roman', serif;"> TEXT </p>

<p style="font-family: Georgia, serif;"> TEXT </p>

    "sans-serif " class font-families are without HAT and BOOT (meaning NOT 'serif ' in Police Department as mentioned above). Which of four type of font-families you want to use in your WEB-PAGES, is your choice. You should write at least three font-family names (generally used in MS-Windows, Apple-Mac, Linux OS) of same type, for a HTML element, or 'selector' (as applied in CSS). Consider the following letters:

<p style="font-family: Helvetica, sans-serif;"> TEXT </p>

<p style="font-family: Verdana, sans-serif;"> TEXT </p>

<p style="font-family: 'Trebuchet MS', sans-serif;"> TEXT </p>

    Some fonts are bigger than others, some have more weight (bold), and some are italic. font-size is different property than font-family, and the former has value in various UNITs of measurement. font-weight is also different property than font-family, however, in older days, there are limited options: normal, bold, bolder. Therefore, different names for higher font-weights are provided in same family. For example:

<p style="font-family: Arial, sans-serif;"> TEXT </p>

<p style="font-family: arial-black, sans-serif;"> TEXT </p>

<p style="font-family: 'Arial Black', sans-serif;"> TEXT </p>

    WEB-DEVELOPERS don't know which font-families are installed in the client's / user's computer, therefore, it is general rule to add either serif, sans-serif, monospace, or cursive at the end when they have been mentioning specific font-families for an HTML element, or a selector (as in CSS).

<p style="font-family: 'Lucida Console', monospace;"> TEXT </p>

<p style="font-family: 'Courier New', Courier, monospace;"> TEXT </p>

    You can see in the following examples that many font-family names of same type are written, separated from each other with , (comma) and 'multi-word names' are written in pair of two single-quotes.

    <p style="font-family: Verdana, Geneva, Tahoma, sans-serif;"> TEXT </p>

    <p style="font-family: Arial, Helvetica, sans-serif;"> TEXT </p>

    <p style="font-family: Georgia, 'Times New Roman', Times, serif;"> TEXT </p>

    <p style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, sans-serif;"> TEXT </p>

    However, in modern days, when internet speed and data-services are more faster and cheaper than older days, there are many online (for example, google fonts) or offline (downloading desired fonts, some of them are freely available for commercial use), and use them locally (in the relative path) of your WEB-PAGE. You will learn more about how to use different font-families in CSS topic.

<style type="text/css">
  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Work+Sans:wght@400;500&display=swap");
  body { font-family: 'Work Sans', sans-serif; }
  h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; }
/* font-family after downloading from the authenticated source, and having PERMISSION to use COMMERCIALLY, can be applied as described, in following example: */
  @font-face { font-family: myFont; /* myFont is custom name, to be used in your WEB-PAGES */ src: url('./ChopinScript.ttf'); }
  p { font-family: myFont; } /* Now, this font-family will be applied to all <p> </p> HTML element, where you LINK it. */
</style>

    You can also use following font-families or UNICODE characters in your WEB-PAGES. However, you can not change these UNICODE characters dynamically, and therefore, you should use them carefully. You can see an example at the title of this website. Consider the following UNICODE CODEs for following letters:

    𝒜 ℬ 𝒞 𝒟 ℰ ℱ 𝒢 ℋ ℐ 𝒥 𝒦 ℒ ℳ 𝒩 𝒪 𝒫 𝒬 ℛ 𝒮 𝒯 𝒰 𝒱 𝒲 𝒳 𝒴 𝒵

    &Ascr; &Bscr; &Cscr; &Dscr; &Escr; &Fscr; &Gscr; &Hscr; &Iscr; &Jscr; &Kscr; &Lscr; &Mscr; &Nscr; &Oscr; &Pscr; &Qscr; &Rscr; &Sscr; &Tscr; &Uscr; &Vscr; &Wscr; &Xscr; &Yscr; &Zscr;

    𝒶 𝒷 𝒸 𝒹 ℯ 𝒻 ℊ 𝒽 𝒾 𝒿 𝓀 𝓁 𝓂 𝓃 ℴ 𝓅 𝓆 𝓇 𝓈 𝓉 𝓊 𝓋 𝓌 𝓍 𝓎 𝓏

    &ascr; &bscr; &cscr; &dscr; &escr; &fscr; &gscr; &hscr; &iscr; &jscr; &kscr; &lscr; &mscr; &nscr; &oscr; &pscr; &qscr; &rscr; &sscr; &tscr; &uscr; &vscr; &wscr; &xscr; &yscr; &zscr;

    𝔸 𝔹 ℂ 𝔻 𝔼 𝔽 𝔾 ℍ 𝕀 𝕁 𝕂 𝕃 𝕄 ℕ 𝕆 ℙ ℚ ℝ 𝕊 𝕋 𝕌 𝕍 𝕎 𝕏 𝕐 ℤ

    &Aopf; &Bopf; &Copf; &Dopf; &Eopf; &Fopf; &Gopf; &Hopf; &Iopf; &Jopf; &Kopf; &Lopf; &Mopf; &Nopf; &Oopf; &Popf; &Qopf; &Ropf; &Sopf; &Topf; &Uopf; &Vopf; &Wopf; &Xopf; &Yopf; &Zopf;

    𝕒 𝕓 𝕔 𝕕 𝕖 𝕗 𝕘 𝕙 𝕚 𝕛 𝕜 𝕝 𝕞 𝕟 𝕠 𝕡 𝕢 𝕣 𝕤 𝕥 𝕦 𝕧 𝕨 𝕩 𝕪 𝕫

    &aopf; &bopf; &copf; &dopf; &eopf; &fopf; &gopf; &hopf; &iopf; &jopf; &kopf; &lopf; &mopf; &nopf; &oopf; &popf; &qopf; &ropf; &sopf; &topf; &uopf; &vopf; &wopf; &xopf; &yopf; &zopf;

Some other font-families:

<p style="font-family: 'Segoe Script';"> TEXT </p>

<p style="font-family: 'Segoe Print';"> TEXT </p>

<p style="font-family: fantasy;"> TEXT </p>

<p style="font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;"> TEXT </p>