Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Alan Draper 56 posts 139 karma points
    15 days ago
    Alan Draper
    0

    Custom Fonts not working in Block Grid

    I have fonts set in /css/rte.css and was hoping to use those for the RTE and for rendering text in Block Grid components in the back office. It looks great in the RTE

    Looks good

    But in the Block Grid it looks like this:

    No fonts

    Any idea why it would work in one and not the other? This is on all my block components, not just the "Rich Text" one.

    Copy Link
  • Alan Draper 56 posts 139 karma points
    15 days ago
    Alan Draper
    0

    One more thing I noticed: in the element inspector, the font-family is set to "Gotham-Black" correctly, but the Rendered Fonts says Times New Romanenter image description here

    Copy Link
  • Tarik 196 posts 840 karma points c-trib
    15 days ago
    Tarik
    0

    Can you post the rte.css section where you apply your font?

    Copy Link
  • Alan Draper 56 posts 139 karma points
    14 days ago
    Alan Draper
    0 
    @import 'fonts.css';


div.block-row {
    margin: 1rem 0;
    background-color: #efefef;
}

div.block-item {
    background-color: white;
    border: 1px solid #ddd;
    padding: 1rem;
    margin: 1rem;
}

div.standardRow {
    padding: 1rem 10rem;
}

h6.block-control-label {
    font-size: 0.9rem;
    background-color: #efefef;
    padding: 0.5rem;
    margin: 0 0 1rem 0;
    font-family: monospace;
}

.block-item * {
    max-width: 100%;
}

.block-item pre {
    overflow-x: auto
}

.block-item img {
    width: 100%;
}


* {
    font-family: Gotham-Book;
}
/**umb_name:H2*/
h2 {
    font-family: Gotham-Black;
    font-size: 2.5em;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-weight: 900;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}
/**umb_name:H3*/
h3 {
    font-family: Gotham-Bold;
    font-size: 2em;
    line-height: 1.25;
    letter-spacing: -0.05em;
    font-weight: 900;
    margin: 0 0 1rem 0;
}
/**umb_name:H4*/
h4 {
    font-family: Gotham-Bold;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}
/**umb_name:H5*/
h5 {
    font-family: Gotham-Bold;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    margin: 0 0 1rem 0;
}
/**umb_name:H6*/
h6 {
    font-family: Gotham-Bold;
    font-size: 1em;
    letter-spacing: 0.05em;
    font-weight: 900;
    margin: 0 0 1rem 0;
}
/**umb_name:Quotation*/
blockquote {
}
/**umb_name:Cite*/
cite {
}
/**umb_name:Gold Button*/
a.btn {
}
/**umb_name:Dark Button*/
a.btn-dark {
    font-family: Gotham-Black;
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    background-color: #000000;
    color: #ffffff;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border: 4px solid #ffb81c;
    padding: .5rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border-color: #000000;
}
    .btn-dark:hover{
        color: #000000;
        background-color: #ffffff;
    }

    .btn-dark:focus{
        outline: none;
    }
/**umb_name:Clear Button*/
a.btn-clear {
    font-family: Gotham-Black;
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    background-color: transparent;
    color: #000000;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border: 4px solid #ffb81c;
    padding: .5rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
    .btn-clear:hover, .btn-clear:hover {
        color: #000000;
        background-color: #ffb81c;
    }

    .btn-clear:focus, .btn-clear:focus {
        outline: none;
    }

/**umb_name:Aside Button*/
a.btn-aside {
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    background-color: transparent;
    color: #000000;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border: 4px solid #ffb81c;
    padding: .5rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1em;
    font-weight: 900;
    border-width: 0;
    background: transparent no-repeat url(btn-aside-arrow.svg) right/2rem;
    height: 2rem;
    padding: 8px 2.5rem 8px 0;
    display: flex;
    align-items: center;
}
    .btn-aside:hover{
        color: #ffb81c;
        background-color: transparent;
    }

    .btn-aside:focus{
        outline: none;
    }

    .btn-aside:hover{
        background-position-x: left;
        padding: 8px 0 8px 2.5rem;
    }


button {
    border: 4px solid #ffb81c;
    background-color: #ffb81c;
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    padding: 4px;
    width: 100%;
}


button {
    border: none;
    background: transparent;
}

    button:focus {
        outline-color: transparent;
    }

.btn{
    font-family: Gotham-Black;
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    background-color: #ffb81c;
    color: #000000;

    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border: 4px solid #ffb81c;
    padding: .5rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .btn:hover{
        color: #000000;
        background-color: #ffffff;
    }

    .btn:focus{
        outline: none;
    }

.bg-dark .btn, .bg-dark main .btn, .bg-black .btn, .bg-black main .btn, .bg-dark-gray .btn, .bg-dark-gray main .btn, .bg-gray .btn, .bg-gray main .btn, .bg-red .btn, .bg-red main .btn {
    font-family: Gotham-Black;
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    background-color: #ffb81c;
    color: #000000;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border: 4px solid #ffb81c;
    padding: .5rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .bg-dark .btn:hover, .bg-dark main .btn:hover, .bg-black .btn:hover, .bg-black main .btn:hover, .bg-dark-gray .btn:hover, .bg-dark-gray main .btn:hover, .bg-gray .btn:hover, .bg-gray main .btn:hover, .bg-red .btn:hover, .bg-red main .btn:hover {
        color: #ffb81c;
        background-color: #000000;
    }

    .bg-dark .btn:focus, .bg-dark main .btn:focus, .bg-black .btn:focus, .bg-black main .btn:focus, .bg-dark-gray .btn:focus, .bg-dark-gray main .btn:focus, .bg-gray .btn:focus, .bg-gray main .btn:focus, .bg-red .btn:focus, .bg-red main .btn:focus {
        outline: none;
    }

.bg-dark .btn-clear, .bg-dark main .btn-clear, .bg-black .btn-clear, .bg-black main .btn-clear, .bg-dark-gray .btn-clear, .bg-dark-gray main .btn-clear, .bg-gray .btn-clear, .bg-gray main .btn-clear, .bg-red .btn-clear, .bg-red main .btn-clear {
    font-family: Gotham-Black;
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    background-color: transparent;
    color: #ffb81c;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border: 4px solid #ffb81c;
    padding: .5rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .bg-dark .btn-clear:hover, .bg-dark main .btn-clear:hover, .bg-black .btn-clear:hover, .bg-black main .btn-clear:hover, .bg-dark-gray .btn-clear:hover, .bg-dark-gray main .btn-clear:hover, .bg-gray .btn-clear:hover, .bg-gray main .btn-clear:hover, .bg-red .btn-clear:hover, .bg-red main .btn-clear:hover {
        color: #000000;
        background-color: #ffb81c;
    }

    .bg-dark .btn-clear:focus, .bg-dark main .btn-clear:focus, .bg-black .btn-clear:focus, .bg-black main .btn-clear:focus, .bg-dark-gray .btn-clear:focus, .bg-dark-gray main .btn-clear:focus, .bg-gray .btn-clear:focus, .bg-gray main .btn-clear:focus, .bg-red .btn-clear:focus, .bg-red main .btn-clear:focus {
        outline: none;
    }

.bg-dark .btn-aside, .bg-dark main .btn-aside, .bg-black .btn-aside, .bg-black main .btn-aside, .bg-dark-gray .btn-aside, .bg-dark-gray main .btn-aside, .bg-gray .btn-aside, .bg-gray main .btn-aside, .bg-red .btn-aside, .bg-red main .btn-aside {
    color: #ffffff;
}

.bg-gold .btn, .bg-gold main .btn {
    font-family: Gotham-Black;
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.075em;
    font-weight: 900;
    background-color: #000000;
    color: #ffffff;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    border: 4px solid #ffb81c;
    padding: .5rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border-color: #000000;
}

    .bg-gold .btn:hover, .bg-gold main .btn:hover {
        color: #000000;
        background-color: #ffffff;
    }

    .bg-gold .btn:focus, .bg-gold main .btn:focus {
        outline: none;
    }

.bg-gold .btn-clear, .bg-gold main .btn-clear {
    border-color: #000000;
}
    Copy Link
  • Alan Draper 56 posts 139 karma points
    14 days ago
    Alan Draper
    0

    Here's fonts.css. I've had the same results with url('../assets/...) and url('/assets/...)

    @font-face {
    font-family: 'Gotham-Black';
    src: url('../assets/fonts/Gotham-Black/Gotham-Black.eot') format('embedded-opentype'), url('../assets/fonts/Gotham-Black/Gotham-Black.otf') format('opentype'), url('../assets/fonts/Gotham-Black/Gotham-Black.woff') format('woff'), url('../assets/fonts/Gotham-Black/Gotham-Black.ttf') format('truetype'), url('../assets/fonts/Gotham-Black/Gotham-Black.svg#Gotham-Black') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Gotham-Bold;
    src: url('../assets/fonts/Gotham-Bold/Gotham-Bold.eot') format('embedded-opentype'), url('../assets/fonts/Gotham-Bold/Gotham-Bold.otf') format('opentype'), url('../assets/fonts/Gotham-Bold/Gotham-Bold.woff') format('woff'), url('../assets/fonts/Gotham-Bold/Gotham-Bold.ttf') format('truetype'), url('../assets/fonts/Gotham-Bold/Gotham-Bold.svg#Gotham-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: Gotham-Medium;
    src: url('../assets/fonts/Gotham-Medium/Gotham-Medium.eot') format('embedded-opentype'), url('../assets/fonts/Gotham-Medium/Gotham-Medium.otf') format('opentype'), url('../assets/fonts/Gotham-Medium/Gotham-Medium.woff') format('woff'), url('../assets/fonts/Gotham-Medium/Gotham-Medium.ttf') format('truetype'), url('../assets/fonts/Gotham-Medium/Gotham-Medium.svg#Gotham-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: Gotham-Thin;
    src: url('../assets/fonts/Gotham-Thin/Gotham-Thin.eot') format('embedded-opentype'), url('../assets/fonts/Gotham-Thin/Gotham-Thin.otf') format('opentype'), url('../assets/fonts/Gotham-Thin/Gotham-Thin.woff') format('woff'), url('../assets/fonts/Gotham-Thin/Gotham-Thin.ttf') format('truetype'), url('../assets/fonts/Gotham-Thin/Gotham-Thin.svg#Gotham-Thin') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: Gotham-Book;
    src: url('../assets/fonts/Gotham-Book/Gotham-Book.eot') format('embedded-opentype'), url('../assets/fonts/Gotham-Book/Gotham-Book.otf') format('opentype'), url('../assets/fonts/Gotham-Book/Gotham-Book.woff') format('woff'), url('../assets/fonts/Gotham-Book/Gotham-Book.ttf') format('truetype'), url('../assets/fonts/Gotham-Book/Gotham-Book.svg#Gotham-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

/* Generated by Glyphter (http://www.glyphter.com) on  Tue Dec 03 2019*/
@font-face {
    font-family: 'Fifth';
    src: url("/assets/fonts/Fifth/Fifth.eot") format("embedded-opentype"), url("/assets/fonts/Fifth/Fifth.woff") format("woff"), url("/assets/fonts/Fifth/Fifth.ttf") format("truetype"), url("/assets/fonts/Fifth/Fifth.svg#Fifth") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class*='fifth-']:before {
    display: inline-block;
    font-family: 'Fifth';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-transform: none;
}

.fifth-icon-information:before {
    content: "\0041";
}

.fifth-icon-open-caption:before {
    content: "\0042";
}

.fifth-icon-pdf:before {
    content: "\0043";
}

.fifth-icon-pin:before {
    content: "\0044";
}

.fifth-icon-question:before {
    content: "\0045";
}

.fifth-icon-quote:before {
    content: "\0046";
}

.fifth-icon-youtube:before {
    content: "\0047";
}

.fc-icon-mini-cal-left::before,
.fifth-icon-left-arrow-small:before {
    content: "\0048";
}

.fifth-icon-left-arrow:before {
    content: "\0049";
}

.fifth-icon-calendar:before {
    content: "\004a";
}

.fifth-icon-cancel:before {
    content: "\004b";
}

.fifth-icon-warning:before {
    content: "\004c";
}

.fifth-icon-clock:before {
    content: "\004d";
}

.fifth-icon-comment:before {
    content: "\004e";
}

.fifth-icon-down-arrow-small:before {
    content: "\004f";
}

.fifth-icon-down-arrow:before {
    content: "\0050";
}

.fifth-icon-asl:before {
    content: "\0051";
}

.fifth-icon-images:before {
    content: "\0052";
}

.fifth-icon-facebook:before {
    content: "\0053";
}

.fc-icon-mini-cal-right::before,
.fifth-icon-right-arrow-small:before {
    content: "\0054";
}

.fifth-icon-right-arrow:before {
    content: "\0055";
}

.fifth-icon-audio-described:before {
    content: "\0056";
}

.fifth-icon-heart:before {
    content: "\0057";
}

.fifth-icon-instagram:before {
    content: "\0058";
}

.fifth-icon-facebook-rev:before {
    content: "\0059";
}

.fifth-icon-menu:before {
    content: "\005a";
}

.fifth-icon-options:before {
    content: "\0061";
}

.fifth-icon-profile:before {
    content: "\0062";
}

.fifth-icon-yes:before {
    content: "\0063";
}

.fifth-icon-search:before {
    content: "\0064";
}

.fifth-icon-twitter-rev:before {
    content: "\0065";
}

.fifth-icon-twitter:before {
    content: "\0066";
}

.fifth-icon-up-arrow-small:before {
    content: "\0067";
}

.fifth-icon-up-arrow:before {
    content: "\0068";
}

.fifth-icon-web:before {
    content: "\0069";
}

.fifth-icon-cloud-upload:before {
    content: "\006a";
}

.fifth-icon-download:before {
    content: "\006b";
}

.fifth-icon-plus:before {
    content: "\006c";
}

.fifth-icon-minus:before {
    content: "\006d";
}

.fifth-icon-shopping-cart:before {
    content: "\006e";
}

.fifth-icon-wheelchair:before {
    content: "\006f";
}

.fifth-icon-checked:before {
    content: "\0070";
}

.fifth-icon-checked-outline:before {
    content: "\0071";
}

.fifth-icon-unchecked:before {
    content: "\0072";
}

.fifth-icon-companion:before {
    content: "\0073";
}

.fifth-icon-mini-cal-left:before {
    content: "\0074";
}

.fifth-icon-mini-cal-right:before {
    content: "\0075";
}

.fifth-icon-right-arrow-filled:before {
    content: "\0076";
}

.fifth-icon-edit:before {
    content: "\0077";
}

.fifth-icon-external:before {
    content: "\0079";
}

.fifth-icon-tiktok:before {
    content: "\007a";
}
    Copy Link
  • Tarik 196 posts 840 karma points c-trib
    14 days ago
    Tarik
    0

    Did you try on incognito window?

    Also in case other styles override your font there is the option to use !important.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft