[Support request] Install Custom Web Fonts (HTML Support)

Home Forums Support [Support request] Install Custom Web Fonts (HTML Support)

Home Forums Support Install Custom Web Fonts (HTML Support)

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #685789
    Sam

    Hi guys,

    Purchased a custom font, but i’m not sure how to add it to GP, especially the part mentioning adding it to HTML (does it mean that I have to add it to every page manually, or is there a hook for it?)

    Installing Webfonts
    Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

    1. Upload your webfonts
    You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

    2. Include the webfont stylesheet
    A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

    @font-face{
    font-family: ‘MyWebFont’;
    src: url(‘WebFont.eot’);
    src: url(‘WebFont.eot?#iefix’) format(’embedded-opentype’),
    url(‘WebFont.woff’) format(‘woff’),
    url(‘WebFont.ttf’) format(‘truetype’),
    url(‘WebFont.svg#webfont’) format(‘svg’);
    }
    We’ve already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

    <link rel=”stylesheet” href=”stylesheet.css” type=”text/css” charset=”utf-8″ />
    3. Modify your own stylesheet
    To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called “font-family.” The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the “font-family” property, inside the selector you want to change. For example:

    p { font-family: ‘WebFont’, Arial, sans-serif; }
    4. Test
    Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren’t loading in a particular browser.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #686060
    Leo
    Staff
    Customer Support
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.