I downloaded a font called Helio from envato, but I can't get the font into my local file (haven't tried live).
My code is
#font-face {
font-family: 'helios_roundedregular';
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
line-height: 1.4;
margin: 0;
padding: 0;
font-family: Helios Rounded;
font-weight: normal;
font-style: normal;
}
This is a picture to the file path:
I believe it's correct. The I have the root folder, the css folder, and the font folder which contain the font files. The img shows the css and font folders open
The file names differ from the font in your path.
change
src: url('../css/fonts/helios_rounded-webfont.woff2') format('woff2'),
url('../css/fonts/helios_rounded-webfont.woff') format('woff');
to
src: url('../css/fonts/Helios Regular.woff') format('woff'),
url('../css/fonts/Helios Rounded.woff') format('woff');
Also, if your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') format('woff');
your CSS files reside in the css directory, omit the css directory declaration.
src: url('./fonts/Helios Regular.woff') format('woff'),
url('./fonts/Helios Rounded.woff') forma
You seems to be using wrong name for Font-Family, try this name instead.
#font-face {
font-family: 'Helios Rounded';
}
Related
I am new at learning HTML5 and CSS. Advanced apology for this very basic question.
I have downloaded a font and saved it in a folder called fonts in my project.
Then created a fonts.css file inside of css folder and put the following code in it.
#font-face {
font-family: 'FiraCode-Regular';
font-weight: normal;
font-style: normal;
src: url('../fonts/FiraCode-Regular.eot');
src: url('../fonts/FiraCode-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/FiraCode-Regular.woff2') format('woff2'),
url('../fonts/FiraCode-Regular.woff') format('woff'),
url('../fonts/FiraCode-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'FireCoda-Light';
font-weight:normal;
font-style: normal;
src: url('../fonts/FireCoda-Light.eot');
src: url('../fonts/FireCoda-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/FireCoda-Light.woff2') format('woff2'),
url('../fonts/FireCoda-Light.woff') format('woff'),
url('../fonts/FireCoda-Light.ttf') format('truetype');
}
Then in the main.css file I added the following css:
body{
font-family:"FiraCode-Regular",Verdana, sans-serif;
font-size: 1.2rem;
}
here is an screen shot of the file hierarchy in my project
now the problem is the font is not working. I would appreciate if anyone can help me here.
add
#import url("./fonts.css");
in your main.css as the first line.
I'm trying to get the Bebas Neue font to work, I've managed to convert my fonts into their respective types but whenever I load the font in the browser I get errors.
Firebug throws:
downloadable font: download failed
Chrome throws a 404 not found.
I initially had these in their own font folder, but I then decided to move the fonts to the same directory as the stylesheet I was using to try and rule out location problems.
This particular file is a SASS partial called _typography that lives in a folder called global this is the same folder I've directly placed all the fonts into as is.
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
With a 404 Error - it's 98% going to be because of the path being wrong.
Just a thought - you mentioned that you moved them into a SASS partial? Can this folder be accessed from the site? From my experience, your SASS is going to compile into some sort of public directory.
In order to troubleshoot... theoretically, you should just be able to add www.yourdomaincom/path-to-font/font.eot and come up with a download file.
If you're not, then it really is an issue of the path being where the error lies. As far as why other fonts are working, I wouldn't be able to say without taking a better look at how you have your project set up.
Just my two cents worth to help you troubleshoot!
Make sure your #font-face matches your font-family use on CSS, either:
font-family: 'Bebas Neue'; on everything or:
font-family: 'BebasNeueRegular'; on everything.
Like:
#font-face {
font-family: 'BebasNeueRegular';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches css use:
.selector {
font-family: 'BebasNeueRegular', sans-serif;
}
Or:
#font-face {
font-family: 'Bebas Neue';
src: url(BebasNeueRegular.eot);
src: url(BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
url(BebasNeueRegular.woff) format('woff'),
url(BebasNeueRegular.ttf) format('truetype'),
url(BebasNeueRegular.svg) format('svg');
font-weight: normal;
font-style: normal;
}
Matches:
.selector {
font-family: 'Bebas Neue', sans-serif;
}
Environment is a React Nodejs app
My CSS:
#font-face {
font-family: 'Open Sans';
src:
url('/src/public/fonts/OpenSans-Regular.eot'),
url('/src/public/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/src/public/fonts/OpenSans-Regular.woff') format('woff'),
url('/src/public/fonts/OpenSans-Regular.woff2') format('woff2'),
url('/src/public/fonts/OpenSans-Regular.ttf') format('truetype'),
url('/src/public/fonts/OpenSans-Regular.svg') format('svg');
font-style: normal;
font-weight: normal;
}
#font-face {
font-family: 'Open Sans';
src:
url('/src/public/fonts/OpenSans-Semibold.eot'),
url('/src/public/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
url('/src/public/fonts/OpenSans-Semibold.woff') format('woff'),
url('/src/public/fonts/OpenSans-Semibold.woff2') format('woff2'),
url('/src/public/fonts/OpenSans-Semibold.ttf') format('truetype'),
url('/src/public/fonts/OpenSans-Semibold.svg') format('svg');
font-style: normal;
font-weight: bold;
} ....
I have two different definitions for Open Sans as the font-style and font-weight depends on additional classes on elements like bold italic etc which seems to be an acceptable fomat
Usage:
.union {
font-family: 'Open Sans';
padding-left: 12px;
& :global(.bold) {
font-weight: 700;
}
& :global(.italic) {
font-style: italic;
font-weight: 400;
}
}
Webpack config:
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
I have the font files under public/fonts folder, it was working fine up until a day ago but now we are getting tons of console errors failed to decode downloaded font invalid version tag for woff and ttf files. I tried other solutions link1 and link2 but it didn't help. I can see the fonts loading just fine from the public folder under Chrome's network tab
Any idea why am still getting these errrors?
I could fix the error. It was a combination of a couple things.. first was the path to the font file, I was setting the path as if there was no “build” happening, Webpack was putting them under /assets after release build so I had to update my path from src/public/fonts to /fonts as after the build static files are automagically looked under assets folder + adding regex to support versioning in my webpack loader config + adding mimetype for woff files
I have some fonts with #font-face and background images into my custom.css.scss file.
When I precompile assets for Heroku, I get a production css larger than 10MB which slows my website down to a crawl. Upon further inspection I discovered that the images and fonts are base64 encoded within the generated production css file. How do I disable this?
Some code from custom.css.scss:
#font-face {
font-family: 'OpenSansCondensedLight';
src: asset-data-url('opensans-condlight.eot');
src: asset-data-url('opensans-condlight.eot') format('embedded-opentype'),
asset-data-url('opensans-condlight.woff') format('woff'),
asset-data-url('opensans-condlight.ttf') format('truetype'),
asset-data-url('opensans-condlight.svg') format('svg');
font-variant: normal;
font-weight: normal;
font-style: normal;
}
becomes in production CSS file:
#font-face {
font-family: 'OpenSansCondensedLight';
src: url(data:application/vnd.ms-fontobject;base64,nM8BALTOAQABAAIAAAAAAAILAwYDBQQCAgQBACwB...
src: url(data:application/vnd.ms-fontobject;base64,nM8BALTOAQABAAIAAAAAAAILAwYDBQQCAgQBACwB...
font-variant: normal;
font-weight: normal;
font-style: normal; }
if you use asset-data-url sass will inline your assets as base64 data. that's the whole point.
you need to use asset-path($relative-asset-path, $asset-class) or similar methods to reference the asset from your css file: https://github.com/rails/sass-rails#features
if that does not work on heroku, make sure to check all the configurations: https://devcenter.heroku.com/articles/rails-asset-pipeline
I don't understand how to get this to work, any help would be appreciated;
I'm going off of what I got from this website: http://alistapart.com/article/cssatten
from my style.css
#font-face {
font-family: "JSL";
src: url(http://ff.static.1001fonts.net/j/s/jsl-ancient.normal.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Neither is the plus sign the issue (tested with my renamed fonts), nor do you have to import a separate css file at the top of your main css file.
However, you may need to have more versions of your font than just the true type. Have a look at Bulletproof #font-face Syntax.
You may use FontSquirrel’s generator to achieve this.
Here is an example of a #font-face embed in my application, which is pinned right at the top of my main css stylesheet.
#font-face {
font-family: 'JustVector';
src: url('../fonts/justvectorv2+webfont.eot');
src: url('../fonts/justvectorv2+webfont.eot?') format('eot'),
url('../fonts/justvectorv2+webfont.woff') format('woff'),
url('../fonts/justvectorv2+webfont.ttf') format('truetype'),
url('../fonts/justvectorv2+webfont.svg#webfontkw9J4lGf') format('svg');
font-weight: normal;
font-style: normal;
}
no
#font-face
Try get inport it:
#import_your_new_cssfile.css
whre you put:
font-face {
font-family: "JSL";
src: url(http://www.fontyukle.net/en/DownLoad-JSL+Ancient.ttf) format("truetype");
}
font {
color: #000000;
font-size: 120%;
font-family: "JSL";
}
Is perhaps the "+" sign in the font URL a problem? You might want to URL encode it.
Edit - after hitting the font URL, it looks like you should try to download the ttf file, and refer to it locally, rather than from a remote source. It's prompting me for a Captcha in order to download the file, which is probably why it's not working.
You do need to download the file and refer to it locally,
The link supported there is a download link and requires a Captcha to be downloaded which means it is NOT a direct link to the TTF File.
Depending on the Font you may need to use:
#font-face {
font-family: 'someFont';
src: url('path/to/font/someFont.eot');
src: url('path/to/font/someFont.eot?#iefix'), format('embedded-opentype'),
url('path/to/font/someFont.woff'), format('woff'),
url('path/to/font/someFont.ttf'), format('truetype'),
url('path/to/font/someFont.svg'), format('svg');
font-weight: normal;
font-style: normal;
}
and in CSS:
BODY
{
font-family: 'someFont', Fallback, sans-serif;
font-size: 12px;
...
}
This worked for me when I had issues wityh embedding a custom font.