I've watched some videos and copied what they did but it's not working. I have my file in the same folder as my documents. Ugh, the site wants me to add more "details" or it won't let me post. I had my html and my css pages separated but it put them together. If you know how feel free to break them apart.
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
}
.potato {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
font-family: 'lazyspringday';
}
.p1 {
font-family: 'lazyspringday';
}
body {
margin: 0;
padding: 0;
font-family: 'lazyspringday', serif;
}
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format:('truetypefont');
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left
}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right
}
p {
padding-top: 25px;
text-align: left;
}
.potato {
color: #00b8e6;
font-size: 15px;
font-family: 'lazyspringday';
font-weight: 100;
}
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="british-shorthair-3055340_1920.jpg" width: "400" height="400" class="float-img">
<p class="potato">
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute cat themed foods and drinks in a relaxing environment. Spend some quality time playing with some feline friends. Enjoy watching the cats have fun in an environment made just for them.
All cats will be adoptable and provided by the local shelter. Cat Corner Cafe will also have fun events like cat yoga, art with cats and game days. Come by yourself, with your meetup group or have your next birthday party here! We look forward to seeing
you. To be alerted when we open please sign up with your email on our homepage.
</p>
first of all define #font face on the top and remove ":" from format and rename turetypefont to truetype
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format('truetype');
}
Hope this will help
first and foremost, put your fonts in fonts folder seperately and css stylesheet in css folder, then include/import fonts in your css at top like this.
#font-face {
font-family: 'lazyspringday';
src: url('../fonts/lazyspringday.eot');
src: url('../fonts/lazyspringday.eot?#iefix') format('embedded-opentype'),
url('../fonts/lazyspringday.woff2') format('woff2'),
url('../fonts/lazyspringday.woff') format('woff'),
url('../fonts/lazyspringday.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
we use woff and woff2 for using fonts in web.
you can also use web fonts generator to generate webfonts just uploading your .ttf file there.
In the head tag of your html file (index?) place something like this:
<link href="(your file location)" rel="stylesheet">
After importing the font you can do it in several different ways. I'd recommend you to use a body tag that would contain everything on that html file.
If you chose to use the body tag, simply add this line to your css file:
body {
font-family: 'Montserrat', serif;
}
Example:
Use Google Fonts. https://fonts.google.com
Then copy this code into the <head> of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Then use the following CSS rules to specify these families:
font-family: 'Roboto', sans-serif;
Related
I am working on a personal website as a beginner and I have the font available to me. When I add it with a font face on my hero banner, it shows up weirdly. I don't know if that's because the font just won't work with the site or not.
Here is what I currently get:
The font should be in the middle and left of the banner, and the text should be white. I tried different variations of font-face and I tried adding styles to space out the letters. I tried another response from this post.
However, that didn't work. Any suggestions?
My hero code and CSS:
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: black;`enter code here`
}
img{
opacity: 50%;
}
.croppedbanner {
width: 100%;
height: 200px;
object-position: 0% 39%;
object-fit: cover;
}
.container{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
div.hero-text{
font-family: khFont;
letter-spacing: 5px;
font-size: 55px;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
transform: translate(0px, -200px);
margin-left: 10px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: red;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
EDIT 1: Ok so I managed to get different colors that aren't black and white. But I kind of need those two colors. The colors are also different between browsers. Google Chrome - is in Light Mode and Opera GX - is in Dark Mode. The dark mode one I can't turn off.
Here's a screenshot of the website with both browsers.
Opera:
Chrome:
I (think) I am holding the site locally on my pc, as I only see an IP address at the bar. So I can't share the site.
Additionally, the code was edited to show in its entirety. This is just for the hero banner, so the HTML will be small, and I did some extra steps for the banner too. If you want to throw in suggestions for that, feel free :)
i think i can give a helpful solution for you.
First, let me try to show you about how to use css selector while coding a web page.
There was more than one selector that we can use.
For this case, i should recommend you to using class selector, or maybe child selector.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
/*With child combinator selector*/
div > .hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For the documentation of using selector, you can read more in this link.
And the second is, let's start to edit the class to fixing the output in the interface.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
display: block;
margin: 0 auto;
text-align: center;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For more details, you can read in these documentations:
Display Docs
Text Align Docs
Margin Docs
Thank you
It's been resolved! Turns out, in Opera, you can enable "Force Dark Pages" which I thought it would change when I clicked the setting on the page. When working with local sites, you wont be able to change the setting on the page itself, you have to go into the browser settings.
Thanks everyone for your help! :)
I have below for my code. It is posting it on my entire webpage instead of just on that image and I can't quite figure out why.
dt {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
dd {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
#Wrapper {
width: 700px;
text-align: left;
margin: auto;
background-color: #F7EED7;
}
#imgtop {
width: 700px;
}
#leftnav {
background-color: #F7EED7;
padding: 10px;
float: left;
width: 150px;
}
#leftnav a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:visited {
font-family: Arial, Helvetica, sans=serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #660066;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
background-color: #CCCCCC;
}
body {
background-color: #FFFFFF;
}
#maintext {
background-color: #F7EED7;
float: right;
width: 500px;
padding: 10px;
}
h1 {
color: red
}
<!doctype html>
<head>
<title>Cafe Townsend: Wine Tasting Terms </title>
<link type="text/css" rel="stylesheet" href="cafe.css">
<meta charset="utf-8">
</head>
<div id="leftnav">
<p>Home</p>
<p>Menu</p>
<p>Location</p>
<p>Restaurant Infomation</p>
<p>Restaurant Review</p>
<p>Special Events</p>
<p>DVD</p>
<p>
<a href="wine-list.html">
<img src="../images/wine_header.jpg" alt="Wine Ad" width="150" height="100" border="0" /></a>
</p>
</div>
<p>Greeting: "Hello, World!"</p>
<h1>Knowing your wines</h1>
<dl>
<dt>Acid, acidity</dt>
<dd>The tart (or in excess, sour) quality that wine's natural acidity imparts and that gives the wine a sense of body and structure. Required for proper balance; too much or too little constitutes a flaw.</dd>
<dt>Almond</dt>
<dd>A light bitter, nutlike quality sometimes noted in Italian white wines.</dd>
<dt>Anise</dt>
<dd>Faint licorice, a pleasant element in some Spanish reds; may indicate, however, that the wine has been artificially acidified, a practice that may improve short-term enjoyment but tends to make wines that cellar poorly.</dd>
<dt>Attack</dt>
<dd>A technical term for the first impression the wine makes as it reaches your palate, distinguished (in time sequence) from "middle" or ""mid-palate"" and "finish" or "aftertaste."</dd>
<dt>Bouquet, bottle bouquet</dt>
<dd>As a technical term, the smells that develop with age in the wine bottle, as opposed to "aroma," the smells associated with the fruit. I have little use for distinctions this narrow and try to avoid using them in my wine notes.</dd>
<dt>Earthy</dt>
</dd>Generic term for a range of aromas and flavors associated with organic qualities like "barnyard," "forest floor," "merde," and "tree bark." May be associated with brettanomyces (see above) but can also result
from oak aging or the nature of specific grapes. Mourvedre, for instance, imparts a characteristic earthy aroma. Again, not necessarily a fault, but "earthy" wines tend to be controversial, and a little bit is usually enough.</dd>
</dl>
</body>
</html>
So for some reason my html is not getting the dt and dd and changing the colors from normal to red. I dont get it, it goes to file (it should) but is doing nothing. have tried checking file names, making sure the paths are correct (they are). They are in the same exact folder.
Take out the weight: bold; This is breaking the CSS below. It should be font-weight:bold.
font-dd {font: Arial, Helvectica, sans-serif;
size: .9em;
font-weight: bold;
color:red;
line-height: 2em; }
It is because you are trying to use a value that is not a valid color (dark red (#6b1101) is not correct. Find the available value types here https://www.w3schools.com/cssref/pr_text_color.asp
I'm new to HTML and CSS. The following lines I wrote in the Atom text editor are not properly shown in the preview. The font is not changing from the default Times New Roman. Even after adding extra font-packages. However, I did not use any fancy kind of fonts. Is their something wrong with my code instead?
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Text</title>
</head>
<body>
<p> This is a paragraph. All of the text on this page has a font size of 16 pixels.
This paragraph, like most of the text on this page is black and uses Tahoma font.</p>
<ul>
<li id="point1">This list item uses the Verdana font and color orange.</li>
<li id="point2">This list item uses the Impact font and the color red.</li>
<li id="point3">This list item uses the Georgia font and the color pink.</li>
<li id="point4">This list item is black and uses the Tahoma font. It also contains a link to
<link href="http://www.spiced-academy.com"></link>
</ul>
<p>This is another paragraph. Each item in the list above has a top and bottom
margin of 10 pixels.</p>
</body>
</html>
I'm not sure that is the problem but try to add the attribute type on the link css stylesheet:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Well, in the code preview window I see it works (Chrome, Mac). Try to clear your browser cache or write font-family: Tahoma !Important;
Make sure that your CSS page is saved as stylesheet.css because this is what is referenced in your code.
Check that your HTML file and CSS file are saved in the same directory.
For testing, you could have the CSS in a <style> tag, before even trying to link to a stylesheet. You can place this in the <head> tag. Then tackle the external stylesheet once you can successfully see the styles here.
<head>
<style>
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
I'm new to SVG and have been putting numbers in text tags for a week or two with no issues. It seemed straightforward. Now, strangely, I'm having an issue in which, no matter what numbers I put in, there is a dip in the second number.
Here is a pic to show you what is happening. The number "63" is supposed to be all on the same plane with itself, though a bit below the "This Week" designation. Instead, the '3' is dipping down lower. Pic of my problem.
My code:
<div class = "chartbox">
<div class = "svgcontainer" >
<svg class = "chart" width="590" height="440" role="img">
<g class = "bigbox">
<text x="346" y = "35" class = "blurbhed">This Week </text>
<text x ="491" y ="44" class = "blurbdeck"><?php echo round($kms_for_table[0]);?></text><text x ="540" y ="48" class = "blurbkm"><?php echo "km";?></text>
</g>
</svg>
</div>
</div>
The CSS:
body { background-color: #1C1816;
font-family: Raleway, Gotham-Rounded, Arial , sans-serif;}
.blurbhed {
font-size: 1.5em;
font-weight: 600;
fill: #650a5d;
letter-spacing: .3px;
}
.blurbdeck {
font-size: 2.7em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;
}
.blurbkm {
font-size: 1.3em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;
}
.svgcontainer {
display: block;
position: relative;
border: 10px solid purple;
background-color: lightyellow;
margin-left: 10px;
height: 453px;
width: 630px;
margin-top: 0px;
margin-bottom: 20px;
text-align: center;
margin-right: 50px;
}
.chartbox {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
width: 800px;
margin-bottom: 10px;
padding-top: 20px;
}
The same problem happens wherever I move the text around the svg element. It occurs with a variety of fonts, and with different numbers. It happens whether I just have it echo the number or have it generated by the code from my model. I also tried making a completely new text element in a different spot, and the same weird dip in the second number occurs.
I'm sure this is really simple, but I've been fiddling with it far too long and am hoping someone can help me out. Thank you!
This is definitely down to the design of the font being used.."Raleway".
h1 {
font-family: 'Raleway', sans-serif;
font-size: 72px;
text-align: center;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 72px;
text-align: center;
}
* {
margin:0;
}
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>0123456789</h1>
<h2>0123456789</h2>
I can only suggest using a different font..but you'd have to test each for the right look.
There's a proper solution for this that allows you to continue using Raleway:
You need to do two things:
Add CSS instructing the browser to use the lining-figures
Avoid pre-optimised font files (as served by Google Fonts.)
The CSS:
body {
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";
}
Alternative CDN (Brick):
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Raleway:400">
The problem with Google Fonts is that it minimises font download size by removing 'unnecessary' glyphs and meta-data. In particular in this case, it removes the lining-nums variation of figures from Raleway. (You can try adding &subset=all to a Google Font URL to circumvent this, but this doesn't appear to be reliable.)
Im trying to use a custom font using #font-face and for some reason its working on some places and not in others.
CSS
This works fine
#hero-header .title {
color: #fff;
padding-top: 225px;
font-size: 30px;
font-family: 'Populaire';
text-align: center;
font-size: 64px;
}
This doesn't
ul#reviews h2 {
font-size: 30px;
font-family: 'Populaire';
}
Notice the Hero area using a custom font but unable to use it further down the page, ie: the review titles.
Your CSS is:
#font-face {
font-family: 'Populaire';
src: url('font/Populaire.otf');
}
But, the font is actually in /beta/styles/css/fonts/Populaire.otf, please update your CSS to:
#font-face {
font-family: 'Populaire';
src: url('/beta/styles/css/fonts/Populaire.otf');
}