Font family does not work when in css file-CodePudding

This is really strange. Try as I might, I cannot get a font to display when defined in css. Very simple:

p {
    font-family: Raleway,sans-serif;
}

Raleway not displayed - Text seems to be in tms roman.

BUT

`<p style="font-family: 'Raleway',sans-serif;">` WORKS !!!!

Makes no sense. Yes, css file is being read and everything else gets rendered properly. Same in Firefox, Chrome and Edge.

Really has me puzzled. Any thoughts??? Thanx

CodePudding user response：

Try using quotation marks for the font name in font-family definition

p {
    font-family: 'Raleway', sans-serif;
}

CodePudding user response：

It is a good practice to quote font family names that contain white space, digits, or punctuation characters other than hyphens. Try this way, hope this will work for you.

font-family: "Gill Sans Extrabold", sans-serif;

CodePudding user response：

First off, quotes wrapped around a font-family name is only necessary if the name consists of multiple words (ex. "New Roman Times"), so wrapping Raleway in quotes is pointless.

:root

:root is the <html> tag with a higher priority than html. This selector should be on top of the stylesheet (there might be a few selectors that could preceed it like *). Place the font properties here and it will be the global default for the whole page.

:root { font: 2ch/1.25 Raleway; }

body

If you plan to use rem units set a font-size on the body selector. The value set here will be the base value for 1rem.

body { font-size: 2ch; }

input, textarea, select, button

The only tags that will not conform to the default are <input>, <textarea>, <select>, and <button>. Here is the ruleset I use (it varies for font-size and line-height depending on personal preference):

input, textarea, select, button { font: inherit; line-height: 1.15; }

Also, if you are using Bootstrap, you'll most likely need to override BS styles. There are two effective ways to do so:

Double Selectors will double specificity

.btn.btn { font-family: Raleway; }

!important overrides anything (not recommended)

.btn { font-family: Raleway !important }

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');

:root {
  font: 2ch/1.25 Raleway;
}

body {
  font-size: 2ch;
}

p {
  font-size: 1rem;
}

input {
  font: inherit;
  line-height: 1.15;
}

<h1>Raleway</h1>
<input placeholder='Raleway'>
<p>Almost before we knew it, we had left the ground.</p>
<blockquote>
  <q>Almost before we knew it, we had left the ground.</q> 
</blockquote>