So, I'm using a font-face webkit from fontsquirrel and I've put the stylesheet and all fonts in a folder called "Fonts" which is contained in my HTML folder with my Index.html file. I'm using Dreamweaver and iPage and I've put the new files and synched them, but they aren't showing on other computers on the live page like they should. They work in my preview obviously. Here is my code:
<link rel="stylesheet" href="Fonts/stylesheet.css" />
What about:
<link rel="stylesheet" href="Fonts/Stylesheet.css" type="text/css">
And are you using css to implement the tag, for example:
<style>
p {font-family: 'stylesheet', sans-serif;}
</style>
Is it possible to edit out the font tag in iPage and replace it with a text tag like
<p></p>
because
<font face="stylesheet"></font>
is deprecated, but may still work in preview mode.
Related
I'm creating a simple HTML/CSS based website for a certain assignment and I've run into a smaller issue.
I had around 500 lines of code in my main.css file and it was getting hard to read and scroll through, so I've decided to split it into several .css files and link all of them into one with the #import function.
Now then, I've still got the main.css file in my main folder, and inside it the following:
#import url('/css/first.css')
#import url('/css/second.css')
.
.
.
#import url('/css/last.css')
I'm using Brackets as an editor, and while everything works perfectly with Brackets live preview, apparently, when I run the page manually via Chrome (by double clicking the index.html), the CSS doesn't appear at all.
Yes, /css/ is the folder inside the main folder containing all other .css files. And yes, the live preview from Brackets also uses Chrome.
The #import rule could calls in multiple styles files. These files are called by the browser or User Agent when needed e.g. HTML tags call the CSS.
try this below code
#import url("../css/first.css");
#import url("../css/second.css");
#import url("../css/last.css");
Or you can add your css by using link tag in html between tag
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="../css/first.css" type="text/css" />
<link rel="stylesheet" href="../css/second.css" type="text/css" />
<link rel="stylesheet" href="../css/last.css" type="text/css" />
</head>
<body>
</body>
</html>
I am trying to build a simple website in Sublime Text Editor 2, however, my CSS file won't link to my HTML file and therefore printing plain text. My HTML code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Christopher Olson</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
As far as I know, the last line is supposed to link the CSS file.
This is part of the CSS that I have:
body, input, textarea
{
font-family: 'Open Sans', sans-serif;
line-height: 1.85em;
color: #888;
font-weight: 300;
}
Any ideas to fix? Please help
EDIT: I have the tags, I just ran out of room to post it
Your path your CSS file is probably wrong. If you're sane your CSS directory is in the webroot so your <link> should probably look like this:
<link rel="stylesheet" href="/css/style.css" />
Definitely is your link's href incorrect.
The link to your css files will be relative to the location of your html file. If both are int the same directory, then just include the name of the css file, if it is in a folder named "css" and that folder is in the same directory as your html file then you do "css/"
I think your href is wrong
You can tried using a absolute url just like
<link rel="stylesheet" href="http://..../css/style.css" />
You can download a very nice plugin for firefox called "firebug" it show you when some resource can't be reach
It will 100% work if your "call" link is placed within the html file. I'm having the same issue, my only work around is to include the call links in both the .html and .css ball ache, but it works
I am trying to use a Google Font, I have listed the font in the head of my html like this:
<link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel="stylesheet" type="text/css">
Then I have the font listed in the CSS code:
font-family: 'Monsieur La Doulaise', cursive;
When I preview the page from Dreamweaver it displays fine, but when I add the file to the server it does not. Viewing in Chrome.
I have managed to get it working on Fiddle...
See: Your working code on fiddle
What I did was end the link with a /> like below:
<link href='http://fonts.googleapis.com/css?family=Monsieur+La+Doulaise' rel="stylesheet" type="text/css" />
A link is like a div and needs to be closed at the end
I'm learning CSS/HTML and am trying to import a simple css class into the html document, but something appears to have gone awry. Here is Logo.css:
.logo{
color:rgb(255,232,57);
background-color:rgb(0,0,75);
font:ChopinScript;
font-size:96pt;
}
and my html document:
<head>
<link rel="stylesheet" href="Logo.css" type="text/css">
</head>
<div class="logo">
<p class="logo">This text should look like my logo!</p>
</div>
<img src="404-tumblebeast.jpeg" align=center valign=center />
The image shows up fine in Safari, but the text is just generic text. Does the link tag not import as I thought? How would I do the equivalent of #import or #include, if isn't taking care of that?
end the link tag (see below: the /> instead of >).
<link rel="stylesheet" href="Logo.css" type="text/css"/>
Verify that the Logo.css is in the same directory as the html file or use the correct path to the Logo.css file. Just in case you are doing this, you can't put the css under the WEB-INF directory.
You only need the class on the div element or on the p element, not both.
Edit:
I was poking around and found some info about embedding fonts in a page: http://jonrohan.me/guide/css/font-face/
i am think i am using similar code i used b4 but seems like the fonts aren't loading
<html>
<head>
<script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></script>
<style>
h1, h2, h3 { font-family: "Yanone Kaffeesatz"; color: red }
</style>
</head>
<body>
<h1>This is some text</h1>
</body>
</html>
You need to include the font using a <link> tag.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold">
According to Google Webfont page the correct notation is:
<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold' rel='stylesheet' type='text/css'>
I've discovered another issue that can cause the fonts to not load. If you define a font as
family=Arapey:italic
then you need to use the css, like so
font-family: 'Arapey';
font-style:italic;
if you leave out
font-style:italic;
then the font will not load in Chrome (and possibly other browsers?). Although it will work in Firefox without it.
You have set the CSS file as a Script file by mistake.
<script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></script>
Should be
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css">
you can also put this in your .css file
#import url("http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here");
you won't end up cluttering up your HTML with all these silly link tags. google shows this under 'advanced'.
watch out if you're using LESSCSS because # defines a variable. let me know if there's a way to escape that - I couldn't find one!