0
Welcome Guest! Login
0 items Join Now

Adding a custom font that shows in the backend

    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 413
    • Thanks: 17

    Re: Adding a custom font that shows in the backend

    Posted 4 years 4 months ago
    • @reggi although this works, my concern is that the theme file changes and the font picker work is undone. Because this would potentially change all fonts, I decided to remove the change in the theme YAML and do it the manual way using CSS as you showed.

      I think one major downside of this is that it loads multiple fonts for no reason. Can you think of a way NOT to load the fonts from the picker?

      At the moment my solution is to use "Karla" font for both the heading and the body (just one weight, normal). I choose Karla because it is apparently the lightest (175k) and I choose normal because apparently that is the lightest too. This at least reduces the second font size, but I'd rather remove them altogether if possible.

      Can you think of any smart ideas? I assume on potential solution is to build a plugin to remove those fonts before load. Is there an easier or better solution?
    • Just a lonely web designer trying to make his way
  • Re: Adding a custom font that shows in the backend

    Posted 4 years 4 months ago
    • The only font-face calls I am seeing in any of your css-compiled files is for the din-alte:
    • The following users have thanked you: Eoin

    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
  • Re: Adding a custom font that shows in the backend

    Posted 4 years 4 months ago
    • And yes removing the info from the theme.yaml file is fine.
    • Last Edit: 4 years 4 months ago by Reggie Simmons.
    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 413
    • Thanks: 17

    Re: Adding a custom font that shows in the backend

    Posted 4 years 4 months ago
    • Oh awesome, so it's not calling the other font as well. What a win. Thanks so much for your help.
    • Just a lonely web designer trying to make his way
  • Re: Adding a custom font that shows in the backend

    Posted 4 years 4 months ago
  • Re: Adding a custom font that shows in the backend

    Posted 4 years 4 months ago
    • I'd also note that if you want to eliminate the font picker altogether, you can add a blank font.yaml file in the following path:

      This image is hidden for guests.
      Please log in or register to see it.
    • The following users have thanked you: Eoin

    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 413
    • Thanks: 17

    Re: Adding a custom font that shows in the backend

    Posted 4 years 4 months ago
    • Nice! That will stop a lot of confusion. I think in some cases I'll leave it, but it certainly would help stop those pesky client's from fiddling ha ha

      This image is hidden for guests.
      Please log in or register to see it.
    • Just a lonely web designer trying to make his way
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 413
    • Thanks: 17

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

    Posted 4 years 4 months ago
    • I'm now getting an error where I receive a 404 error for Woff2, Woff, ttf.

      I have ttf files, but no Woff or Woff2 files exist. How can I stop Gantry calling the missing files and why is it a 404 error for the files that exist?

      I removed the get_font mixin you sent me as I thought that may be causing it. Is there anything else that could be causing this problem?

      Here's my code:


      @include font-face('din-alte', 'gantry-theme://fonts/din-alte/din1451alt', 400);
      @include font-face('din-alte-bold', 'gantry-theme://fonts/din-alte-bold/din1451alt_g', 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;
      }
      
      $font-family-din-alte:      'din-alte', Helvetica, Arial, sans-serif !default;
      $font-family-din-alte-bold: 'din-alte-bold', Helvetica, Arial, sans-serif !default;
      
      body {
          font-family: $font-family-din-alte;   
      }
      
      h1, h2, h3, h4, h5 {
       font-family: $font-family-din-alte-bold;
       font-weight: 600;
      }
    • Last Edit: 4 years 4 months ago by Eoin.
    • Just a lonely web designer trying to make his way
  • Re: Adding a custom font that shows in the backend

    Posted 4 years 4 months ago
    • You just need to create a font file that has the extension woff / woff2 with that same font name and the error will no longer display.
    • The following users have thanked you: Eoin

    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    • Eoin's Avatar
    • Eoin
    • Hero Rocketeer
    • Posts: 413
    • Thanks: 17

    Re: Adding a custom font that shows in the backend

    Posted 4 years 2 months ago
    • I am now seeing this in the console. Could this be related? I effectively created an empty file just for this reason.


      downloadable font: rejected by sanitizer (font-family: "din-alte" style:normal weight:400 stretch:100 src index:1) source: https://www.xxxxxxxx/templates/g5_hydrogen/custom/fonts/din-alte/din1451alt.woff2
      downloadable font: rejected by sanitizer (font-family: "din-alte-bold" style:normal weight:600 stretch:100 src index:1) source: https://www.xxxxxxxx/templates/g5_hydrogen/custom/fonts/din-alte-bold/din1451alt_G.woff2
      downloadable font: rejected by sanitizer (font-family: "din-alte" style:normal weight:400 stretch:100 src index:2) source: https://www.xxxxxxxx/templates/g5_hydrogen/custom/fonts/din-alte/din1451alt.woff
      downloadable font: rejected by sanitizer (font-family: "din-alte-bold" style:normal weight:600 stretch:100 src index:2) source: https://www.xxxxxxxx/templates/g5_hydrogen/custom/fonts/din-alte-bold/din1451alt_G.woff
    • Just a lonely web designer trying to make his way

Time to create page: 0.056 seconds