Jump to content
  • Шрифты для Invision Community




    Подключение собственных шрифтов в Invision Community

    Для этого понадобится загрузить шрифт в корень вашего сообщества, например в папку fonts. После чего переходим в файл custom.css и подключаем шрифт таким образом:

    @font-face { 
      font-family: 'Название'; 
      src: url('webfont.woff2') format('woff2'), 
           url('webfont.ttf')  format('truetype'),
           url('webfont.woff') format('woff'); 
      font-weight: normal; 
      font-style: normal; 
    }

    После подключения шрифта, его можно указывать к различным заголовкам или всему сайта:

    body {font-famuly: 'Название';}

    Мы добавили несколько интересных шрифтов для примера:

     

    Шрифты

    #1 - Oxygen

    Спойлер

    oxygen_font.png

    Oxygen.png

    Подключение Oxygen:

    @font-face { 
      font-family: Oxygen; 
      src: url('OxygenRegular.eot');
      src: url('OxygenRegular.ttf')  format('truetype'),
           url('OxygenRegular.woff') format('woff'); 
      font-weight: normal; 
      font-style: normal; 
    }

    Сам шрифт: OxygenRegular.zip

    #2 - LeksaSansPro

    Спойлер

    leksasanspro-font.png

    Подключение LeksaSansPro:

    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro.ttf);
      	font-weight:400;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-lightitalic.ttf);
      	font-weight:300;
      	font-style: italic;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-light.ttf);
      	font-weight:300;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-italic.ttf);
      	font-style: italic;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-extralightitalic.ttf);
      	font-weight:200;
      	font-style: italic;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-extralight.ttf);
      	font-weight:200;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-extrabolditalic.ttf);
      	font-weight:800;
      	font-style: italic;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-extrabold.ttf);
      	font-weight:800;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-demibolditalic.ttf);
      	font-weight:600;
      	font-style: italic;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-demibold.ttf);
      	font-weight:600;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-bolditalic.ttf);
      	font-weight:700;
      	font-style: italic;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-bold.ttf);
      	font-weight:700;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-blackitalic.ttf);
      	font-weight:900;
      	font-style: italic;
       }
    @font-face {
        font-family: leksasanspro;
        src: url(leksasanspro-black.ttf);
      	font-weight:900;
       }

    Сам шрифт - leksasanspro.zip

     





      Report запись


    User Feedback


    There are no comments to display.



    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...

Messenger

    ×
    ×
    • Create New...

    Important Information

    By using our site you agree to our Privacy Policy