RocketTheme - TOPIC: Adding a custom font that shows in the backend (2/3)

Welcome Guest! Login

0 items Join Now

- Eoin
- Hero Rocketeer
- Posts: 424
- Thanks: 18
Re: Adding a custom font that shows in the backend

Posted 5 years 6 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?
- Owner of Square Balloon
#1418041
- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
Re: Adding a custom font that shows in the backend

Posted 5 years 6 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
#1418045
- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
Re: Adding a custom font that shows in the backend

Posted 5 years 6 months ago
- And yes removing the info from the theme.yaml file is fine.
- Last Edit: 5 years 6 months ago by Reggie Simmons.
- Kind regards,
  Reggie
  
  Learn to code for free.
  www.freecodecamp.org
#1418046
- Eoin
- Hero Rocketeer
- Posts: 424
- Thanks: 18
Re: Adding a custom font that shows in the backend

Posted 5 years 6 months ago
- Oh awesome, so it's not calling the other font as well. What a win. Thanks so much for your help.
- Owner of Square Balloon
#1418047
- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
Re: Adding a custom font that shows in the backend

Posted 5 years 6 months ago
- You're welcome!
- Kind regards,
  Reggie
  
  Learn to code for free.
  www.freecodecamp.org
#1418049
- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
Re: Adding a custom font that shows in the backend

Posted 5 years 6 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
#1418050
- Eoin
- Hero Rocketeer
- Posts: 424
- Thanks: 18
Re: Adding a custom font that shows in the backend

Posted 5 years 6 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.
- Owner of Square Balloon
#1418062

Eoin
Hero Rocketeer
Posts: 424
Thanks: 18

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

Posted 5 years 5 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: 5 years 5 months ago by Eoin.
Owner of Square Balloon

#1419208

- Reggie Simmons
- Preeminent Rocketeer
- Posts: 5200
- Thanks: 530
Re: Adding a custom font that shows in the backend

Posted 5 years 5 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
#1419211

Eoin
Hero Rocketeer
Posts: 424
Thanks: 18

Re: Adding a custom font that shows in the backend

Posted 5 years 3 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

Owner of Square Balloon

#1420998

Time to create page: 0.078 seconds