Installing own fonts - Support | Kriesi.at

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

Author

Posts
March 30, 2015 at 2:17 pm #420420
alexhell
Participant
Hi,
I made a search, but I am still not sure, what to do. I want to disable google font api and use my fonts, which are already on my webspace.

As I read before, I need to disable google fonts by choosing a websafe Font. But how to customize the theme. Child theme is installed.

I want, that all text will be in PT Sans. I already downloaded it here: and uploaded it to my webspace.
In the paratype folder is for each font two stylesheets. One for regular, one for bold. For example:
```
/* Generated by ParaType (http://www.paratype.com)*/
/* Font PT Mono: Copyright © ParaType, 2013. All rights reserved.*/

@font-face {
	font-family: <strong>'PTMonoRegular</strong>';
	src: url('PTM55F_W.eot');
	src:
	     url('PTM55F_W.eot?#iefix') format('embedded-opentype'),
	     url('PTM55F_W.woff') format('woff'),
	     url('PTM55F_W.ttf') format('truetype'),
	     url('PTM55F_W.svg#PTMono-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
```
I would like to have PT Sans Caption for headline and Sans Regular normal text, Sans Italic for “emphasis”, Sans Bold for bold and Sans Mono for .
How to install this fonts proper and disable google fonts permanently. Thanks in advance!
BTW., Ihr könnt auch auf deutsch antworten!
- This topic was modified 9 years, 7 months ago by alexhell.
March 31, 2015 at 4:50 pm #421325
Elliott
Inactive Moderator
Hi Alex!

If you don’t have a child theme already then download one here, http://kriesi.at/documentation/enfold/downloads/, and then add this to the bottom of the child theme functions.php file.
```
add_action( 'init', 'enfold_customization_swtich_fonts' );
function enfold_customization_swtich_fonts() {
    global $avia;
    $avia->style->print_extra_output = false;
}

add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
	$fonts['Test'] = 'Test';
	return $fonts;
}
add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts)
{
	$fonts['Test'] = 'Test';
	return $fonts;
}
```
And change all areas of “Test” with the name of your font you wish to use. You should then be able to select your new font in the enfold theme options. You still have to link to it via CSS but I think this should work if you want to disable google fonts and use your own.

Regards,
Elliott
- This reply was modified 9 years, 6 months ago by Elliott.
April 3, 2015 at 5:54 pm #423192

alexhell
Participant

Hi Elliott,

looks like it works. I will check it with several browsers, but from my pc and phone it looks ok.

One question more: can I make my code section make looking the same like here? That the first line has another color than the second?

April 3, 2015 at 6:24 pm #423212

Yigit
Keymaster

Hey!

You can use PRE and CODE tags as example here – http://pastebin.com/R7yNdCTm

Regards,
Yigit

April 4, 2015 at 12:13 pm #423428
alexhell
Participant
Hi Yigit,
I tried, but didnt succeed.
```
 makes a border around my code section and  turns section into monospace. This is all nice, but I still miss the changing of the background color. Some suggestions?
```
April 6, 2015 at 12:15 pm #423883
Ismael
Moderator
Hey!

You can change the pre tag background with this on Quick CSS:
```
pre {
  background-image: -webkit-linear-gradient(rgba(255, 5, 8, .05) 50%, transparent 50%, transparent);
  background-image: -moz-linear-gradient(rgba(255, 5, 8, .05) 50%, transparent 50%, transparent);
  background-image: linear-gradient(rgba(255, 5, 8, .05) 50%, transparent 50%, transparent);
  background-size: 100% 4em;
}
```
Adjust the gradient.

Regards,
Ismael
April 6, 2015 at 7:04 pm #424142

alexhell
Participant

Hi Ismael,

I add your code to quick css, but can’t see any changes.

Regards,
Axel

April 6, 2015 at 7:16 pm #424150

Yigit
Keymaster

Hey!

It does work fine on my local installation without adding any additional CSS code – http://imgur.com/a/Cq6Go
Please make sure to add HTML tags in Text tab

Regards,
Yigit

April 7, 2015 at 8:45 am #424516

alexhell
Participant

Hello Yigit, hello Ismael,

both background colors are so similar, that I couldn’t see the different. Sorry for that. I played a bit with the enfold styles, but couldnt find out, which parameter I need to adjust to change the 2nd backcolor to a more seeable different.

April 7, 2015 at 3:10 pm #424727

Yigit
Keymaster

Hey!

Can you please post the link to your page where we can see an example?

Regards,
Yigit

April 8, 2015 at 10:25 pm #425627

alexhell
Participant

This reply has been marked as private.

April 8, 2015 at 10:26 pm #425628

alexhell
Participant

http://iudica.me/about/iudica-schutz/ if you scroll down, you will see two code areas.

I also mentioned, that Pt Sans isn’t supported for bold, small and italic.

for example

http://iudica.me/faq/

my styles.css looks like

`/* Generated by ParaType Ltd (http://www.paratype.com)*/
/* Font PT Serif: Copyright © 2010 ParaType Ltd. All rights reserved.*/

@font-face {font-family: ‘PT Sans’;
src: url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/pts55f_w.eot’);
src: local(‘PT Sans’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS55F_W.eot?#iefix’) format(’embedded-opentype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS55F_W.woff’) format(‘woff’),url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS55F_W.ttf’) format(‘truetype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS55F_W.svg#PTSans-Regular’) format(‘svg’);}

@font-face {font-family: ‘PT Sans’;
font-style: italic;
src: url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/pts56f_w.eot’);
src: local(‘PT Sans Italic’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS56F_W.eot?#iefix’) format(’embedded-opentype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS56F_W.woff’) format(‘woff’),url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS56F_W.ttf’) format(‘truetype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS56F_W.svg#PTSans-Italic’) format(‘svg’);}

@font-face {font-family: ‘PT Sans’;
src: url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/pts75f_w.eot’);
font-style: normal;
font-weight: bold;
src: local(‘PT Sans Bold’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS75F_W.eot?#iefix’) format(’embedded-opentype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS75F_W.woff’) format(‘woff’),url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS75F_W.ttf’) format(‘truetype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS75F_W.svg#PTSans-Bold’) format(‘svg’);}

@font-face {font-family: ‘PT Sans’;
font-style: italic;
font-weight: bold;
src: url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/pts76f_w.eot’);
src: local(‘PT Sans Bold Italic’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS76F_W.eot?#iefix’) format(’embedded-opentype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS76F_W.woff’) format(‘woff’),url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS76F_W.ttf’) format(‘truetype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTS76F_W.svg#PTSans-BoldItalic’) format(‘svg’);}

@font-face {font-family: ‘PT Sans Caption’;
src: url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/ptc55f_w.eot’);
src: local(‘PT Sans Caption’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTC55F_W.eot?#iefix’) format(’embedded-opentype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTC55F_W.woff’) format(‘woff’),url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTC55F_W.ttf’) format(‘truetype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTC55F_W.svg#PTSans-Caption’) format(‘svg’);}

@font-face {font-family: ‘PT Sans Caption’;
font-weight: bold;
src: url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/ptc75f_w.eot’);
src: local(‘PT Sans Caption Bold’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTC75F_W.eot?#iefix’) format(’embedded-opentype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTC75F_W.woff’) format(‘woff’),url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTC75F_W.ttf’) format(‘truetype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTC75F_W.svg#PTSans-CaptionBold’) format(‘svg’);}

@font-face {font-family: ‘PT Sans Narrow’;
src: url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/ptn57f_w.eot’);
src: local(‘PT Sans Narrow’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTN57F_W.eot?#iefix’) format(’embedded-opentype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTN57F_W.woff’) format(‘woff’),url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTN57F_W.ttf’) format(‘truetype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTN57F_W.svg#PTSans-Narrow’) format(‘svg’);}

@font-face {font-family: ‘PT Sans Narrow’;
font-weight: bold;
src: url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/ptn77f_w.eot’);
src: local(‘PT Sans Narrow Bold’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTN77F_W.eot?#iefix’) format(’embedded-opentype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTN77F_W.woff’) format(‘woff’),url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTN77F_W.ttf’) format(‘truetype’), url(‘/var/www/virtual/eve15/hellinger.eu/fonts/PTSansWeb/PTN77F_W.svg#PTSans-NarrowBold’) format(‘svg’);}
`

how I can adjust, that if I choose bold, the specific bold font, if I choose italic, the specific italic and if I choose bold, italic, the bold-italic font is loaded?

Pt Sans Caption is optimized for small font size. I watched in the base.css, bt no idea to set all this in this environment.

Thanks for your efforts!

April 10, 2015 at 4:42 am #426309
Yigit
Keymaster
Hi!

1- Please add following code to Quick CSS as well
```
pre { background-color: white; color: black; }
```
2- Please make sure to add your Google Fonts in the way suggested here – http://kriesi.at/documentation/enfold/register-additional-google-fonts-for-theme-options/

Cheers!
Yigit
April 10, 2015 at 9:51 pm #426802
alexhell
Participant
1. Was going in this direction. But black and white didnt fit to much to the theme. I changed
```
pre{
background-image: -webkit-linear-gradient(rgba(0, 0, 0, .50) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(0, 0, 0, .50) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(0, 0, 0, .50) 50%, transparent 50%, transparent);
}
```
This looks a bit better.

2. Sorry, wasnt related to the theme. Its a problem of firefox. I didnt mentioned it, because my browser was loading the font form the local installation. Just after I removed it from my pc, I find out, that the font isnt loaded.
I insert
```
# begin pt sans laden
AddType application/font-woff .woff
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
<FilesMatch "\.(woff|ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
# end pt sans laden
```
into the .htaccess and now fonts are loading.

Thanks!
April 13, 2015 at 4:08 am #427263

Rikard
Keymaster

Hi!

Great! Glad you got it fixed.

Cheers!
Rikard

November 3, 2015 at 3:49 pm #529354
SimonPL
Participant
If I need to add one font it works OK. But what if I would like to add two custom fonts?

I have code in css:
```
@font-face {
  font-family: 'Segoe UI Light';
  src: url('fonts/SegoeUILight/SegoeUI-Light.woff') format('woff'), url('fonts/SegoeUILight/SegoeUI-Light.ttf')  format('truetype'), url('fonts/SegoeUILight/SegoeUI-Light.svg#SegoeUI-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Segoe UI';
  src: url('fonts/SegoeUI/SegoeUI.eot?#iefix') format('embedded-opentype'),  url('fonts/SegoeUI/SegoeUI.woff') format('woff'), url('fonts/SegoeUI/SegoeUI.ttf')  format('truetype'), url('fonts/SegoeUI/SegoeUI.svg#SegoeUI') format('svg');
  font-weight: normal;
  font-style: normal;
}
```
and in functions.php
```
add_action( 'init', 'enfold_customization_swtich_fonts' );
function enfold_customization_swtich_fonts() {
    global $avia;
    $avia->style->print_extra_output = false;
}

add_filter( 'avf_google_heading_font', 'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
	$fonts['Segoe UI Light'] = 'Segoe UI Light';
	return $fonts;
}
add_filter( 'avf_google_content_font', 'avia_add_content_font');
function avia_add_content_font($fonts)
{
	$fonts['Segoe UI Light'] = 'Segoe UI Light';
	return $fonts;
}

add_theme_support('avia_template_builder_custom_css');
```
When i duplicate the code in functions.php my website is crashed :/
November 3, 2015 at 4:30 pm #529421
Elliott
Inactive Moderator
Hi!

Just add the second font right below the first one.
```
$fonts['Segoe UI Light'] = 'Segoe UI Light';
$fonts['Segoe UI'] = 'Segoe UI';
```
Cheers!
Elliott
December 11, 2015 at 2:15 pm #551061

RonTek
Participant

This works like a charm. Thx a lot!
Author

Posts

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

The topic ‘Installing own fonts’ is closed to new replies.