custom font slabo 27px - Support | Kriesi.at

Tagged: custom font

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

Author

Posts
September 14, 2016 at 10:30 am #686244
BlutVampir
Participant
I know how to add google fonts, as I did that a lot earlier.

Also here is the info: https://kriesi.at/support/topic/new-custom-font/

I want to add following google font:
https://fonts.google.com/specimen/Slabo+27px

I did add the follogin code to the functions.php and the font is visible in the backend, bt when I selecting it, it doesn’t work (use fallback font):
```
add_filter( 'avf_google_heading_font',  'avia_add_heading_font',999);
add_filter( 'avf_google_content_font',  'avia_add_content_font',999);

function avia_add_heading_font($fonts)
{
	$fonts['Slabo+27px'] = 'Slabo+27px';
	return $fonts;
}
function avia_add_content_font($fonts)
{
	$fonts['Slabo+27px'] = 'Slabo+27px';
	return $fonts;
} 
```
I did tra already “sSlabo”, “Slabo+27px”, Slabo 27px” and nothing worked.

How can I get that font working?
September 14, 2016 at 10:39 am #686253
BlutVampir
Participant
ok, it seams the font is correctly loaded. But equalless when I select it in the backend of Enfold Theme Options to use that font, it is never shown.
I did select Slabo 27px by “Heading Font” and “Defines the Font for your body text”

I need to manually add a CSS code that it works:
```
body {
    font-family: 'Slabo 27px';
}
```
What doing Im wrong?
September 14, 2016 at 10:45 am #686257
BlutVampir
Participant
I did found more bugs…
```
add_filter( 'avf_google_content_font',  'avia_add_content_font');
function avia_add_content_font($fonts)
{
	$fonts['Slabo 27px'] = 'Slabo 27px';
	$fonts['Calibri'] = 'Calibri';
	return $fonts;
} 
```
When adding 2 fonts, the issue is that enfold try to load them via such an URL
http://fonts.googleapis.com/css?family=Calibri%7CSlabo+27px

should be:
http://fonts.googleapis.com/css?family=Calibri|Slabo+27px
something distrory the special char (on a new installed wp)

This leads to an error instead of the css files.
That need to be fixed!
- This reply was modified 8 years, 2 months ago by BlutVampir.
September 19, 2016 at 1:33 pm #688449
Yigit
Keymaster
Hi,

Please add following code to functions.php file in Appearance > Editor
```
add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Slabo 27px'] = 'Slabo 27px:300';
return $fonts;
}

add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts)
{

$fonts['Slabo 27px'] = 'Slabo 27px:300';
return $fonts;
}
```
If you are not using a child theme, please find following line in functions.php file of your parent theme near top
```
if(isset($avia_config['use_child_theme_functions_only'])) return;
```
and add the code i posted above to right below that line. If that still does not help, please create a temporary admin login and post it here privately.

Best regards,
Yigit
September 19, 2016 at 2:39 pm #688494
BlutVampir
Participant
Please read carefully the posts…
As said, it WORKS if I add only 1 font. Equalless if its “Slabo 27px:300” or “Slabo 27px”.

As soon as I add a secound font:
```
add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts) {
	$fonts['Slabo 27px'] = 'Slabo 27px:300';
	$fonts['Calibri'] = 'Calibri';
	return $fonts;
} 
```
It dowsn’t work anymore. Issue is, within the sourcecode, following line can be found then:
<link rel='stylesheet' id='avia-google-webfont' href='//fonts.googleapis.com/css?family=Calibri%7CSlabo+27px' type='text/css' media='all'/>
The issue is the following code: %7C as it should be a | char. Google is delivering back a 404 page instead of the CSS code for multiple fonts.
I did disable all Plugins, same issue…
September 19, 2016 at 2:44 pm #688498

Yigit
Keymaster

Hi!

Sorry about that!
Could you please let us know when your website is publicly accessible so we can look into it?

Best regards,
Yigit

September 19, 2016 at 2:57 pm #688511

BlutVampir
Participant

I did quick install enfold on test domain: same issue.

child theme. the code can be found in the functions.php of the child theme.

September 19, 2016 at 3:03 pm #688515

Yigit
Keymaster

Hey!

Functions.php file is not writable “Um diese Datei zu ändern, muss sie vom Server beschreibar sein.”.
Can you please make it writable or post FTP logins here as well?

Best regards,
Yigit

September 19, 2016 at 3:07 pm #688518

BlutVampir
Participant

now it is from web.

September 19, 2016 at 3:19 pm #688531

Yigit
Keymaster

Hey!

Sorry but still not writable on my end :/

Regards,
Yigit

September 19, 2016 at 3:30 pm #688538

BlutVampir
Participant

enfold-child/functions.php was writeable…
enfold/functions.php not..

Now both folders and all files are.

September 19, 2016 at 3:33 pm #688541
Yigit
Keymaster
Hi!

I changed the code to following one
```
add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts) {
	$fonts['Slabo 27px'] = 'Slabo 27px:300';
	$fonts['Calibri'] = 'Calibri:300';
	return $fonts;
}

add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts) {
	$fonts['Slabo 27px'] = 'Slabo 27px:300';
	$fonts['Calibri'] = 'Calibri:300';
	return $fonts;
}
```
And there is no error in console now. Please review your website

Best regards,
Yigit
September 19, 2016 at 3:42 pm #688549
BlutVampir
Participant
Really?

Are the fonts working? Only one…

Please find code:
```

<link rel='stylesheet' id='avia-google-webfont' href='//fonts.googleapis.com/css?family=Slabo+27px:300%7CCalibri' type='text/css' media='all'/> 
		<script type="text/javascript">
```
Open URL in browser:
http://fonts.googleapis.com/css?family=Slabo+27px:300%7CCalibri

Returned is only one font:
```
/* latin */
@font-face {
  font-family: 'Calibri';
  font-style: normal;
  font-weight: 400;
  src: local('Calibri'), url(https://fonts.gstatic.com/l/font?kit=YH3ek_qpdaY7ILI-bfzlYQ&skey=a1029226f80653a8&v=v8) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
```
not both. new issue.. no solution
September 19, 2016 at 3:58 pm #688558

Yigit
Keymaster

Hi!

I totally missed that Calibri is not a Google Font. That is why it did not work. To import custom fonts, please see – http://justcreative.com/2013/01/22/how-to-use-custom-fonts-with-font-face-on-wordpress/

Cheers!
Yigit

September 19, 2016 at 4:22 pm #688587

BlutVampir
Participant

Calibri is available and working:
https://fonts.googleapis.com/css?family=Calibri:400,700,400italic,700italic

September 19, 2016 at 4:32 pm #688594

Yigit
Keymaster

Hi!

It should not be working – http://imgur.com/a/jcJBS
Please add the font by referring to link i posted above using @font-face

Regards,
Yigit
Author

Posts

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

You must be logged in to reply to this topic.