My h1 tag font family suddenly changed from its original font family in css

css font family list
adjust font-size according screen resolution css
css set default font
css to change font
responsive font-size css tricks
extra class name font-size
font-size: 0px
font size width and height

I have a html website, the css is the same for every pages on my website. Today the font of my front page suddenly changed. The original font family was:font-family: "Alex Brush"; but it changed to some normal font family. I tried adding the font-family: "Alex Brush"; in the head section of the page but it didn't work. I don't know why it's not showing the same font as on the other pages.

My css:

html, body {
  font-family: "Source Sans Pro", sans-serif;
  height: 100% !important;
  font-weight: 300;
  color: #444;
  position: relative;
  font-size: 14px;
  line-height: 1.5em;
}
html h1, html h2, html h3, html h4, html h5, body h1, body h2, body h3, body h4, body h5 {
  font-family: "Alex Brush";
  font-weight: 300;
  margin: 0px;
  letter-spacing: 2px;
  color: #555;
}

Providing my head tag below:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <meta name="author" content="Suave Digital">
    <link rel="apple-touch-icon" sizes="72x72" href="assets\images\apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets\images\apple-icon-114x114.png">
    <link rel="shortcut icon" type="image/png" sizes="32x32" href="assets\images\favicon-32x32.png">

    <title>The Nosh Bistro </title>

    <!-- Bootstrap core CSS -->
    <link href="assets/stylesheets/css/bootstrap.min.css" rel="stylesheet">

    <!-- font-awesome.css -->
    <link href="assets/stylesheets/css/fontawesome/font-awesome.min.css" rel="stylesheet">

    <!-- pe-icon.css -->
    <link href="assets/stylesheets/css/pe-icon/pe-icon-7-stroke.css" rel="stylesheet">
    <link href="assets/stylesheets/css/pe-icon/helper.css" rel="stylesheet">
    <link href="assets/fonts/flaticon/flaticon.css" rel="stylesheet">

    <!-- Fancybox -->
    <link href="assets/javascripts/fancybox/jquery.fancybox.css" rel="stylesheet">

    <!-- Slick -->
    <link href="assets/stylesheets/css/slick/slick.css" rel="stylesheet">
    <link href="assets/stylesheets/css/slick/slick-theme.css" rel="stylesheet">

    <!-- Animate -->
    <link href="assets/stylesheets/css/animate.css" rel="stylesheet">

<script>
window.onscroll = function() {
    growShrinkLogo()
  };

  function growShrinkLogo() {
    var Logo = document.getElementById("logo")
    if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
      Logo.style.width = '72px';
    } else {
      Logo.style.width = '180px';
    }
  }
</script>

    <!-- Main CSS -->
    <link href="assets/stylesheets/css/style.css" rel="stylesheet">

    <!-- Font style -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#myModal").modal('show');
        });
    </script>
    <style>








    .modal-content{
      width: 440px;
    margin-left: 40px;
    margin-top: -15px;
    }
    .modal-header{
      height: 5px;
    }
    .peep{
      margin-top: -6px;
    }

    /* @media screen and (max-width: 768px) {


} */

    </style>



  </head>

I don't know what happened to my front page. I want my <h1> tags on the front page to show the "Alex Brush" font. Does anyone know the solution to my problem or can anyone tell me how to change the font family in inline tags?

This is my HTML page.

Seems this two link

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

is overriding you default css. So load your css file after these two files or use !important along with the style

Also I checked your website. none of the files from your assests are loading, check the server configuration too

Why did my font suddenly change?, To override and revert back to original font. Add following css code in additional css section in customizer. .primary-navigation { font-family: inherit!important; } h1 � I have rendered a vf page as pdf. I am unable to change the fon-family to arial. I have used <style type=text/css> p {font-family:"Arial Unicode MS";

You import few times the same files (jquery, bootstrap,...).

On your <head> you can remove:

<link href="assets\stylesheets\css\menu\bootstrap.min.css" rel="stylesheet"> 
(the second one not the first)

<script src="assets\stylesheets\css\menu\bootstrap.min.js"></script> (put this 
script on your footer with other script) and change "\" to "/" in the path.


<!-- Font style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

And please, in your folders change "stylesheets/css" to "stylesheets" and inside create a new folder with "css" and there put all your files.

Title and menu fonts changed unexpectedly, If you nest your <p> or <h1> tags incorrectly, like this: The chrome browser automatic change the font size to 12px. between body tags,but this way doesn't work for the course “FONT FAMILY” Telling me I changed some of the original code and to hit 'reset code'. The css property “font-size” here is a critical bug … The font family of a text is set with the font-family property. The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic

As I checked your website, it seems to use the correct font family(Alex Brush) for h1 tags, Try clearing your browser's cache

Just as a note, here is how you can debug such issues:

  1. Make sure your font imported correctly in the page
  2. Make sure you are using the correct font family name
  3. Make sure your styles are not overridden by other CSS codes.
  4. Clear your browser's cache

By considering the above notes, you will not have any issue.

Font Size Problems? Check Here First!, It's a CSS property probably everyone who writes CSS has used at some point. My default font size for Devanagari is set to 18 instead of 16. the font family or language changes, you should recompute the font-size as if� Both have same font-family but can not able to determine whats the reason. Can anyone font family specialist that recornized what is exact issue in https://veslio.technocorpus.review/ Thanks!

Font-size: An Unexpectedly Complex CSS Property, CSS default font-size is 15px; The default font is Verdana, which has a good letter h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} Changing the Default Page Font. In the head of your web page (or in your style sheet), after loading W3.CSS font-family: "Comic Sans MS", cursive, sans-serif; If you want the font you chose to be applied and not the one in bootstrap without modifying the original bootstrap files you can rearrange the tags in your HTML documents so your CSS files that applies the font called after the bootstrap one.

W3.CSS Fonts, There are many inline font-families and so it's not possible to Custom font not applied to heading tags (h1, h2. So I appealed to css specificity, and setup my overwriting with css id, and None of these solutions worked for me at first, but then I changed an import statement in vuetify.js and suddenly the� font-family:'My Custom Font','Trebuchet MS','Verdana','Arial','sans-serif'; So that you still have some control over the display of your page. TL;DR – HTML, CSS and Fonts. With the dawn of custom fonts a lot more flexibility has been given to website owners in how their sites look.

overwriting font-family � Issue #8169 � vuetifyjs/vuetify � GitHub, If you need to cherry-pick a specific element out of your page, a class selector can do in the HTML itself is making sure you use semantic tags, because your choice of tags <h1> is your most important header, because it is a special signal to the .article { display: inline-block; width: 50%; margin-bottom: 1em; font-family:� So I thought it is because I have a different font setting with my account. However, when I look into the setting, I find out the font setting of my google account is the same as the default one when not signed in. Font size is median, and attributes listed under the custom font are also the same.

Comments
  • Where did you add the font?? is it google font or through CSS file??
  • How did you import your fonts?
  • @JoykalInfotech its in the css file
  • in your <head>, put your style.css after others .css files. And <script> are better to put them in the footer not in the <head>.
  • and also check for the file and path of the file, it is correct or not.
  • how do i use important
  • font-family: "Alex Brush" !important;
  • I think you can simply put you style.css after all .css files. It'll overwrite the other .css
  • this doesn't seem an issue, in her website the font family is indeed "Alex Brush". the issue might be of import.
  • I just see your website and your fonts seems to work... Are you sure?