Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #27045

    Hi there,

    Ive successfully implemented and using Bebas Neue on my website and it works on most browsers. Ive then attempted to use an additional google font (Allura) to do very occasional supplement titles. However, I just cant get it to work.

    An example of it is in the parallax container on my home page (www.andypeck.co.uk) where ive added the words “A Bit on the side:”. Its fine on my Mac and laptop but it doesnt work on IOS or PC’s (chrome or Safari)

    I gave it a class and called it up in the color container: thus…

    <h6 class=”script_header” style=”text-align: left; margin-left: 150px; margin-top: -10px;”><span style=”color: #dcd6cb;”>A Bit on the side:</span></h6>

    then in my CSS file I installed it thus:

    @font-face {

    font-family: ‘Allura-Regular';

    src: url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.oet’) format(‘truetype’),

    src: url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.oet?#iefix’) format(‘embedded-opentype’),

    url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.woff’) format(‘truetype’),

    url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.ttf’) format(‘truetype’),

    url(‘http://www.andypeck.co.uk/wp-content/themes/enfold-child/fonts/Allura-Regular.svg.svg#Allura-Regular’) format(‘svg’);

    font-style: normal;

    }

    finally, I setup the parameters with the following:

    h6.script_header {

    font-family: Allura-Regular,Geneva,Arial,Helvetica,sans-serif !important;

    font-size:3.5em;

    font-weight: 200 !important;

    }

    Any suggestions as to why it wont work on PC & IOS? I’m guessing ive done something but I can’t see the wood for the trees.

    Cheers as always

    Andy

    #132555

    Hi,

    To clear things up, is this the font you’re trying to use?

    http://www.google.com/fonts#UsePlace:use/Collection:Allura

    Did you this bit of code on your header.php?

    <link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>

    You should probably use:

    h6.script_header {
    font-family: 'Allura', cursive;
    font-size:3.5em;
    font-weight: 200 !important;
    }

    Regards,

    Ismael

    #132556

    Hi there,

    Allura is the font although I don’t recognise either of the first two lines of code you mention. I’ve got three fonts I’m using…

    Helvetica Neue as the body, Bebas Neue as the title header and then very occasionally Allura as a style font.

    I thought providing I just install them using the @fontface it should work. Clearly not however Bebas seems to work a treat so why can’t I follow suit with the other two?

    So what’s the best way to set these up and how can I establish Helvetiva Neue (and maybe some weight variants like bold and italic) as the body font. At the moment you mention it only for titles but not as a body font. Can I set Helvetica Neau (and variants) as the body font and Bebas as the title without having to write class after class?

    Oh and if a PHP file is in a folder within Enfold and I want to make a tweak to code what folder structure should I use within the child theme? Should it follow the same format or be left loose at the root of the child theme?

    Cheers as always. You guys are brilliant and have the patients of saints.

    Andy

    #132557

    BTW. Just tried out the ‘Cursive’ addition to css and it works for IOS so ill try it out on a PC when I get to work.

    I would still like to understand how to tidy this all up and have Bebas established properly as my TITLES, Helvetica Neue as my BODY and Allura as my STYLE FONT. Is there a tidy way to do this as ive been doing it all in my CSS file and its starting to get very long and untidy?

    Also I still dont know what you were referencing in the first two bits of your response… relevant now it works (on IOS)?

    Cheers

    Andy

    #132558

    Tried it on a PC and it DOESN’T work. Heres a Clipular book showing you how the font should look and a grab of what it looks like in situ on a PC.

    http://www.clipular.com/dashboard?Clipboard=c#!posts;search=%255C0allura

    Any thoughts?

    #132559

    Sorry to nag but any chance someone could look at the above?

    Need your help

    Thanks

    #132560

    Hi,

    Please add this on your functions.php, below line 3:

    add_filter( 'avf_google_heading_font',  'avia_add_heading_font');
    function avia_add_heading_font($fonts)
    {
    $fonts['Allura'] = 'Allura';
    return $fonts;
    }

    add_filter( 'avf_google_content_font', 'avia_add_content_font');
    function avia_add_content_font($fonts)
    {
    $fonts['Allura'] = 'Allura';
    return $fonts;
    }

    Edit header.php, then place this code on top of </head> tag.

    <link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>

    You can now assign the Allura font using custom.css or Quick CSS. For example, we’ll change the iconbox title:

    h3.iconbox_content_title {
    font-family: 'Allura' !important;
    }

    This is the screenshot:

    Regards,

    Ismael

    #132561

    Cheers Ismael,

    Can you explain if this is something I should do to all my fonts (Bebas Neue, Helvetica Neue & Allura) or is this unique to Allura as its a script font? Is this a new feature?

    If I do need to add all my fonts can you hint at how this should be setup and do I still need the fontface code?

    Cheers

    Andy

    #132562

    Hi,

    No, it is not a new feature, just a filter to add Google Fonts on the Theme Options > Styling. You won’t be needing the font face code if you’re using fonts from Google Fonts. Just add the name of the Google Font you want inside the filter:

    add_filter( 'avf_google_heading_font',  'avia_add_heading_font');
    function avia_add_heading_font($fonts)
    {
    $fonts['Allura'] = 'Allura';
    return $fonts;
    }

    add_filter( 'avf_google_content_font', 'avia_add_content_font');
    function avia_add_content_font($fonts)
    {
    $fonts['Allura'] = 'Allura';
    return $fonts;
    }

    Although, sometimes you need to declare the font family for some elements directly on your custom.css or Quick CSS.

    Regards,

    Ismael

    #132563

    Thats good news so….

    what happen regarding making the fonts responsive? Once ive added this code will it mean that Google fonts will be dealt with automatically as currently after ive declared fontface fonts I have change sizes with CSS to make them layout properly?

    Cheers

    Andy

    #132564

    Unless you are setting your font size with px then it will automatically size itself for the device.

    Eg, you can just set your font size using ems or % if its causing specific issues on a specific viewport.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Multiple font embedding’ is closed to new replies.