Im having trouble trying to get the font-face style working locally. I know it should work locally as the folder I downloaded from font-squirrel renders correctly.
Ive copy and pasted everything exactly into the same folder structure supplied by fontsquirrel...
CSS
#font-face {
font-family: 'URWClassicoItalic';
src: url('urw_classico_italic-webfont.eot');
src: url('urw_classico_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('urw_classico_italic-webfont.woff') format('woff'),
url('urw_classico_italic-webfont.ttf') format('truetype'),
url('urw_classico_italic-webfont.svg#URWClassicoItalic') format('svg');
font-weight: normal;
font-style: normal;
}
#primary-navigation {font-family: 'URWClassicoItalic'; font-size:2em}
HTML
<div id="primary-navigation">TEST</div>
My font files are all in the root, same directory as my index file.
Any help would be brilliant, thankyou
#font-face urls that are specified in a separate CSS file must have a url relative to this CSS
for example:
src: url('../urw_classico_italic-webfont.eot');
if the CSS-file is one level above the folder, where the font-file is stored.
Related
I am just starting out with HTML, CSS and co. and for the last hour or so I've tried implementing a custom font to my project. I've tried everything, creating a fonts folder or putting the font files in the same directory as my index.html file, but nothing is working!
I am grateful for every help, solving this problem! :)
my directory and css code below
font-family: league_spartanregular;
src: url('leaguespartan-bold-webfont.eot');
src: url('leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('leaguespartan-bold-webfont.woff2') format('woff2'),
url('leaguespartan-bold-webfont.ttf') format('truetype'),
url('leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
background-color: #f4f4f4
}
#main-header{
text-align: center;
font-family: league_spartanregular;
font-size: 80px;
}
p{
font-family: league_spartanregular;
}
Check out Google Fonts! :)
simply search for your font and upon clicking one, there will be a tab at the bottom. Click on that and there will be a link which you can include in your HTML above your stylesheet link.
https://fonts.google.com/
I'm also somewhat new here so apologies if my answer isn't satisfactory.
Cheers :)
Keep fonts in /fonts folder, this will help with clean structure of site down the line. Remember - everything what's in the file is relative to that file - meaning, if you'd put these fonts in /css folder - it would work.
If you want to go back in folder structure just use ../. It's useful if you want to store images for example in /img and not in /css/img.
#font-face{
font-family: league_spartanregular;
src: url('../fonts/leaguespartan-bold-webfont.eot');
src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
font-weight: normal;
font-style: normal;
}
If this css is from a .css file in the css/ folder, you'll need to add ../ to your filepaths, eg:
#font-face {
font-family: league_spartanregular;
src: url('../leaguespartan-bold-webfont.eot');
src: url('../leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../leaguespartan-bold-webfont.woff2') format('woff2'),
url('../leaguespartan-bold-webfont.ttf') format('truetype'),
url('../leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
font-weight: normal;
font-style: normal;
}
Otherwise, if you open the inspector in your browser, you should able to see the errors associated with it trying (and failing) to find these files with red 404 messages.
first go to google.fonts select one fonts,there you finds two things one is link in tag which you put in tag of your html file and second thing is font-family of CSS which you use in your css file
here is google font links
I have a stylesheet that is referenced in the header:
<link href="./css/stylesheet.css" rel="stylesheet">
All of the css works in it except this specific code:
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hsw0h3');
src: url('fonts/icomoon.eot?hsw0h3#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hsw0h3') format('truetype'),
url('fonts/icomoon.woff?hsw0h3') format('woff'),
url('fonts/icomoon.svg?hsw0h3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
When I put the above #font-face CSS in the page above where the icons are being shown it works but when I put it in the CSS file it stops working. I finally found out that this was likely due to the file path not being correct.
Here is the file structure:
Looking at this article (https://css-tricks.com/quick-reminder-about-file-paths/) it looks like I should either use:
url('/fonts/icomoon.ttf?hsw0h3')
url('../fonts/icomoon.ttf?hsw0h3')
to go back to the root and then into the fonts folder. But the icon still is not rendering from the CSS file.
What am I doing wrong and how do I fix it?
URLs in CSS files are relative to the CSS file.
url('fonts/icomoon.eot?hsw0h3'); means http://example.com/css/fonts/icomoon.eot?hsw0h3, but your screenshot of your directory structure shows you need http://example.com/fonts/icomoon.eot?hsw0h3.
Add ../ or /
../ need to be added before the path to move up one folder in hierarchy (../../path) to move two folders up in hierarchy
Consider describing the font sources individually without any version specification (I guess) like,
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
src: url('fonts/icomoon.eot') format('embedded-opentype');
src: url('fonts/icomoon.ttf') format('truetype');
src: url('fonts/icomoon.woff') format('woff');
src: url('fonts/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
Alternatively, you may also remove the format specification and let the browser to determine automatically, if problem still persists.
I have the following CSS (generated byn SASS):
#font-face {
font-family: "locust";
src: url(/assets/LOCUST.TTF) format("truetype");
src: url(/assets/LOCUST.svg) format("svg"); }
The path seems accessible - I'm on localhost:3000 and if I can download/see the fonts by typing localhost:3000/assets/LOCUST.TTF, for instance.
Yet Firefox don't render the font:
<h1 style="font-family: locust;">Test</h1>
I'm using Rails, but I don't think the problem is related, since the HTML and CSS generated seems correct to me, and the fonts are accessible. If I knew what I need to generate, most likely I would know how to fix.
Asset URL
Here is code we use:
#app/assets/stylesheets/fonts.css.scss
#font-face {
font-family: 'Lato';
src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot');
src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'),
asset_url('layout/fonts/lato/lato-hairline-webfont.woff') format('woff'),
asset_url('layout/fonts/lato/lato-hairline-webfont.ttf') format('truetype'),
asset_url('layout/fonts/lato/lato-hairline-webfont.svg#latohairline') format('svg');
font-weight: 100;
font-style: normal;
}
Notice asset_url is used -- this provides a CSS-compatible path to the url (hence why you're not able to access the path)
WebFonts
If you have full rights to use the font, you'd be better using the WebFont generator here: http://www.fontsquirrel.com/tools/webfont-generator
This creates cross-browser webfont files in .tff, .woff, .svg and .eot formats
I downloaded this font (https://www.google.com/fonts/#QuickUsePlace:quickUse/Family:Underdog) and then used FontSquirrel (http://www.fontsquirrel.com/tools/webfont-generator) with it.
However, I'm not sure where I should place the files in Eclipse...
This was in one of the css files that FontSquirrel generated and I placed it in my CSS file.
#font-face {
font-family: 'underdogregular';
src: url('underdog-regular-webfont.eot');
src: url('underdog-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('underdog-regular-webfont.woff') format('woff'),
url('underdog-regular-webfont.ttf') format('truetype'),
url('underdog-regular-webfont.svg#underdogregular') format('svg');
font-weight: normal;
font-style: normal;
}
FontSquirrel also generated these files:
underdog-regular-demo.html
underdog-regular-webfont.eot
underdog-regular-webfont.svg
underdog-regular-webfont.ttf
underdog-regular-webfont.woff
Would anyone know where I should place these?
Thank you for your help.
You would put those font files somewhere on your web server, then adjust the url path in the CSS to suit. So just as you might upload your background images to an /assets/images/ folder:
background-image: url("/assets/images/foo.jpg");
...you could upload the font files into an /assets/fonts directory and adjust the font squirrel CSS accordingly:
src: url('/assets/fonts/underdog-regular-webfont.eot');
src: url('/assets/fonts/underdog-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/underdog-regular-webfont.woff') format('woff'),
url('/assets/fonts/underdog-regular-webfont.ttf') format('truetype'),
url('/assets/fonts/underdog-regular-webfont.svg#underdogregular') format('svg');
Or, if you don't want to edit the CSS, just upload them to the same directory as the CSS file.
I'm having trouble with an #font-face declaration and I'm hoping someone can tell me what the problem is.
Here's my #font-face CSS:
#font-face {
font-family: 'MuseoSlab500';
src: url('fonts/Museo_Slab_500-webfont.eot');
src: url('fonts/Museo_Slab_500-webfont.eot?iefix') format('eot'),
url('fonts/Museo_Slab_500-webfont.woff') format('woff'),
url('fonts/Museo_Slab_500-webfont.ttf') format('truetype'),
url('fonts/Museo_Slab_500-webfont.svg#webfontyumMOUTD') format('svg');
font-weight: normal;
font-style: normal;
My font files are all in a folder in the root of my site called 'fonts'. The stylesheet and the html file (it's a one page site) are in the root. I'm looking at the #font-face and it looks no different than declarations I'ved before yet for some reason this one is not working. Can anyone tell me why this is?
Thanks,
Brian
I always put my web fonts folder inside my CSS folder like this:
#font-face{
font-family: 'CartoGothicStd-Bold';
src: url('#font-face/CartoStd-Bold.eot');
src: url('#font-face/CartoStd-Bold.eot?#iefix') format('embedded-opentype'),
url('#font-face/CartoStd-Bold.woff') format('woff'),
url('#font-face/CartoStd-Bold.ttf') format('truetype'),
url('#font-face/CartoStd-Bold.svg#webfont') format('svg');
}
My folder is called #font-face. Give it a go...see if you get the fonts working.
I just noticed you're missing }
Try to use .otf file instead of .ttf
I had also faced this problem. I got it working by replacing to .otf file.