Downloading Google fonts to run it locally - html

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.

Related

LESS CSS CDN: ERR_INVALID_URL

I'm new to Less, so I'm assuming that this is my fault and not the CDN.
I've got a pretty straight forward html document (less.html)
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" >.
</script>
</head>
<body>
<h1>This is a test</h1>
</body>
</html>
I also created a basic Less file (styles.less)
#color: red;
.header {
color: #color;
}
h1 {
color: #color;
}
The HTML renders with no issue, however I'm receiving an error in the console: ERR_INVALID_URL. Thus the CSS isn't working.
I copy and pasted the link to the CDN directly from Lesscss.org, so I'm assuming it's correct. Any idea why I'm getting that error code in the console?
In your screenshot you can see that the file is being called as a local file which obviously doesn't exist in your computer. Change your file url to "https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" while you are working locally.

CSS Embedded Font Does Not Appear On Webpage Using Brackets

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!

Font on the server doesn't show on local HTML file

I put the ttf font file on the server and used the following code in CSS
#font-face {
font-family: "fontname";
src: url("http://www.mywebsite.com/Fonts/fontname.ttf");
}
body {
font-family: "fontname", sans-serif;
}
In the local HTML file I wrote:
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="cssfile.css">
</head>
<body>
body
</body>
</html>
I tried different ttf files on the server but none of them worked. But if I put the font in the same directory as the HTML file on the computer it shows up. Does anyone know why? Thanks.
Are there any console errors in the browser? There may be a cross site scripting issue at play.
Here's an article about cross-domain fonts if so which should explain in more detail. Basically, your webserver needs to add this header to the font response:
Access-Control-Allow-Origin: *
http://davidwalsh.name/cdn-fonts

Problems linking stylesheet to html doc

I'm trying to teach myself html/css. I can't get Aptana to recognize my css stylesheet.
Here's what I have for my html file (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Josh's Worthwhile Practice</title>
<meta name="author" content="Joshua Soileau" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<!-- Date: 2012-07-11 -->
</head>
<body>
<div id="nav">
<ul>
<li><h4>Solutions</h4><p>what we do</p></li>
<li><h4>Work</h4><p>what we've done</p></li>
<li><h4>Team</h4><p>who we are</p></li>
<li id="nav_logo">LOGO</li>
<li><h4>Blog</h4><p>stuff we say</p></li>
<li><h4>Contact</h4><p>talk to us</p></li>
<li><h4>Client</h4><p>login</p></li>
</ul>
</div>
</body>
</html>
And here's my .css file (style.css, in the same directory as index.html)
* {
clear: both;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
#nav {
color: #121415;
width: 100%;
height: 30px;
}
I have the link tag in my html code:
<link rel="stylesheet" href="style.css" type="text/css"/>
But when I open index.html in a browser or the Aptana preview pane, it just shows the plain html with none of my css pulled in.
Am I missing something obvious?
I found my answer. I had left an empty css tag in the file and Aptana didn't like it. This is my fault, I left it out of this post because I didn't think it was relevant.
I had:
#nav li {}
Sorry for not given you guys all the info, you were all very helpful and I helped me learn some new things. Thanks!
Try removing the type="text/css" attribute. Most modern browsers will complain if a type is specified and doesn't exactly match the Content-Type header the file returns, and when loading files locally there is no Content-Type header.
Your style.css file must be in the same location as index.html for it to work.
What do you see in the address bar of the browser when previewing?
What happens if you replace index.html with style.css? Are you able to see the CSS file?
Does it work without Aptana's preview, if you open the index.html file directly?
Also open up firebug or developer tools and hit the network tab to check if the browser is making a request for the CSS file and what if any errors are being reported. Also check the response headers.
You may also want to verify what Aptana is doing to your source after it generates the preview. Does doing a view source in the preview browser show the exact same link / path to the stylesheet?
Do you have a similar issue as this user with absolute path's in Aptana's preview: Aptana Studio 3 preview problems with absolute path
I'm pretty sure aptana has autocomplete on files and other html/css tags so try
<link rel="stylesheet" href="
I believe that when you have typed this if should start to give you all the files within your folder hysterical set up. If it doesn't try a / or the likes?
try putting it in a folder for example CSS
<link href="CSS/aki.css" rel="stylesheet"
type="text/css" />

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!