I'm using Playfair Display (Google Font) in one of my pages.
This is how number show in the page. They're all unaligned. Below is the picture.
Below is the picture of Aligned Fonts of the same Google Font. (I have taken the pic from Figma, there was a option for changing font style in Figma) I have to make my fonts look like this, how do I do that?
You can fix this by adding CSS instructing the browser to use the lining-figures.
Read more here
body {
font-family: 'Playfair Display', serif;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
123456789
Please try this!
h1, p {
font-family: 'Playfair Display', serif;
font-feature-settings: "lnum";
}
.number {
background: #55bd55;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
font-size: 25px;
height: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<h1>Sample Header</h1>
<p class="number">123456789</p>
</body>
</html>
Related
I wan to set Barlow and Fraunces in my CSS. But every time i try to import and use that font family, there doesn't seem to be any changes and font still seems to be Times New Roman.
I tried this
#import url(https://fonts.google.com/specimen/Barlow);
body{
font-family: 'Barlow';
}
That's because you have to include your font-weight and font-style properties in your CSS code:
#import url('https://fonts.googleapis.com/css2?family=Barlow:wght#400;700&display=swap');
body{
font-family: 'Barlow', sans-serif;
font-weight: 400;
font-style: normal;
}
You can try this
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#100&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Barlow', sans-serif;
}
</style>
I am creating a personal website in html and am trying to add a background image to the "index.html" page. I have pasted my the index.html and style.css code below:
HTML File:
<!DOCTYPE html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital#0;1&display=swap" rel="stylesheet">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Jack Hanel</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Gallery
Education
<h1>Hello, I'm Jack Hanel</h1>
<img src="Photos/headshot.jpeg" height="257" width="207">
<p>Age: {age}</p>
<p>Date of Birth: 08/30/1998</p>
<p>Gender: Male</p>
<p>Height: 5'10"</p>
<p>Weight: 165 lbs</p>
<p>Born: Phoenix, AZ</p>
<p>Raised: Greenville, SC</p>
<p>Current Location: Charlotte, NC</p>
LinkedIn
Twitter
Instagram
Replit
</body>
</html>
CSS File:
<style>
body {
background-image: url(Photos/AbstractWallpaper.png);
}
h1 {
font-family: 'EB Garamond', serif;
font-size: 28px;
}
a {
font-family: 'EB Garamond', serif;
background-color: lightgrey;
padding: 4px
}
p {
font-family: 'EB Garamond', serif;
font-size: 18px;
background-color: lightgrey;
padding: 4px
}
img {
margin: 4px
}
</style>
I've added the same background-image code line to the h1 tag, and it applies, although only showing the very top of the image. So I know the background-image code itself isn't the problem. Please help! Also, any other general advice is appreciated, I am brand new to HTML and CSS.
Thank You
I've tried adding the background-image element to the h1 tag, and it worked, although it only showed the very top of the image. But when I apply this line of code to the body tag, nothing appears.
Find the image here to understand what i'm talking about
Been googling and fiddling around but I can't seem to seperate the words. The only separation I managed was using "justify-content: space-around".
Here's the HTML. And the CSS is below it
body {
background-color: #3269a8;
}
.header-container {
display: flex;
width: 100%;
height: 50px;
background-color: #282828;
border-radius: 10px;
align-items: center;
justify-content: center;
}
.logo {
color: white;
font-family: 'Titillium Web', sans-serif;
font-size: 25px;
}
.logo:hover p {
transition: 2000ms;
font-size: 30px;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Top 3 Anime</title>
</head>
<body>
<div class="header-container">
<p class="logo-the logo">The</p> <p class="logo-big logo">Big</p> <p class="logo-three logo">Three</p>
</div>
<div class="top3">
<div class="onepiece">One Piece</div>
<div class="dragonball">Dragon Ball Z</div>
<div class="naruto">Naruto</div>
</div>
</body>
</html>
You have used display:flex in your header-container with justify-content:center; that will make the child p tags to be in a line without any space. if you just want little space around p tags you can add
.header-container p {
padding: 0 5px;
}
and if you want to learn about flex and its properties you can learn from here csstricks , the have explained it beautifully.
I hope this will work for you
Thanks
You can change the <p>Your header</p> to <pre>Your Header</pre>. Here <pre> keeps the format of the text including spaces. You can check this page: https://www.w3schools.com/tags/tag_pre.asp
Basically you just need to editted the following in your code:
<pre class="logo-the logo">The </pre> <pre class="logo-big logo">Big </pre> <p class="logo-three logo">Three</p>
I added a space after "The" and "Big" so converted them to <pre>.
Here's my code of index.html:
<!DOCTYPE html>
<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.0">
<title>CodeWare</title>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<div class="hero">
<h1>Coding</h1
<h1>Redefined.</h1>
</div>
</body>
</html>
Styles.css:
:root {
--color-Primary: #ff0505;
}
html {
font-size: 62.5%;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
}
.hero {
background-color: var(--color-Primary);
height: 50rem;
}
h1 {
padding-left: 2rem;
padding-top: 2rem;
color: #ffffff;
margin-top: 0px;
font-size: 9rem;
font-weight: 700;
}
In index.html, it works if I use style="margin-top: 0px;" in the h1 attribute. If I instead type it in styles.css as margin-top: 0px;, It doesn't work. Like why? Some one please help me
You only need to change the order of 2 css files (styles.css and normalize.css)! The order matters! (Now the h1 rule in normalize.css (h1{font-size: 2em;margin: 0.67em 0;}) override your rule from styles.css)
You are injecting normalize.css after your own styles, that's why "margin:0px" is overriden by "margin: 0.67em 0;" rule from normalize.css.
All you need to do is to include normalize.css first.
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
I am currently working on developing an HTML and I am using Bootstrap to make it more mobile-friendly. However, the bootstrap font sucks and I am looking to override it and replace it with a better looking font. I am posting the head of my HTML file. It looks like this:
<head>
<title> Connotate Engineering </title>
<meta name=viewport content='width=700'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
And this is what my CSS looks like:
body{
font-family: 'Arial';
font-size: 12px;
}
#images{
font-family: 'Arial';
text-align:left;
font-style: regular;
letter-spacing: 0;
line-height: 1.5em;
text-decoration: none;
word-spacing: 0;
}
#images a{
margin:0px 20px;
display:inline-block;
height: 100%;
text-decoration:none;
color:black;
font-family: 'Arial', serif;
}
.caption {
width: 200px;
text-align: center;
}
#media screen and (max-width:480px) {
#sidebar { display: none;}
}
Change the link positions in your <head> from this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
To this:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ConnotateEngineering.css">
The order matters, you want your final changes to be below all others.
And as Arham pointed out, if you put in an inline style, it will have a higher priority than the bootstrap.
If you want the whole page to have that font then you should either remove all font rules in all elements then add body { font-family: 'Indie Flower', cursive; } or include all elements you want to have that font like:
body, #images, #images a {
font-family: 'Indie Flower', cursive;
}
One way is to add the style attributes within the desired tag itself.
ie: (you want to override a certain style on a div)
<div style = "font-family: Arial">