-
Posts
-
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
Hi,
To clear things up, is this the font you’re trying to use?
http://www.google.com/fonts#UsePlace:use/Collection:AlluraDid 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
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
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
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?
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
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
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
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
- The topic ‘Multiple font embedding’ is closed to new replies.