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!
Related
I'm following the tutorial on the w3school for HTML and I'm stuck at the external linking part where you can include in your HTML page the CSS file you with the stylesheet defined by you with the <link> tag.
I have tried:
adding in the correct way the arguments rel, href, type, or media
clearing the cache from the browser, maybe it saved some old code but it was not the case
creating another .css file to try and code different style solutions
index.html
<!DOCTYPE html>
<html lang="it">
<head>
<style>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</style>
</head>
<body>
...
</body>
</html>
whiteonblack.css
body {
background-color: black;
color: white;
}
The body background should be completely black (I hate bright websites, even if this is for testing and with awful and old yet working (but not so much) HTML) and the general text to be white. Also some love from the community for DIY students :).
It defaults to the reverse, white bg and black text. God the hate.
The link tag belongs in the head tag directly. Do not nest it in a style tag; that's meant for actual CSS.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
Remove the style tag. Use below CSS code.
<head>
<link rel="stylesheet" href="whiteonblack.css" type="text/css" media="screen">
</head>
I am currently creating a HTML document from scratch. I am using MAMP to host the site however when I link to a google font it doesn't work.
When I download it do I link it to my css file? and if so how do I call it?
Thanks
Its better to customize the font in your site, and for customization you need to download fonts in four formats (webfont.eot, webfonts.svg, webfonts.woff, webfonts.ttf) and then use them from CSS. Follow this url:
https://css-tricks.com/snippets/css/using-font-face/
Check this example for how to use online fonts.
<html>
<head>
<style>
#font-face{
font-family:fontName;
src:url(https://fonts.gstatic.com/s/varelaround/v6/APH4jr0uSos5wiut5cpjrugdm0LZdjqr5-oayXSOefg.woff2)
}
body{
font-family:fontName;
font-size:2em;
text-align:center;
}
</style>
</head>
<body>
<h1>Title</h1>
</body>
</html>
Rather than downloading them and serving them 'locally' I'd suggest to check what the error might be and use the fonts delivered via Google API. They provide a getting started guide, so you can start with a basic example like the following and work your way up to what you need:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
.fancy {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
Example for using
<span class="fancy">Tangerine</span>
</body>
</html>
You can also browse all available fonts here and let google generate a custom <link rel="stylesheet" ...> tag for you which serves only what you explicitly specified.
I have a problem with a font I installed on my computer that I want to apply to HTML5 / CSS3.
How my question differs from its possible duplicate: it explicitely asks what to put in the .html file, a question that was unaddressed in the duplicate question.
Update after problem solved:
1) The <link href=....> line must NOT be included in the .html file
2) The .woff font file must be in the same directory as the .css file.
This is my minimal working CSS:
#font-face{
font-family: Reef;
src: local('../Fonts/Reef/reef-webfont.woff'), url('../Fonts/Reef/reef-webfont.woff') format('woff');
}
body, h1, h2{
text-align:center;
font-family: 'Reef', monospace;
}
And this is my minimal working HTML file:
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/
libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript"></script>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" href="stylesGrilcheeserie.css" type="text/css"/>
<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
<title> Grilcheeserie </title>
</head>
<body>
<h1>La Grilcheeserie</h1>
</body>
</html>
Whatever I do, my page appears with its backup font, monospace, not Reef.
My question is: how do I correctly reference the font source in the html? As far as I can tell from searching answers, my css is supposed to be right.
I'm using Firefox on Windows 10.
<link href='../Fonts/Reef/reef-webfont.woff' rel='stylesheet' type='text/css'>
you cannot reference a font like this.
#font-face{
font-family: Reef;
src: url('reef-webfont.woff'), url('reef-webfont.woff') format('woff');}
put your fonts in the same directory where this style file is located
From my understanding, your local source should just display the name of the font as it's installed on your machine. The url source should point to where the font file is in relation to your CSS file location:
local('Reef'), url('/Path/To/My/Font/reef-webfont.woff')
I'm very new to web development, so I apologize if this is a silly mistake, but I can't seem to get a font that I've embedded in my CSS stylesheet, Fonarto, to appear on my webpage. I'm using Brackets to create the website, viewing it actively with the live preview, so I wonder if that has a role in creating this issue. Given that I'm not experienced with CSS, I used fontsquirrel.com to automatically generate code that would add my font in using an #font-face. This is what it generated, with a few tweaks (the font is stored in resources/fonts/fonarto/regular)
#font-face {
font-family: 'fonarto_regular';
src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot');
src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot?#iefix') format('embedded-opentype'),
url('resources/fonts/fonarto/regular/fonarto-webfont.woff2') format('woff2'),
url('resources/fonts/fonarto/regular/fonarto-webfont.woff') format('woff'),
url('resources/fonts/fonarto/regular/fonarto-webfont.ttf') format('truetype'),
url('resources/fonts/fonarto/regular/fonarto-webfont.svg#fonartoregular') format('svg');
font-weight: normal;
font-style: normal;
}
To add the style to the body, I'm doing what would be expected, though I haven't provided any fallbacks (should I be doing so, and if so, how?).
body {
font-family: 'fonarto_regular';
}
The code for my index page is as follows:
<!DOCTYPE html>
<html>
<style rel="stylesheet" type="text/css" href="stylesheet.css"></style>
<script>
</script>
<head>
</head>
<body>
<div id='index-head'>
<h1>Site Name Here</h1>
</div>
</body>
</html>
That is literally it thus far. And though, as I mentioned, I haven't added any fallbacks or done anything complicated, the header text, Site Name Here, displays in serif Times New Roman in the live preview.
What am I doing wrong?
Note that I've already looked at all of these posts on Stack Overflow, but none has helped; nor has w3schools. Also keep in mind that the live preview runs an instance of Chrome.
There are a few things you can check.
First of all, look in the inspector and see if you properly link to the fonts.
Also you should link to the css file this way:
<link rel="stylesheet" href="stylesheet.css">
You also have linked to the file outside your head tags.
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
</body>
</html>
try adding the entire URL for the fonts.
Check if that works.
Download #font-face of Fonarto from here, then add index.html with follow code on the same folder with fonts and stylesheet.css.
HTML
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<div>Hello</div>
</body>
</head>
</html>
Also add to stylesheet.css
body {
font-family: 'fonarto_regular';
}
For me it's working fine!
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.