{"id":46,"date":"2024-10-21T05:17:26","date_gmt":"2024-10-21T05:17:26","guid":{"rendered":"https:\/\/techkubo.com\/css\/?p=46"},"modified":"2025-05-12T12:46:11","modified_gmt":"2025-05-12T12:46:11","slug":"css-fonts","status":"publish","type":"post","link":"https:\/\/techkubo.com\/css\/css-fonts\/","title":{"rendered":"CSS Fonts"},"content":{"rendered":"\n

1. Font Family<\/strong><\/h2>\n\n\n\n

The font-family<\/code> property is used to specify the font of the text. It\u2019s always a good idea to define multiple fonts as backups. If the browser can\u2019t load your first choice, it will try the next ones on the list.<\/p>\n\n\n\n

p {\n  font-family: "Arial", "Helvetica", sans-serif;\n}<\/pre><\/div>\n\n\n\n
Here, the browser will first try to apply Arial. If it\u2019s not available, it will try Helvetica, and if that\u2019s also unavailable, it will use a generic sans-serif font.<\/p>\n\n\n\n
2. Font Size<\/strong><\/h2>\n\n\n\n
To change the size of your text, use the font-size<\/code> property. You can define the size in different units like px<\/code> (pixels), em<\/code>, rem<\/code>, or %<\/code> depending on whether you want a fixed size or one that scales with the rest of the page.<\/p>\n\n\n\n
h1 {\n  font-size: 36px;\n}\n\np {\n  font-size: 1.2em;\n}<\/pre><\/div>\n\n\n\n
    \n
  • Pixels (px) give a fixed size.<\/li>\n\n\n\n
  • Relative units like em<\/code> and rem<\/code> allow your text to scale, making your design more flexible.<\/li>\n<\/ul>\n\n\n\n
    3. Font Weight<\/strong><\/h2>\n\n\n\n
    The font-weight<\/code> property controls how bold or light the text appears. You can specify it using keywords like normal<\/code>, bold<\/code>, or by numbers ranging from 100 to 900.<\/p>\n\n\n\n
    p {\n  font-weight: bold;\n}\n\nh2 {\n  font-weight: 600; \/* Semi-bold *\/\n}<\/pre><\/div>\n\n\n\n
    4. Font Style<\/strong><\/h2>\n\n\n\n
    If you want to italicize your text, use the font-style<\/code> property.<\/p>\n\n\n\n
    p {\n  font-style: italic;\n}<\/pre><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    CSS Fonts Example Code<\/strong><\/h2>\n\n\n\n
    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>CSS Fonts Example<\/title>\n    <style>\n        \/* Applying different font properties *\/\n\n        \/* Font Family *\/\n        .font-family {\n            font-family: 'Arial, sans-serif';\n        }\n\n        \/* Font Style *\/\n        .font-style {\n            font-style: italic;\n        }\n\n        \/* Font Weight *\/\n        .font-weight {\n            font-weight: bold;\n        }\n\n        \/* Font Size *\/\n        .font-size {\n            font-size: 24px;\n        }\n\n        \/* Combining All Font Properties *\/\n        .all-font-properties {\n            font-family: 'Times New Roman, serif';\n            font-style: oblique;\n            font-weight: 700;\n            font-size: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class="container">\n        <p class="font-family">This text uses the 'Arial' font family.<\/p>\n        <p class="font-style">This text is in italic style.<\/p>\n        <p class="font-weight">This text is bold.<\/p>\n        <p class="font-size">This text is 24px in size.<\/p>\n        <p class="all-font-properties">This text combines all font properties.<\/p>\n    <\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    CSS Labs<\/strong><\/h2>\n\n\n\n