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">
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')"
.home {
background: url(download.png);
background-size: 1500px;
overflow: ;
background-position: -130px -20px;
}
.content h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 45px;
font-weight: 900;
line-height: 50px;
position: relative;
bottom: 50px;
z-index: 200;
}
.content h2::before {
content: "";
background: linear-gradient(130deg, #1951bf 0%, #25b7c7 89%);
position: absolute;
height: 14px;
width: 334px;
filter: opacity(0.4);
top: 77px;
z-index: -200;
}
.content p {
width: ;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 15px;
color: #3a505f;
letter-spacing: 1.1px;
line-height: 26px;
z-index: 200;
transform: scale(1.04, 1.1);
}
.home {
display: flex;
justify-content: ;
align-items: center;
height: 100vh;
color: black;
z-index: -100;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?
family=Source+Sans+Pro:wght#700&display=swap" rel="stylesheet">
<div class="home">
<div class="content">
<h2>No-Code<br>Payment Platform</h2>
<p>PayRequest makes it easy to create your own branded payment page, and to send payment links to all your customers.</p>
</div>
</div>
Above is the code for the site I am building.
The UI of the page I want to rectify: click-here-to-view
The original UI: click-here-to-view
I have the exact same font-family down and I have tried different sizes and weights but I am not able to get the exact same text as the original site in the p section. I have got the same one down in h2 but not in p.
Can somebody help to resolve this issue, please?
In h2 you have font-family: 'Source Sans Pro' but in p you have 'Poppins'. So this is why they are two different fonts. You can either declare a universal font family using *{} or you can just switch the font family in p to 'Source Sans Pro'
Keep the same font-family for the elements in your css. h2 and p and different font-family. Also if you put everything in the a < body> tag you can just define the font-family in their rather than adding it in every element like so:
body {
font-family: 'Source Sans Pro', sans-serif;
}
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!
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 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 *