Tagged: custom font
-
AuthorPosts
-
January 6, 2016 at 5:57 pm #560679
Hi,
i tired to add a custom font without success.
I read several posts but could not manage it.
WHat it did is: created a new folder in the enfold folder named “font”. Loaded the two fonts in it.
Then i put this code in the custom.css
/* Spezial Schrift Honey Script Light */ @font-face { font-family: Honey Script Light; src: url('myurl/wp-content/themes/enfold/font/HoneyScript-Light.ttf'); } /* Spezial Schrift Honey Script SemiBold */ @font-face { font-family: Honey Script SemiBold; src: url('myurl//wp-content/themes/enfold/font//HoneyScript-SemiBold.ttf');
(Later i tried to put it in the style.css in of the child theme folder. -which is the right one?)
Then i put this code in quick css
h4 { font-family: Honey Script Light; font-size: 16px; }
…without success.
i tired to make some sentences with this font in html in the layout builder
<p style="Honey Script Light;">This is a paragraph.</p>
…but this also failed. Now i need some help please. Thanks Simon
January 7, 2016 at 3:58 am #560952Hey simonac!
I would try the font squirrel service out, http://www.fontsquirrel.com/tools/webfont-generator. It gives you all of the CSS needed.
If you want to use the font in the Enfold styling settings then do this, https://kriesi.at/support/topic/installing-own-fonts/#post-421325.
Cheers!
ElliottJanuary 7, 2016 at 11:54 am #561118Hi Elliot,
so i made it with the fontsquirrel generator. I copied the generated fonts in the new fonts folder in enfold theme folder.
Copied the code in the style.css of the child theme. There i made the links ot the font to the folder.But what next? How to apply the font to choosen Text?
<p style="honey_scriptlight;">This is a paragraph.</p>
<p style="font-family: 'honey_scriptlight';">This is a paragraph2.</p>
I tried these two but it did not work in the Text-Block html area.
Thanks Simon
January 7, 2016 at 4:38 pm #561353Hi!
You can turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your element a custom class and then add following code to Quick CSS in Enfold theme options under General Stlying tab
.your-custom-class * { font-family: 'honey_scriptlight' !important; }
Best regards,
YigitJanuary 7, 2016 at 6:02 pm #561399I am sorry but i can’t not get it work.
Where do i have to put the code in i got from font squirrel? In the Custom.css or in the style.css?
I also tried with this method :
https://kriesi.at/support/topic/various-headingssizescolors-of-text-in-same-text-block/
And i do not only want to have a complete section with this font but have it mixed with the normal font in one sentence / section – so i need the html as well.
Thanks Simon
January 7, 2016 at 6:11 pm #561406Hi!
In that case, please change the code to following one
.your-custom-class { font-family: honey_scriptlight !important; }
and then add your custom HTML as following
<div><span class"your-custom-class">here goes your text with your font</span>and this is other text</div>
Regards,
YigitJanuary 7, 2016 at 6:34 pm #561424Awesome! Now it works!
Thank you Yigit. Have a nice day.
Simon
January 7, 2016 at 6:37 pm #561426 -
AuthorPosts
- The topic ‘Add custom font’ is closed to new replies.