Font family does not work when in css file

Question

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

score 0 · Answer 1 · answered Feb 26 '22 at 03:05

0

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

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

answered Feb 26 '22 at 03:05

Luka Cerrutti

667
1
4
9

score 0 · Answer 2 · answered Feb 26 '22 at 04:37

0

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;

answered Feb 26 '22 at 04:37

Raihanul Hoque

13
5

zer00ne · Answer 3 · 2022-04-03T21:28:44.927

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. The font-size value set here will be the base value for 1rem.

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

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;
}

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>

Lots of great suggestions but believe it or not, none of them worked. Hard to believe. There are 2 things I didn't mention: 1. The only things that are Raleway are text inputs. 2. This site is essentially a duplicate of another site in which Raleway renders properly. Have switched out all css and js files with no effect. 3. Raleway used to be rendered. Stopped at some point and have no idea why? My work around is a DIV style at the start of each page defining family — N00bie, Feb 26 '22 at 17:11

Font family does not work when in css file

3 Answers3