Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • March 30, 2015 at 2:17 pm #420420
    alexhell

    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

    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, 7 months ago by Elliott.
    April 3, 2015 at 5:54 pm #423192
    alexhell

    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

    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

    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

    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

    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

    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

    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

    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
    This reply has been marked as private.
    April 8, 2015 at 10:26 pm #425628
    alexhell

    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

    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

    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

    Hi!

    Great! Glad you got it fixed.

    Cheers!
    Rikard

    November 3, 2015 at 3:49 pm #529354
    SimonPL

    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

    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

    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.