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?
Related
I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:
I have read several StackOverflow posts and I'm trying to import it using #font-face inside css:
#font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2') format('woff2'),
url('../fonts/fontawesome-webfont.woff') format('woff'),
url('../fonts/fontawesome-webfont.ttf') format('truetype'),
url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}
And then using it in the body:
body {
margin: 0;
padding: 0;
font-family: 'MyWebFont';
}
However, it's not loading:
Any idea on why is this happening? I can actually see the expected font inside the files...
Thank you in advance.
Edit:
In the network tab in my browser's developer tools I can see the follwing info:
.
In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?
Edit2:
Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):
I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...
I think the problem is that font awesome is only for icons, not text.
If you go to fontawesome.com and remove this line of code:
.fa, .fas {
font-family: "Font Awesome 5 Pro";
}
You will see all the icons that have the class fa and fas will be just a rectangle.
You also need to give every element other fonts like:
.fab {
font-family: "Font Awesome 5 Brands";
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
I am working on an Angular project and we use scss. We want to standardize our use of fonts throughout the application. For eg. Instead of using font-family: Arial everywhere it should be font-family: $arialFont.
In my current styles.css we have the following.
#font-face {
font-family: "Helvetica_Neue_Light";
src: url("./assets/fonts/eot/HelvNeueLight.eot");
src: url("./assets/fonts/eot/HelvNeueLight.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueLight.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueLight.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Medium";
src: url("./assets/fonts/eot/HelvNeueMedium.eot");
src: url("./assets/fonts/eot/HelvNeueMedium.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueMedium.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueMedium.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Bold";
src: url("./assets/fonts/eot/HelvNeueBold.eot");
src: url("./assets/fonts/eot/HelvNeueBold.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueBoldfor.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueBold.ttf") format("ttf");
}
#font-face {
font-family: "Helvetica_Neue_Light_Italics";
src: url("./assets/fonts/eot/HelvNeueLightItalic.eot");
src: url("./assets/fonts/eot/HelvNeueLightItalic.eot")
format("embedded-opentype"),
url("./assets/fonts/woff/HelvNeueLightItalic.woff") format("woff"),
url("./assets/fonts/tff/HelvNeueLightItalic.ttf") format("ttf");
}
These are simply used as font-family: 'Helvetica_Neue_Bold' or font-family: 'Helvetica_Neue_Light_Italics' in the other scss files. The disadvantage of this is whenever we need to change the font for the app we need to make a change in every single instance. So I need a way to assign each font family name to a variable and use it everywhere so that the next time there is a font change, i only have to change the value of variables in one place,
I have created a fonts.scss where I've put
$helvetica-neue-light: "Helvetica_Neue_Light";
$helvetica-neue-medium: "Helvetica_Neue_Medium";
$helvetica-neue-bold: "Helvetica_Neue_Bold";
$helvetica-neue-light-italics: "Helvetica_Neue_Light_Italics";
I imported it in the first file, styles.css and assigned the variables to font-family. But now I have to import fonts.scss in every single scss file, which is also troublesome. Is there another way to do this task? Please help
If you use sass, then you have to import the file where the variables are defined into every file where you want to use these variables.
An alternative is to use CSS variables. You can declare them in once place and reuse them without import.
styles.scss
:root
{
/** hard coded **/
--helvetica-neue-light: "Helvetica_Neue_Light";
--helvetica-neue-medium: "Helvetica_Neue_Medium";
/** or use sass variable**/
--helvetica-neue-light-italics: $helvetica-neue-light-italics;
}
component.scss
div
{
font-family: var(--helvetica-neue-light);
}
Stackblitz demo
Note: this will not work with IE
here is the page where I want to add custom font http://pgkweb.ru/temp/1/index.html
So the fonts are:
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.ttf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.woff
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadProCondRegular.otf
http://pgkweb.ru/temp/1/include/MyriadProCondRegular/MyriadPro-Cond.eot
And I call them from css (http://pgkweb.ru/temp/1/include/style.css):
/*FONTS*/
#font-face {
font-family: MyriadProCond;
src: url(include/MyriadProCondRegular/MyriadProCondRegular.ttf); /* Путь к файлу со шрифтом */
src: url(include/MyriadProCondRegular/MyriadProCondRegular.woff);
src: url(include/MyriadProCondRegular/MyriadProCondRegular.otf);
src: url(include/MyriadProCondRegular/MyriadPro-Cond.eot);
}
*, body, p,h3,h4 {
font-family: 'MyriadProCond', Arial, sans-serif;
color: #fff;
}
But as I see in FireFox code explorer it doesn't works (line-through). But why?
Your webfonts are inside the "include" folder, as is the stylesheet, i.e. they are both in the same folder, so you have to erase the folder name from the file path in the links, like:
src: url("MyriadProCondRegular/MyriadProCondRegular.ttf");
instead of
src: url("include/MyriadProCondRegular/MyriadProCondRegular.ttf");
the same with all the other URLs
Seems like you are missing quotes around each url, the syntax is also a little off:
#font-face {
font-family: MyriadProCond;
src: url('include/MyriadProCondRegular/MyriadPro-Cond.eot');
src: url('include/MyriadProCondRegular/MyriadProCondRegular.woff') format('woff'), /* Путь к файлу со шрифтом */
url('include/MyriadProCondRegular/MyriadProCondRegular.ttf') format('truetype'),
url('include/MyriadProCondRegular/MyriadProCondRegular.otf') format('otf');
}
See here: https://css-tricks.com/snippets/css/using-font-face/
If this doesn't work, check that the URLs are correct and the fonts are being downloaded (no 404 errors in the network tab).
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