How to add custom font at wordpress - css

The source of the font is: /htdocs/wp-content/themes/elegance/fonts/pizza.otf
I add to CSS(style.css):
#font-face {
font-family:'Pizza';
src: url('fonts/narkis.otf');
}
And add also:
html,body,div,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,p,ul,ol,li{
vertical-align:baseline;font-size:100%;padding:0;margin:0;font-family:'Pizza';
}
Its not working..

Related

How load IcoMoon webfont in React?

How load webfont in React?
added the 4 webfont to the public folder
created font-face
#font-face {
font-family: "IcoMoon";
src: url("/icons/line-icons-fonts/icomoon.eot");
src: url("/icons/line-icons-fonts/icomoon.svg") format("svg"),
url("/icons/line-icons-fonts/icomoon.ttf") format("truetype"),
url("/icons/line-icons-fonts/icomoon.woff") format("woff");
}
put a div in an a. Set fontFamily and className. But icon does not appear, strange. I would use one of these icons.
https://themekit.dev/docs/code/iconsmind/
<a
href={`https://www.facebook.com/dialog/share?app_id=2773133082797983&display=popup&href=https://sendmade-portal-vercel.vercel.app/hu/product/${props.productId}&redirect_uri=https://sendmade-portal-vercel.vercel.app/hu/product/${props.productId}&hashtag=#bestGift&quote=EgyMondat`}
>
<div
style={{ fontFamily: "IcoMoon" }}
className={"im-over-time2 text-lg"}
></div>
</a>
No need to add the #font-face {... manually, but you need to add the CSS file generated by IcoMoon to be able to use the font(s).
This is because the class names for the icons are defined in that .css file.
Currently in you case yes you added the fonts file, and declared a font-face but where is defined the CSS rules for you icon im-over-time2 ?
The style.css file created by IcoMoon declare all the classes for the icons you selected, something like :
.icon-blablabla:before {
content: "\e91c";
}
.icon-youhou:before {
content: "\e948";
}
.icon-foobar:before {
content: "\e98d";
}

How to use custom fonts in Laravel's blade?

Basically, I have imported various custom font templates into my public/fonts folder. Examples are Muli, Muli-Bold, Muli-ExtraBold. My question now is, how do I call and use these fonts in my blade files?
You can add custom fonts in laravel as like you add in an HTML template. You can add it in blade like
<style type="text/css">
#font-face {
font-family: Muli-Bold;
src: url('{{ public_path('fonts/Muli-Bold.tff') }}');
}
</style>
And you can add it in any css file as :
#font-face {
font-family: Muli-Bold;
src: url('/fonts/Muli-Bold.tff');
}
If you want to add custom font in lavarel you can add it just like you do in HTML file . You can add in css as:
#font-face {
font-family: Muli-Bold; src: url('/fonts/Muli-Bold.tff');
}
Or you can include the above code in blade using the style tag.

How to include fonts #font-face

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?

Defining a new font-face isn't working properly

I'm trying to get a new font I've installed in my folders to work, and for some reason I can't figure out it isin't.
Here's my code:
#font-face{
font-family: "qontra";
src: url("../fonts/Qontra.otf") format("opentext");
}
h1 {
margin-top:0;
font-family: 'qontra';
}
Here's the file path:
mywebsite\fonts

Css Font won't import online

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

Resources