0
Welcome Guest! Login
0 items Join Now

Adding a custom font that shows in the backend

Last Post
Search Topic
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 18

    Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    • Here's what I've done so far.

      I started by reading this:
      docs.gantry.org/gantry5/tutorials/fonts

      I have all my fonts in custom/fonts/font-name/

      That didn't show up in the font picker, it only showed "Roboto" as a local font.

      Then I read this:

      rockettheme.com/forum/gantry5-for-joomla...onts?start=0#1245861

      He talks about and shows the addition of a Yaml file, which I can't find mentioned in the tutorial, so perhaps it needs an update. I can do that if I work out the solution.

      So I found theme.yaml in /template/gantry/

      So I went to this well written document I was already aware of:
      docs.gantry.org/gantry5/advanced/customizing-theme-files

      I could see that it was possible to copy that file to template/custom/gantry/theme.yaml

      So I did that and copied the roboto local font format giving me this yaml code in the above file:


          parent: g5_hydrogen
    base: gantry-theme://common
    file: gantry-theme://include/theme.php
    class: \Gantry\Framework\Theme

  fonts:
    roboto:
      400: 'gantry-theme://fonts/roboto_regular_macroman/Roboto-Regular-webfont'
      500: 'gantry-theme://fonts/roboto_medium_macroman/Roboto-Medium-webfont'
      700: 'gantry-theme://fonts/roboto_bold_macroman/Roboto-Bold-webfont'
    din-alte:
      400: 'gantry-theme://fonts/din-alte/din1451alt.ttf'
      600: 'gantry-theme://fonts/din-alte-bold/din1451alt_G.ttf'

  css:
    compiler: \Gantry\Component\Stylesheet\ScssCompiler
    paths:
      - gantry-theme://scss
      - gantry-engine://scss

      I still don't see anything in the font picker. For completeness here is my custom.scss file


      @import "dependencies";
@import "mixins";
@import "colour-scheme";


@include font-face('din-alte', 'gantry-theme://fonts/din-alte/din1451alt.ttf', 400);
@include font-face('din-alte-bold', 'gantry-theme://fonts/din-alte-bold/din1451alt_g.ttf', 600);

.font-family-din-alte {
  font-family: 'din-alte',Helvetica,Arial,sans-serif;
  font-weight: normal;
  font-style: normal;
}
.font-family-din-alte-bold {
  font-family: 'din-alte-bold',Helvetica,Arial,sans-serif;
  font-weight: 600;
  font-style: normal;
}

      Can you see anything I have done wrong?
    • Owner of Square Balloon
    #1417832
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2679
    • Web Developer

    Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    • Please post your URL, Username and Password in Secure Tab and i will take a look and maybe figure out what the problem is.

      FTP info with Username and password is also necessary ...

      For posting sensitive information you hit the Blue Reply Button and then you will see Secure Tab. Post all info that is sensitive in there, only Fellow Mods, Staff and I can see that!
    • Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
    #1417834
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 18

    Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    • Thanks Damir, I really appreciate your time.

      Please could you let me know what the issue is when you find it? That way I can reenact this in the future without needing your help.

      Thanks again
    • Owner of Square Balloon
    #1417885

  • Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    • I've edited your theme.yaml file (the one that is not in custom) and now the font appears as an option. Unfortunately, the theme.yaml file cannot be used in the custom/ folder and therefore will be overwritten in the event of a template update.
    • Last Edit: 5 years 6 months ago by Reggie Simmons.

    • The following users have thanked you: Eoin

    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    #1417953
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2679
    • Web Developer

    Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    #1417954
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 18

    Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    #1417956
    • Damir's Avatar
    • Damir
    • Preeminent Rocketeer
    • Posts: 22450
    • Thanks: 2679
    • Web Developer

    Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    #1417958

  • Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    • Yah I'll have to make a point to edit that doc to note that theme.yaml cannot be added to custom/.

      But really, unless you want users to have the ability to pick different fonts, @include font-face in your custom.scss is sufficient. Then you can tie it to a class (as you already did) or variable like so (just add this to your custom.scss file):
      $font-family-din-alte: 'din-alte', Helvetica, Arial, sans-serif !default;

h2 {
 font-family: get-font-family($font-family-din-alte);
}
    • Last Edit: 5 years 6 months ago by Reggie Simmons.

    • The following users have thanked you: Eoin

    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    #1417960
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 18

    Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    • You the man, top tip. Thanks. Yes, that should be absolutely fine :)
    • Owner of Square Balloon
    #1417976

  • Re: Adding a custom font that shows in the backend

    Posted 5 years 6 months ago
    #1417981

Time to create page: 0.087 seconds