Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • September 3, 2015 at 2:57 pm #497664
    khoogteyling

    Hi Kreisi, hope you can help:

    I use GoogleFont ‘Droid Sans’ for body and would like to add a custom font ‘SansaSoftSmConPro-Light.eot /otf /ttf /woff’ bought from FontShop.com, for H1-H6. I searched already for your guidance but no results whatever I tried mentioned in the Forum.
    I use an Enfold-Child theme, so I have enfold-child/functions.php and …style.css available. Currently I work on a local installed theme for development. Hope you can help me out. I prefer the @font-face expression. My coding so far:

    In …/enfold-child/customfont I have put the 4 font-files.
    In …/enfold-child/style.css I have put the code:

    @font-face {
    font-family:”SansaSoftSmConPro-Light”;
    src:
    url(…enfoldchild/customfont/SansaSoftSmConPro-Light.eot) format(“eot”),
    url(…enfoldchild/customfont/SansaSoftSmConPro-Light.otf) format(“otf”),
    url(…enfoldchild/customfont/SansaSoftSmConPro-Light.eot) format.ttf) format(“truetype”),
    url(…enfoldchild/customfont/SansaSoftSmConPro-Light.eot) format.woff) format(“woff”),
    font-weight:normal;
    font-style:normal;
    }

    Under ‘Website Styling’, under Tab Fonts I added:

    h1, h2, h3, h4, h5, h6 {
    font-family:”SansaSoftSmConPro-Light”;
    }

    But not showing after Refresh… only showing Helvetica

    September 3, 2015 at 2:59 pm #497669
    Yigit

    Hey khoogteyling!

    Have you referred to this post – http://justcreative.com/2013/01/22/how-to-use-custom-fonts-with-font-face-on-wordpress/?

    Regards,
    Yigit

    September 3, 2015 at 3:20 pm #497689
    khoogteyling

    Yes, I found that post helpful, but no results (on screen). Is my font-naming correct or just wrong, causing the problems?
    Or beacuse I work locally and have difficulties to write a direct URL? Or should I disable Google-fonts used? Hope you can help me out.

    • This reply was modified 9 years, 2 months ago by khoogteyling.
    September 4, 2015 at 10:48 am #498213
    Josue

    Hey!

    Something should have popped in the Console (Dev Tools), you can open it with CMD / Ctrl + Alt + J. In any case it would be more convenient if you could upload the site so we can check it on our ends.

    Regards,
    Josue

    September 7, 2015 at 9:53 am #499138
    khoogteyling

    I hope I can provide you with logins of the public test site today…

    September 7, 2015 at 4:14 pm #499334
    Yigit

    Hey!

    We will keep the thread open and will wait to hear from you :)

    Best regards,
    Yigit

    September 7, 2015 at 9:48 pm #499537
    khoogteyling

    Okay, I think I have set things ready for the custom font implementation. Details are set in Private Content. Could you help me out, and show me where things are put?

    In the domain I created a folder for ‘customfonts’ with the suppled fonts in it (SansaSoftSmConPro-Light).
    All within folder ‘enfold-child’ where my child theme resides.

    So far I tried the code mentioned in private but no appearence of the custom font…

    PS: Maybe it is more cnvenient to add Droid Serif in this way as well, so only one way of addressing the fonts used?
    PS: Now the Heading font is set in orange Google font ‘Dosis’, this should be replaced with the custom ‘Sansa Soft’

    • This reply was modified 9 years, 2 months ago by khoogteyling.
    September 7, 2015 at 10:25 pm #499555
    Josue

    Hey!

    If you access the font file directly it returns a 404 error:

    Best regards,
    Josue

    September 8, 2015 at 8:00 am #499697
    khoogteyling

    Hi Josue, you are right, I think I made mistake at the right path. An immediate download starts when I use the new URL, in private content. Could you have a look again, please?

    September 8, 2015 at 11:38 am #499772
    Josue

    Replace the contents of your child style.css with the following:

    /*
Theme Name: Postharvestnetwork theme
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold WordPress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 0.1.0
Author: www.hoogteyling.nl
Author URI:  www.hoogteyling.nl
Template: enfold
*/

/*Add your own CUSTOM FONT here:*/
@font-face {
font-family:"SansaSoftSmConPro-Light";
src:
url(https://new.postharvestnetwork.nl/wp-content/themes/enfold-child/customfonts/SansaSoftSmConPro-Light/SansaSoftSmConPro-Light.eot) format("eot"),
url(https://new.postharvestnetwork.nl/wp-content/themes/enfold-child/customfonts/SansaSoftSmConPro-Light/SansaSoftSmConPro-Light.otf) format("otf"),
url(https://new.postharvestnetwork.nl/wp-content/themes/enfold-child/customfonts/SansaSoftSmConPro-Light/SansaSoftSmConPro-Light.ttf) format("truetype"),
url(https://new.postharvestnetwork.nl/wp-content/themes/enfold-child/customfonts/SansaSoftSmConPro-Light/SansaSoftSmConPro-Light.woff) format("woff"),
font-weight:normal;
font-style:normal;
}

/*Add your own styles here:*/
html.responsive, .responsive body{
		overflow-x: hidden;

	}
	

	/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family:”SansaSoftSmConPro-Light”;
text-transform: uppercase;
}
    September 8, 2015 at 12:27 pm #499786
    khoogteyling

    Thank you for your input, but … still wrong displays of type: see img. Do I need to reset all the (already made) settings in theme’s General Styling / Fonts? Or set to ‘Default’?
    I deleted already the Quick CSS code to try to solve this? Almost there, I think ;)

    September 8, 2015 at 12:31 pm #499790
    Josue

    Can you make the theme files writable from the Dashboard or provide a temporary FTP account?

    September 8, 2015 at 12:38 pm #499796
    khoogteyling

    Here you are — btw I see my theme looks completely out of order at this moment… I will not touch it for an hour or so?
    Thanks in advance!

    • This reply was modified 9 years, 2 months ago by khoogteyling.
    September 8, 2015 at 5:33 pm #500024
    khoogteyling

    Sorry Kreisi-Support, tomorrow a demonstration of the site so far… I re-adjusted with Google font Dosis for now — please leave it this way for my demo on 9th of september. I’ll send you a message when ready…

    September 8, 2015 at 10:33 pm #500132
    Josue

    OK, looking forward to hearing from you.

    Regards,
    Josue

    September 9, 2015 at 10:37 am #500285
    khoogteyling

    Hello Kreisi, Josue,
    The site is free for you to alter the style-css to add the custom font

    September 10, 2015 at 1:42 am #500786
    Josue

    Check it.

    Regards,
    Josue

    September 10, 2015 at 2:04 pm #501029
    khoogteyling

    Dear Josue, thanx so much, you helped me very much! A question related: in panel Quick CSS I have made some alterations. Could I — without doing harm to the code you made — put / add this Quick CSS code into enfold-child’s ‘style.css’, under the font codes?

    September 11, 2015 at 6:06 am #501413
    Rikard

    Hey,

    That should work yes, but please be sure to back up the code you have in Quick CSS just in case.

    Best regards,
    Rikard

    September 14, 2015 at 10:32 am #502564
    khoogteyling

    Thx Kreisi and support! Case closed with gratitude!

    September 14, 2015 at 10:59 am #502589
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Add Custom Font 'SansaSoftSmConPro-Light.eot' from FontShop.com’ is closed to new replies.