Google Font Api not displaying on server but do locally - html

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

Related

Font Awesome not working with HTML5 UP template

I'm trying to create a website using a template from HTML5 UP (Arcana). The structure of the template looks like this:
/assets
/assets/css
/assets/fonts
/assets/js
/assets/sass
/index.html
When not modifying anything, the template works as intended and all icons from Font Awesome are shown correctly (like here).
Now I want to structure my sites like this:
/assets
/assets/css
/assets/fonts
/assets/js
/assets/sass
/foo/page.html
/bar/page.html
/index.html
Now when I open /foo/page.html the style and Font Awesome icons are missing because the references to them are messed up.
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js"></script>
I tried to fix it like this:
<link rel="stylesheet" href="../assets/css/main.css" />
<script src="../assets/js/main.js"></script>
Now the style works again, but the Font Awesome icons are still shown as boxes.
I also tried including Font Awesome like this:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
However, the icons still don't work.
Changing
to
doesn't work either.
Update: For some reason this doesn't work in Firefox, but it works in MS Edge without a problem.
old
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
new
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

Issue with #import in Chrome but not in live preview

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>

Can't get font family to show on live website

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.

My CSS will only link to my HTML page if I use the whole pathname! Why?

If I try and link my CSS to my HTML page with either cssstyle2.css ||fifastream1.0/cssstyle2.css or even %fifastream1.0%/cssstyle2.css it wont display any of the CSS on the webpage. (FF, IE, Chrome). I've uploaded my CSS page to stackoverflow before and apparently its fine.
Obviously its no good if I can only get my webpage to 'properly' work on my drive. Soo any idea's why FF, IE or Chrome cant pick up my CSS?
Been working on this for a few weeks now, as a complete beginner. Would be great help if someone could find the answer! I've searched and tried everything.
This is the link in the of the HTML (if this helps at all)
<!DOCTYPE html>
<html>
<head>
<link href="C:///*****/******/Desktop/FifaStream1.0/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
<title> Fifa Stream </title>
</head>
<body>
When everything is in the same foldre you should use the following:
<link href="cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
When you're CSS file is in a different folder use:
<link href="folder/cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
If your CSS file is one directory above the html file then use:
<link href="../cssstyle2.css" rel="stylesheet" type="text/css" media"screen"/>
To have relative referencing, ur CSS needs to be in at least somewhat referential place. for example, if the page is in Users/whatever/index.html, your CSS would be in Users/whatever/css/style.css. Then your reference would be to "css/style.css"
A quick reference guide:
<!--
./filename or filename = same folder as page location
../filename = folder above that of page folder location
/filename = root folder of project
-->
If your CSS file is in a completely different location than your page file, it can't possibly be found unless you provide the full path as you had to.

Debugging Google Web Fonts

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!