Folks! I am not an expert in CSS, I am currently trying to understand a codebase that has css file with following syntax
#font-face {
font-family: "Avenir LT";
url(/Fonts/8afe744b-89a2-4ae2-a88e-05c6882580f3.svg#8afe744b-89a2-4ae2-a88e-05c6882580f3) format("svg")
}
I do not know if the url pattern is correct. Specifically, the part after svg.
Can some one help me understand this?
Thanks
Not exactly.
See docs for the details, for example - https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
It seems you missed src property, so your styles should look like
font-face {
font-family: "Avenir LT";
src: url(/Fonts/8afe744b-89a2-4ae2-a88e-05c6882580f3.svg#8afe744b-89a2-4ae2-a88e-05c6882580f3) format("svg");
}
Related
So, I'm brand new to web development, and I am trying to learn all about CSS right now. I noticed not many font-family's come with VSCode so I wanted to download some to get in VSCode to use in my CSS. Question is; how do I do that? I downloaded the .ttf file of the font I want to use in my CSS but I'm unsure how to get VSCode to recognize the font-family.
You can use https://fonts.google.com/ to find the font you want, than select it and it should give u a link, paste it on top of your css file
ex :
link: <link href="https://fonts.googleapis.com/css2?family=Antonio:wght#100&display=swap" rel="stylesheet">
using it: font-family: 'Antonio', sans-serif;
First of all the fonts you use have nothing to do with VS Code. What you want to do is integrate your downloaded font directly in your CSS code which can be done like so:
#font-face {
font-family: myFirstFont;
src: url(your_font.tff);
}
body {
font-family: myFirstFont;
}
You have to specify the #font-face CSS at-rule:
#font-face {
font-family: myfont;
src: url("myfont.ttf");
}
and then you can use it like so:
* {
font-family: myfont
}
My site optimization plugin is telling me to use the #font-face .css to make sure my text is visible as early as possible. But I can't for the life of me figure out how to do that.
Apparently I need to use the following css:
#font-face{
font-family: 'myWebFont';
font-display: swap;
src: url('myfont.woff2') format('woff2');
}
I have tried parameters such as:
#font-face{
font-family: 'myWebFont';
font-display: swap;
src: url('https://www.treemonkeymusic.com/fonts/glyphicons-halflings-regular.woff2 ') format('woff2');
}
Q1: I have no idea which font-family to use, is there a way to figure this out?
Q2: The link is the one shown in the warning I get. But is that the correct link to use? Can I use something like /wp-content/themes/shop-isle/fonts/blablafont.woff?
Q3: If I just paste this into the custom css section in Wordpress, will it work? I assume there is potentially an #font-face in the css, but it doesn't have the font-display parameter.
Q4: Is there a better way to do this for all fonts to avoid having to do css for each font in use?
Any thoughts or ideas would be welcome as I really don't know what I'm doing.
You can use google fonts API
https://fonts.google.com/
https://developers.google.com/fonts/docs/getting_started
Hellow i have a problem with importing fonts from folder.
I`m using gulp and browsersync on index.php throught proxy to my VH.
When I want to set up a background I have to use this url
background-image: url('http://ekozone.local/src/img/logo.png');
Now when I try to make new font family by doing
#font-face {
font-family: "BarlowBlack";
src: url('http://ekozone.local/src/Barlow-Black.ttf') format('ttf'),
}
Nothing happens, I was trying many ways to get to my fonts
src: url('../../../src/Barlow-Black.ttf') format('ttf')
/\ this one was before i moved it to same level as index
src: url('Barlow-Black.ttf') format('ttf')
This is how my structure looks like
STRUCTURE
If someone can help me it would be great... And I was reading questions about this but nothing works for me... probably im doing something wrong.
Thanks for help!
If you have div or another HTML element with class divClass, in CSS you have to specify whichone font family you need to use:
#font-face {
font-family: "BarlowBlack";
src: url('http://ekozone.local/src/Barlow-Black.ttf'),
}
.divClass {
font-family: "BarlowBlack";
background-image: url('http://ekozone.local/src/img/logo.png');
}
This should work for you.
Or if you would like to use your font, use instead of http link:
src: url('../Barlow-Black.ttf');
Ok I have my site up so far but the two fonts I used are not showing up. I transferred the fonts and put them in the same folder as my webpages. I also used #font-face in css (styless.css). I'm not sure where I went wrong.
Website: http://envycosmetics.zxq.net/TestSite/webpages/index.html
I'm looking at styless.css, and I can't see where you used #font-face. Make sure you do it like this:
#font-face { font-family: FontName; src: url('path/to/font.otf'); }
Then call it like this:
#navBar { font-family: FontName, sans-serif; }
Also, don't forget to call another font for browsers that don't support #font-face, as shown in #navBar values.
I also used #font-face in css (styless.css)
No... no, you didn't.
Im having some trouble with the #font-face selector, I have the following...
#font-face {
font-family: 'MuseoSans-700';
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot?#iefix') format('embedded-opentype'),
url('style_159306.woff') format('woff'),
url('style_159306.ttf') format('truetype');
}
Only my fonts arent being rendered and instead im being shown my fallback, arial.
If i paste the url to the font into my browser it asks me to download so i know the links correct, is there something im doing wrong in the above?
Im calling the font using...
h1 {
color:#272727;
font:108px 'MuseoSans-700',Helvetica,Arial,sans-serif;
letter-spacing:-7px;
}
Thanks
Check out this article on bullet-proof #font-face syntax. http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
You also didn't specify which browsers it's working or not working in so I assume it's not working in any of them.
.eot is for internet explorer.
Try .otf
So in practice you need to have both, something like
e.g.
#font-face {
font-family: 'MuseoSans-700';
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
src: url('http://mysite.co.uk/clients/reload/Images/style_159306.otf');
}
A good tutorial is here: http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/
Strelok's reference to Paul Irish's article is also very good.