I imported Montserrat(400,700, and 900) and Ubuntu(400) fonts from google fonts but it seems like only Montserrat 400 and Ubuntu 400 are working, I can't use Montserrat 700 nor Montserrat 900. I would appreciate it if anyone can help me as I'm stuck on this for some time now. Thank you!! Here is my code:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
body{
font-family: 'Montserrat', sans-serif;
}
h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}
h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
<h1>Title</h1>
<h3>Title</h3>
Can it be, that you link the font in your css file? You should move it to your html.
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<p class="w-900">Hello 900</p>
<p class="w-700">Hello 700</p>
body{
font-family: 'Montserrat', sans-serif;
}
.w-900{
font-weight: 900;
}
.w-700{
font-weight: 700;
}
JSFiddle
Alternativelly, you can use #font-face
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
W3 Schools
How to import fonts
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
This part of your code should be in your HTML file. Here's what I did and how it looks like.
HTML:
<html>
<link href="https://fonts.googleapis.com/css2?
family=Montserrat:wght#400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="style.css">
<h1>This is 900.</h1>
<h3>This is 700.</h3>
</head>
</html>
CSS:
h1{
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}
h3{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
In Chrome it looks like this.
I'm gathering that this is a Chrome bug, which is interesting because I am using a version of Chromium and it works fine. I would recommend using internal CSS (rather than external stylesheets) underneath a <style> tag in your <head> section (where you should also reference the <link> to the font), and adding the CSS assigned to *, as shown below, to it:
* {
-webkit-font-smoothing: antialiased;
}
body {
font-family: 'Montserrat', sans-serif;
}
h1 {
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}
h3 {
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700;900&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<h1>Title</h1>
<h3>Title</h3>
</body>
Alternatively, there is also the #import method, which you should find greyed out as the right-hand option in the Embed section of the Google Fonts link. This should be your secondary option, however, because, as #igriorik notes here, these rules defer the loading of the included resource until the file is fetched, which could lead to broken fonts on some platforms.
To do this, though, you would add the #import rules underneath a <style> tag, and reference it in the desired element. In your case (with the Montserrat font):
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
font-family: 'Montserrat', sans-serif;
}
h1 {
font-size: 3.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
line-height: 1.5;
}
h3 {
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
<h1>Title</h1>
<h3>Title</h3>
Let me know if this doesn't work!
Related
I have created a small sandbox page, and while the CSS does work, the font-face is a problem for locally-hosted Open Sans downloaded from Google Fonts.
I've hosted the fonts locally so this test page is self-contained for now.
body {
font-family: Helvetica,Arial,sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
font-family:"Open Sans", Helvetica, Arial,sans-serif;
font-weight:400;
font-style:normal;
line-height:1.4em;
color:#333;
margin:0 0 15px 0;
}
h1 {
font-size:22px;
}
h2 {
font-size:20px;
}
h3 {
font-size:18px;
}
h4 {
font-size:16px;
}
h5 {
font-size:14px;
}
p {
font-family:"Open Sans", Helvetica, Arial,sans-serif;
font-weight:400;
font-style:normal;
font-size:14px;
line-height:1.2em;
color:#333;
margin:0 0 15px 0
}
a {
text-decoration: none;
}
b {
font-family: Open Sans, sans-serif;
font-weight: 700;
}
#header {
background: #01b14c;
width: 100%;
box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
left: 0;
right: 0;
padding: 6px 0;
}
.fal.fa-phone::before {
content: "\ea39";
}
.footer {
padding: 60px 0;
background: #000;
color: #FFF;
}
#cloned-hometext {
width: 470px;
}
.about-text {
font-size: 13px;
}
#font-face {
font-family: 'Open Sans';
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('fonts/OpenSans-Regular.ttf');
font-display: swap;
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: 'Open Sans';
src:
url('fonts/OpenSans-Bold.ttf');
font-weight: 700;
font-display: swap;
font-style: bold;
}
#font-face {
font-family: 'Open Sans';
src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
url('fonts/OpenSans-ExtraBold.ttf');
font-weight: 900;
font-display: swap;
font-style: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test page</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header id="header">
<h1>A TEST</h1>
</header>
<div id="cloned-hometext" class="about-text">
<h1>TEST</h1>
<p>This is a test</p>
<h3>This works</h3>
<b>It's got to work</b>
</div>
<footer class="footer">
Content to come
</footer>
</body>
</html>
Despite having the OpenSans-Bold font in fonts folder of styles where style.css resides the document only shows Open Sans or a faux-bold.
These are all the fonts in the directory:
OpenSans-Bold.ttf
OpenSans-ExtraBold.ttf
OpenSans-Medium.ttf
OpenSans-Regular.ttf
OpenSans-SemiBold.ttf
However, the bold font is not showing even when I declare in HTML.
How can I resolve this in the CSS I have?
Note in the code above, that's the content of style.css ; it's not inline.
add format('truetype') to your #font-face declaration. Also if it doesn't work, then move the #font-face declarations to the top of CSS.
Also if Open Sans is your default font, then apply it to the body and you don't have to specify font-family to all your elements over and over, like you're doing now.
Also are you sure about the path to font files, looks like it might need some dots and slashes upfront.
Check your path url to your font file, if it was in the same path change url path to "url('./fonts/OpenSans-Regular.ttf')"
I have a font in photoshop:
and when I set font-weight: 100 the result is too bold.
Font-size:72px, font-family:"Montseratt"
When I'm changing font-weight from 300 to 400 font also changings (for font-weight: 100, 200, 300 font the same). I guess it means that property works, but how can I make font thinner than value that property can set
you can do this.
you make a typo it's font-family: 'Montserrat', sans-serif; not
font-family:"Montseratt"
body {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
}
.thin {
font-weight: 100;
}
.normal {
font-weight: 400;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400" rel="stylesheet">
<p class="thin">THIN<p>
<p class="normal">NORMAL</p>
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
it may help you
I am want to use titillium web and Raleway google font in by website but it is not working
this is my html
> <head> <link href="https://fonts.googleapis.com/cssfamily=Raleway|Titillium+Web"rel="stylesheet">
> </head>
this is css
.bigheadline {
font-family: 'Raleway', sans-serif;
font-weight: 100;
font-size: 10em;
margin: 0;
}
.subheadline {
font-family: 'Titillium Web', sans-serif;
font-weight: 200;
font-size: 3em;
margin: 10px 0 0 0;
}
Your URL is malformed; it is missing a ? between css and family. It would also be good practice to add a space before rel="stylesheet. Try the following.
<link href="https://fonts.googleapis.com/css?family=Raleway|Titillium+Web" rel="stylesheet">
This is what my CSS looks like on the page.
<!DOCTYPE html>
<html>
<head>
<style>
p.addresscenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.2;
margin: 0;
text-align: center;
white-space: pre;
}
p.endtagbold {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 600;
font-style: normal;
line-height: 1.2;
margin: 0;
padding-top:16px;
}
p.hoursofoperationcenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.3;
margin: 0;
text-align: center;
white-space: pre;
}
p.infop {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:30px;
}
p.infostextbox {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 550;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:16px;
}
p.topmenu {
background-color: none;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 500;
font-style: normal;
line-height: 1.4;
margin: 0;
text-align: center;
}
p.towncounty {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 700;
font-style: italic;
line-height: 1.4;
margin: 0;
padding-top:16px;
}
</style>
</head>
<body>
<p class="topmenu">Text with id tags here.</p>
There is a set of columns here made with these tags
<div class="one-half first">Text</div>
<div class="one-half"> Text </div>
Then there is more text which is formulated by <p class=""></p> and then finally the <!--nextpage--> attribute occurs somewhere in the middle.
After the <!--nextpage--> tag I have more text with <p class=""></p>
The entire page ends with
</body>
</html>
On my other pages that are not split the css shows up fine. For whatever reason the css is not showing up on page 2 after the <!--nextpage--> . What do I have to do to make sure the css shows up before and after the <!--nextpage--> attribute.
I'm not sure if I understand everything well, but You should try to place <!--nextpage--> between the tags, and not inside of them.
For example:
<p>asdasd</p><!--nextpage--><p>asdasd</p>
Is ok, while:
<p>asdasd<!--nextpage-->asdasdasd</p>
is not ok. I hope this is the case, if not, please do not downvote and update You question with full code. Then I will try to update my answer.
Few more words. When You click next page, then the paragraph element has started on the page before. So on the actual page there is no paragraph start, but only: asdasdasd</p> which is causing problems, and is not a valid html.
Best regards.
I have a site using 2 css : one global, one page specific.
By default, I want to set a font type and size for everything, and adjust it depending on my needs on some pages.
So I have :
global.css
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
p {
text-align:justify;
margin:0px;
margin-bottom:10px;
}
a:link {
color: #993300;
text-decoration: none;
}
a:visited {
color:#993300;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline overline;
}
news.css
div.news{
width: 100%;
}
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #848484;
margin:0px;
margin-bottom:20px;
text-align: center;
position: relative;
top: -10px;
text-transform: uppercase;
}
.news p.reminder a:link, .news p.reminder a:visited {
color: #848484;
}
.news p.reminder a:hover {
}
HTML file
<HTML>
<HEAD>
<TITLE>the title</TITLE>
<LINK href="global.css" rel="stylesheet" type="text/css">
<LINK href="news.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV class="news">
<P class="reminder">
some text
</P>
</DIV>
</BODY>
</HTML>
For a reason I don't see, the part :
.news p.reminder {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
is not taken into account.
If I remove the * definition from the global.css, it's OK. But if I keep it, that part does not override it.
How may I do to make this work ?
The reason you don't see it is because, while the paragraph does take on the styles you want, the * selector matches <A href="some_url"> and promptly changes them back.
You could modify the selector to match the a element too, but I'd set the font styling on the body instead of *