i wrote this CSS code into an HTML file to running in firefox:
<style>
#font-face {
font-family: abc;
src: url('./../abc.ttf');
}
* {
font-family: abc;
}
</style>
but firefox doesn't find font.
although i did try this code too:
src: url('../abc.ttf');
but no effect.
i run HTML under Firefox 60.
my folder structure is:
E:/1/index.html
E:/abc.ttf
No need to include the initial ./ part, try this instead:
src: url('../abc.ttf');
Related
Is it possible to add an external font in css using file of type .File?
Here is what I tried with no luck:
#font-face {
font-family: AvenirHeavy;
src: url("fonts\AvenirLT\AvenirLT-Heavy.tff");
}
.applyFont {
font-family: AvenirHeavy;
}
Also I tried this:
#font-face {
font-family: AvenirHeavy;
src: url("fonts\AvenirLT\AvenirLT-Heavy.File");
}
.applyFont {
font-family: AvenirHeavy;
}
Here are the details about the font:
And for some reasons ide (WebStorm) does not know about font inclusion and tells me that it Cannot resolve file:
The first four characters are:
NUL NUL NUL NUL.
I'm currently experimenting with variable fonts. My first test was to experiment with the font-variation-settings directive, but it seems that is not working. Both on Codepen:
https://codepen.io/DailyMatters/pen/LrBvmz
This is my current CSS (it seems like the font is being loaded correctly from dropbox):
#font-face {
font-family: 'SourceSans';
src: url('https://www.dropbox.com/s/fmonith639cs931/SourceSansVariable-Roman.ttf') format('truetype');
}
html {
font-family: 'SourceSans', sans-serif;
}
p {
font-variation-settings: "wght" 999, "wdth" 125;
}
But also on Chrome.
As much as I change the "wght" axis, nothing happens. I did same tests with this same font using #font-face, and it worked on Chrome. Any reason this is not working with font-variation-settings?
I have downloaded a font libertaion_sans that is keep inside a Wordpress theme under a font folder like this \fonts\liberation_sans
I saw lots of videos on Youtube and some links on StackOverflow, but I failed to include them correctly.
If I am not wrong we have to define these fonts in style.css before actually using this:
font-family
Can some one please help me.
Currently,
I am interested in using them →
font-family: LiberationSans-Bold;
Something like this => In your css file
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('/fonts/font.ttf'); /*URL to font*/
}
And use like font-family: 'YourFontName' in any css rule.
Cheers!
PD: Create each separatly.
#font-face {
font-family: 'LS-bold'; /*a name to be used later*/
src: url('/fonts/ls-bold.ttf'); /*URL to font*/
}
#font-face {
font-family: 'LS-Regular'; /*a name to be used later*/
src: url('/fonts/ls-regular.ttf'); /*URL to font*/
}
..etc...
And if you want to use the bold font, you have to font-family:'LS-bold'.
Understood?
In CSS, I'm linking to two local fonts. Only one is being recognized currently and I really have no idea what I'm doing wrong.
#font-face {
font-family: 'The Rainmaker';
src: url('The Rainmaker.otf');
}
#font-face {
font-family: 'Timeline';
src: url('Timeline.ttf');
}
i have a imported css font with the following code:
#font-face
{
font-family: font;
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
The problem is that online doesn't work but locally works.What is causeing the problem
Try renaming the file path, for example ---> "myriad-pro/myriad-pro/MyriadWebPro.ttf". Is your css file in the folder with the font. Check if your path is right.
P.S: Remove the bottom url (that on the third line.). When I use font-face I use only two. Example: font-family: Consolas;
src: url('Consolas.ttf');
#font-face
{
font-family: MyriadPro; /* just declares a font in your stylesheet */
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
body
{
/* now you need to use it */
font-family: MyriadPro, sans-serif;
/* so name it something useful, instead of just "font" */
}
answering old questions
for those who come looking after