Changing Font in CSS

Change font of div css

Try this to change each div font by without modifying the html. The idea is to target each give using adjacent sibling eg h2 + div , h2 + div + div, h2 + div + div + div etc. like so

        *    {     background-color: #ffcc66;     color: #003399;     font-family: Comic Sans MS;     font-size: 14px;    }    a    {     color: #CC0000;     text-decoration: none;    }    a:visited    {     color: #CC0000;    }    a:hover    {     color: #006600;    }    a:active    {     color: #CC0000;    }        h1    {     background-color: #3399FF;     text-align: center;     margin: 35px;     border-bottom-style: solid;     border-bottom-width: thin;     border-bottom-color: #000033;    }        h2    {     color: red;     font-weight: bold;    }        p    {     font-family: Georgia;     color: #003300;     padding: 15px;    }        li    {     font-family: Arial;     background-color: #808080;     font-weight: bold;     font-size: 18px;    }        *{ background-color: #ffcc66; color: #003399; font-family: Comic Sans MS; font-size: 14px;}a{ color: #CC0000; text-decoration: none;}a:visited{ color: #CC0000;}a:hover{ color: #006600;}a:active{ color: #CC0000;}
h1{ background-color: #3399FF; text-align: center; margin: 35px; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #000033;}
h2{ color: red; font-weight: bold;}
p{ font-family: Georgia; color: #003300; padding: 15px;}
li{ font-family: Arial; background-color: #808080; font-weight: bold; font-size: 18px;}
h2 + div{  font-family: Arial;}
h2 + div + div{  font-family:  Sakkal Majalla;}
h2 + div + div + div{  font-family: Batang;}

    <html>    <head>    <meta charset="utf-8">    <title>Test</title>    <link rel="stylesheet" type="text/css" href="styles.css"/>    </head>        <body>        <h1>Formatting with CSS</h1>        <p>This is a basic web page to be used as a test for applying  CSS formatting rules.</p>        <h2>Hyperlinks</h2>    <a href="http://www.google.com/">Link to the Google website</a>    <br/>    <a href="http://www.google.com/">Link to the google page on CSS</a>        <h2>List Items</h2>    <ul>      <li>Item 1</li>      <li>Item 2</li>      <li>Item 2</li>    </ul>        <h2>Class examples</h2>    <div>Example 1 Class CSS</div>    <div>Example 2 Class CSS</div>    <div>Example 3 Class CSS</div>    </body>    </html>

font style not changing after adding font family in css

You need to specify the font / url within the stylesheet, not try to link it as a stylesheet itself.

For example:

stylesheet.css

@font-face {
  font-family: BertonVoyageRegular;
  src: url(http://molugu.com/yantraev/BERTON-VOYAGE-TRIAL.TTF);
}

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

How to change an element's font-family without affecting it's ::before or ::after?

With @Termani's help above, this is how I solved the problem of injecting my preferred font into websites while doing minimal damage to most site's icons loaded via webfont files:

::before, ::after {
    font-family: FontAwesome, "Font Awesome", "Font Awesome 5 Pro",
    "Font Awesome 5 Free", "Material Icons", "Material-Design-Iconic-Font",
    Flaticon, "CBSi Fantasy icomoon", CBSi_Fantasy_icomoon, icon-moon,
    icomoon, ui-icons, icons, NewYorkIcons, sans-serif !important;
}

Without doubt there are other font-family names that developers use, so the list will grow as I stumble upon them.

I'll update this answer if I find a better solution.

How to Change the Font of a Specific li

tried to close quotation marks?

#menu-applemain li:nth-child(4) {  font-size: 200%;  font-family: impact, sans-serif;}

<ul id="menu-applemain" class="x-nav">  <li>One</li>  <li>Two</li>  <li>Three</li>  <li>Four</li>  <li>Five</li></ul>

The 'h1' tag is not changing its font size despite a value in CSS

Nenad Milosavljevic's answer is right, and I am just adding an explanation.

You might be having a CSS file in your HTML file which is overriding your internal CSS. To override that one, you need to put !important to your properties.

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem !important;
    Line-height: 1.5;
}