Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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

    #560952

    Hey 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!
    Elliott

    #561118

    Hi 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

    #561353

    Hi!

    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,
    Yigit

    #561399

    I 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

    #561406

    Hi!

    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,
    Yigit

    #561424

    Awesome! Now it works!

    Thank you Yigit. Have a nice day.

    Simon

    #561426

    Hi!

    You are welcome Simon! Glad we could help :)
    You too have a nice day!

    Cheers!
    Yigit

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Add custom font’ is closed to new replies.