asked on

Replacing a remotely-hosted font with a local font

A webmaster designed a dynamic template for me, which includes the following line of code:
<link href="http://fonts.googleapis.com/css?family=Federo" rel="stylesheet" type="text/css">

I prefer to host fonts and scripts locally, and not to rely on the continuation of those resources on someone else's server. But I'm not clear how to accomplish this with the font in question.

If I download the style sheet, it contains the following code:
@font-face {
font-family: 'Federo';
font-style: normal;
font-weight: 400;
src: local('Federo'), local('Federo-Regular'), url(http://themes.googleusercontent.com/static/fonts/federo/v6/FnU7BHlDZgmlIL4FzGh7QA.woff) format('woff');
}

Does this still require content on a remote server?

I have installed the font ("Federo") in my Windows fonts folder. Can I simplify this portion of code by making reference to the actual font?

Thanks!

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ddantes

ASKER

Thank you. So, could I add Federco.ttf to my css folder, and change the css code to this?

@font-face {
font-family: 'Federo';
font-style: normal;
font-weight: 400;
src: "css/Federco.ttf", url(css/font.css);
}

Gary

You just need this for the src (assuming you renamed the woff file to Federco)

src: url(/css/Federco.woff);

ddantes

ASKER

Thank you. I'm having some challenges implementing this.

In the <HEAD> section of a test page, I replaced the Googleapis code with:
<link href="css/font.css" rel="stylesheet" type="text/css">

In the CSS folder, I placed the downloaded Federco.woff, and now font.css reads like this:
@font-face {
font-family: 'Federo';
font-style: normal;
font-weight: 400;
color:aqua;
src: local('Federo'), local('Federo-Regular'), url(Federco.woff);
}

I made the color aqua so I could see if there was any effect on the page, and there is no aqua text.

Gary

You're missing the path to thefont

src: url(/css/Federco.woff);

ddantes

ASKER

font.css has this code:
src: local('Federo'), local('Federo-Regular'), url(Federco.woff);

Since the font is in the same folder as font.css, I omitted "/css/" in the path.

Gary

No, always use the full path - when you include a css file (or any file) then any paths in the included file are relative to the path of the file calling it, not relative to the path of the included file.

ddantes

ASKER

Thank you. I couldn't get the font to appear in aqua, but I believe this is due to conflicting styling code in other css files. It appears that the reference to the Federo font from Googleapis is probably unnecessary, as "Federo" is specified elsewhere in other style sheets. In any case, I've corrected the path to the font, and I appreciate your good service!

Gary

aqua works fine for me so must be getting overridden somewhere else

ddantes

ASKER

Agreed.