-
Posts
-
Hello,
I have OpenType and TruType font files, how can I use them with the theme?
Thanks in advance.are they free or payed font files ?
The reason why i ask this is because there are some sites which can make webfont files out of that:
Hey!
Please generate @font-face from the site @guenni007 posted above and add the fonts and CSS to your child theme – http://kriesi.at/documentation/enfold/using-a-child-theme/
Regards,
YigitHey Yigit,
I added the below in CSS but didn’t work:
@font-face {
font-family: ‘brandon_grotesqueblack’;
src: url(‘brandon_blk-webfont.woff2’) format(‘woff2’),
url(‘brandon_blk-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}h1 { font-family: brandon_grotesqueblack !important; }
@font-face {
font-family: ‘brandon_grotesquemedium’;
src: url(‘brandon_med-webfont.woff2’) format(‘woff2’),
url(‘brandon_med-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}p { font-family: brandon_grotesquemedium !important; }
Can you help me with this :)
Hi,
I tried to upload the .otf or woff files but I realized this type of file is not allowed, so I didn’t know which files I have to upload :)
Hi,
The fonts generated using fontsquirrel.com/tools/webfont-generator are web fonts and it should be supported. Please try again and upload the fonts folder to Enfold/css folder and add the @font-face CSS to custom.css file and it should work.
Let us know if you have any questions.
Best regards,
Vinaymy advice is to put in that webfonts folder either in uploads or in child-theme folder.
on font-squirell i choose the expert option to be sure that all fontfiles are created (woff, woff2, eot, ttf, svg)
i have a webfonts folder in the uploads folder and i do link with absolute path!
here is my test code for my brandon regular italic – homeurl is your url to your website
in the zip file downloaded from font-squirrel there is a stylesheet.css – from there you get the css rules
you only have to set the absolute path in front of all urls and put it into your quick css.@font-face { font-family: 'brandon_grotesqueRgIt'; src: url('http://homeurl/wp-content/uploads/webfonts/brandon/brandon_reg_it-webfont.eot'); src: url('http://homeurl/wp-content/uploads/webfonts/brandon/brandon_reg_it-webfont.eot?#iefix') format('embedded-opentype'), url('http://homeurl/wp-content/uploads/webfonts/brandon/brandon_reg_it-webfont.woff2') format('woff2'), url('http://homeurl/wp-content/uploads/webfonts/brandon/brandon_reg_it-webfont.woff') format('woff'), url('http://homeurl/wp-content/uploads/webfonts/brandon/brandon_reg_it-webfont.ttf') format('truetype'), url('http://homeurl/wp-content/uploads/webfonts/brandon/brandon_reg_it-webfont.svg#brandon_grotesqueRgIt') format('svg'); font-weight: normal; font-style: normal; }by the way : a nice css3 thing is : font-size-adjust it helps you to compensate the different x-height of fonts so f.e.
p { font-family: "brandon_grotesqueRgIt" !important; font-size-adjust: 0.5 }if you got troubles in that downloaded folder of font-squirrel there is a …demo.html
there are a lot of tipps and howto’sif you got troubles with some fonts look to : http://kriesi.at/documentation/enfold/enable-cors/
by the way: if you don’t like the font-family name ( font-family: ‘brandon_grotesqueRgIt’ ) as font-squirrel generates out of the original file –
it is not so easy only to change it here in the css , because in f.e. the svg – you can see the usage of these names if you will open the svg with a good text-editor (sublime text for mac, or notepad ++ for windows).I did not try to change it allthough it will be nice to have a better name like f.e. Brandon_Regular or Brandon_italic, Brandon_light etc)
i will check this soon if it is enough to change it in the css rule and in the svgs – the other files are coded)
- You must be logged in to reply to this topic.