I have this code in my css file from the @fontsquirrel generator:
/// changed the code to how it is now ///
@font-face {
font-family: 'AdLibRegular';
src: url('../fonts/adlib-webfont.eot');
src: local('☺'), url('../fonts/adlib-webfont.woff') format('woff'),
url('../fonts/adlib-webfont.ttf') format('truetype'),
url('../fonts/adlib-webfont.svg#webfontmAc00Ivp') format('svg');
font-weight: normal;
font-style: normal;
}
.AdLib {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'AdLibRegular', sans-serif;
}
this is stored in a folder called css and the fonts are stored in a folder called fonts.
I can't get this to work when in the html page I'm calling it for example
<h1 class="AdLib">Testing Testing 1 2 3</h1>
I can't work out what I'm doing wrong at all.
Any ideas?
I have now changed them all to url ('../fonts/adlib etc and it still doesn't work. I'm previewing locally - is this it?
While @font-face is excellent for fonts that are hosted on our own servers, there may be situations where a hosted font solution is better. Google Fonts offers this as a way to use their fonts. The following is an example of using @import to load the Open Sans font from Google Fonts:
@font-face does not work well with css transitions. It gets all laggy and slow. After few days of installing it, my css web fonts doesn’t work just what it was before. Now the site is messed up. But checking it on Chrome (even Safari), the fonts look just right.
One source of the problem could be if your css is in a separate file that isn't in the root folder. For example, if you keep all of your css files in a 'css' folder, you'll need to modify the font url to be relative to that file, not to the root folder. In this example it would be src: url ('../inlove-light-wf.ttf');
The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.
could be a problem with the path, where is the font folder located according to the css file?
if the font folder is in the css folder you should use the following path:
src: url('fonts/adlib-webfont.eot');
if it's next to the css map you need to use the following path:
src: url('../fonts/adlib-webfont.eot');
../
is used to go back a folder
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With