So I've checked out another question being answered on this and attempted this on my own. I want to use the Lobster two font and I'm not sure what I'm doing wrong.
Here's my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Cogna</title>
<link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>
<table id="site">
<tr>
<td id="Cogna">Cogna</td>
<td style="border: 2px solid black; border-collapse: collapse;">a</td>
</tr>
<tr>
<td style="border: 2px solid black; border-collapse: collapse;">a</td>
<td style="border: 2px solid black; border-collapse: collapse;">a</td>
</tr>
</table>
</body>
</html>
CSS:
#font-face {
font-family: 'Lobster Two';
src: url("//fonts.googleapis.com/css?family=Lobster+Two");
}
#Cogna {
font-family: 'Lobster Two', Times, serif;
font-size: 5em;
border: 2px solid black; border-collapse: collapse;
padding: 18pt;
width: 20%
}
#site {
border-collapse: collapse;
width: 100%;
}
I know I've asked it to replace with Times New Roman if it can't find the font, but I really want to use the font.
Any help would be great. Thanks.
Edit: this is the exact link to the font: https://fonts.google.com/specimen/Lobster+Two.
Referencing a link to the font is fine, but downloading the font is preferable. I did mine according to this answer.
Go to https://google-webfonts-helper.herokuapp.com/fonts
Pick the font(s) you want and download the files
Drop in the generated CSS from the page, and reference the CSS file in your HTML like so:
<link rel="stylesheet" href="path/to/styles.css">
Google is friendly enough to give you a step by step guide on how to use their fonts.
More details on their wiki
2 Method in order to add Google font :
Standard :
Add this in the head of your html file <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
CSS:
Apply the family to which ever elements you choose in your style.css file such as:
h1 {
font-family: 'Lobster', cursive;
}
I think you need to change this
src: url("//fonts.googleapis.com/css?family=Lobster+Two");
into thissrc: url("http://fonts.googleapis.com/css?family=Lobster+Two");
Try including the font using this:
#import url('https://fonts.googleapis.com/css?family=Lobster+Two');
instead of
#font-face {
font-family: 'Lobster Two';
src: url("//fonts.googleapis.com/css?family=Lobster+Two");
}
use this in your html file: <link href="https://fonts.googleapis.com/css? family=Lobster+Two" rel="stylesheet">
add this in your css where you want to apply the font there
font-family: 'Lobster Two', cursive;
try this .. good luck :)
In the style sheet use
#import url('https://fonts.googleapis.com/css?family=Lobster+Two');
Then where you want to apply the font:
font-family: 'Lobster Two', cursive;
Related
I have the Inter font. I got it from Google Fonts. But It can't be shown. Seems like arrow doesn't see the font. You can see it.
Instead of the same arrow on Google Inter Font page
css:
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Inter', sans-serif;
}
</style>
</head>
html:
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
What is wrong?
if you want to use custom fonts you should copy these fonts to your project folder, after that use this code of CSS to add them to your document
#font-face {
font-family: Inter;
src: url(sansation_light.woff);
}
replace this src with your font address you copy in your project
just use this code:
It's work for me
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">
<style>
body{
font-family: Inter, sans-serif;
}
p {
font-family: verdana;
font-size: 20px;
}
div{
font-family: Inter;
font-weight: 400;
font-style: normal;
font-size:x-large;
}
</style>
</head>
<body>
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
</body>
</html>
im just beginner at CSS, so i have a problem i wrote a simple code, IE shows correctly, but Firefox didint, how can i solve this problem? whats wrong with the code? Thank you. As i say, im beginner so sorry for stupid questions. :)
here is the code
h3 {
color: "blue";
font-size: "20px";
font-family: "verdana"
}
p {
color: "white";
background: "blue";
font-family: "helvetica";
text-indent: "1 cm"
}
<html>
<head>
<title>Pakopinių stilių (CSS) naudojimo pavyzdys</title>
<link rel="stylesheet" href="stiliai.css" type="text/css">
</head>
<body>
<h3>Trečiojo lygio antraštė</h3>
<p>Naujas pastraipų stilius.</p>
</body>
</html>
First is CSS I called it stiliai.css, secon is html called index.html
Remove the quotes wrapping your colors. Quotes are not required while specifying colors.
Change
h3 {color:"blue"; font-size:"20px"; font-family: "verdana"}
to
h3 {color:blue; font-size:"20px"; font-family: "verdana"}
Your issue is with your use of " within your css. These are not needed:
h3 {
color: blue;
font-size:20px;
font-family: verdana
}
p {
color: white;
background: blue;
font-family: helvetica;
text-indent: 10px; /*cm are not commonly used in css*/
}
<html>
<head>
<title>Pakopinių stilių (CSS) naudojimo pavyzdys</title>
<link rel="stylesheet" href="stiliai.css" type="text/css">
</head>
<body>
<h3>Trečiojo lygio antraštė</h3>
<p>Naujas pastraipų stilius.</p>
</body>
</html>
Your use of " would only be necessary when you're using the likes of html.
They are not used in css files.
Hello I am just getting started with HTML and CSS but having a weird issue.
If I use border:0; and padding:0; I still get a white space all the way around my div. I can fix the issue by doing margin:-8; but that doesn't seem right to me. I am using Dreamweaver if that matters. thanks!
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar">Home - Introduction - Stakeholders - Implementation Plan - Proposal - Training</div>
</body>
</html>
and the CSS:
#charset "utf-8";
#navbar {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
font-weight: bold;
text-decoration: none;
background-color: #CCC;
height: 25px;
text-align: center;
border: 1px solid #000;
margin: 0px;
}
I figured it out thanks!
Adding a body tag in my CSS and setting the margins to auto fixed this.
I am trying to embed css style sheet in one of the html but its not working.Can anyone help me out ,your help would be appreciated.
Following is the cide which i have tried.
Css:
<head>
<title>Embedded Style Sheets</title>
<style type=”text/css”>
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
-->
</style>
</head>
HTML:
<html>
<head>
<title>Embedded Style Sheet </title>
<link rel=”stylesheet” type=”text/css”
href=”D:\SelfStudy\HTML\16-Embedded.css” />
</head>
<body>
<p>This page is using an emebedded style sheet... </p>
</body>
</html>
Remove all HTML markup from the CSS file. It should contain only what you now have between <!-- and --> (without those constructs). In the HTML document, fix the link tag as follows, assuming that the CSS file is in the same directory:
<link rel="stylesheet" type="text/css"
href="16-Embedded.css" />
Your .css file should just be the styles like:
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
The css file shouldn't have the html tags or you can add the styles to the head of the html file where it is being used.
http://www.w3schools.com/css/css_howto.asp
I think you are trying to embed an external CSS source file. You know we can embed css in html in three ways and they are:
1. External
2. Internal and
3. Inline
I think here you are trying to embed the first one.
To do so firstly you have to create a file with .css extension and it may be something like you mentioned 16_embeded.css. In this file you have to put just the CSS code not any HTML tags. That means you should put just the following code into your 16_embeded.css file.
p { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: #000000; }
Now you have to create another file with the extension .html and then put the HTML code portion you mentioned above in this file(.html). Hope it's working well.
Please check the href portion where you are giving the file name is correct or not. Here I should mention that your HTML code portion is correct if the css file path is correct.
Thanks
<!DOCTYPE HTML>
<HEAD>
<style type="text/css">
#font-face { font-family: Blah; src: url('../fonts/WillyWonka.ttf');
}
span.header {
font-family: 'palatino linotype', palatino, serif;
font-size: 36px;
font-weight: bold;
font-variant: small-caps;
color: white;
text-decoration:none;
padding: 20pt;
}
span.content {
font-family: 'Blah', arial, serif;
font-size: 36pt;
}
#contacttable {
position:absolute;
left:20%;top:15px;
}
#contacttable td {
position:absolute;
}
</style>
</HEAD>
<BODY bgcolor="black">
<Table id="contacttable">
<tr>
<td>
<span class="header"> Title of Section </span>
<hr />
<br><br><br>
<span class="content"><font color="red">l</font><font
color="orange">o</font><font color="yellow">w</font>
...
for some reason changing the font has made it not work. any help? (source http://theriverbendstreetbeach.org/nads/misc/showyou.html )
Remember that CSS url paths are relative to the CSS file (or in this case the html that declares the CSS).
By saying url(../fonts/WillyWonka.ttf) your are instructing the browser to look one directory up from the HTML, and then down into the fonts folder:
http://theriverbendstreetbeach.org/nads/fonts/WillyWonka.ttf
And it would seem your font file is actually located at:
http://theriverbendstreetbeach.org/fonts/WillyWonka.ttf
So for this particular HTML file, I would change the url path to url(../../fonts/WillyWonka.ttf);
As posted by Shad in comments, your font is missing from http://theriverbendstreetbeach.org/nads/fonts/WillyWonka.ttf.
You can easily debug these kinds of problems yourself by using a tool such as Fiddler: http://www.fiddler2.com/fiddler2/
It is a proxy that shows you all of the requests, and their status codes. 404s show up in nice red.