Are all Google Fonts uploaded to the theme?
Hello,
I'm attempting to use a certain Google font - Rubik Distressed - but the font isn't showing up on the web page after I save it. I'm first testing the look of it in the <h2>.
Here's the code that's been inserted into the CSS for that one page:
h2 {
font-family: "Rubik Distressed" !important;
font-weight: 400;
font-style: normal;
font-size: 58px;
}
Thank you, JL
Comments
I also tried to use the Allura font, but it isn't registering either. Here's the code I used for this page:
<p><span style="float: left; font-size: 50px; line-height: 40px; padding-top: 4px; padding-right: 8px; font-family: 'allura';">M</span>arcus...
Thanks, JL
Hi,
Why are you doing it this way, when you can choose these fonts in the theme options?
Best regards
I'm sorry. I'm not wanting to change the <h2> to Rubik Distressed, I was only testing it to see if that font would appear. Let me tell you what I'm doing more specifically...
I'm trying to make a drop cap to the text on certain pages, but the more specialty fonts, for example Rubik Distressed, aren't loading, only fonts like the simple "serif."
Here's the CSS I put in Theme Options (see below) while putting this HTML in the Visual Editor text, but it isn't working - the font Rubik Distressed - isn't loading. The HTML: <p class="dropcap_1">Once upon a time, in a land far away... It’s important because of the things that have happened in my personal life concerning this subject.</p>
The CSS:
.dropcap_1::first-letter {
font-family: "Rubik Distressed", serif;
float: left;
font-size: 3em;
line-height: 1;
margin-top: 0.1em;
margin-right: 0.1em;
padding: 0 0.2em;
color: #ffffff;
}
Once again, here's the page I'm referring to: click here.
Thanks, JL
If you do not have this font selected in the theme options, then it is not loaded in the head of your website. There are three ways to include it. Either select it anywhere, e.g. for the Decorative font:
Or put the font embed code to Behteme -> Theme options -> SEO, somewhere in the head area:
Or download the font, and upload it as a custom one in Betheme -> Theme options -> Fonts -> Custom:
Best regards
I tried uploading fonts (the TTF files. Note that Google doesn't give you download the .woff file) to the website from the Google Fonts website, but it didn't work - the drop caps didn't change the fonts. I did it your way above, adding that code to Google Tag Manager (gtag), but it still didn't work.
Here's all of the code I entered and where:
Google Tag Manager:
< link rel="preconnect" href="https://fonts.googleapis.com">
‹ link rel="preconnect" href="https://fonts.gstatic.com" crossorigin›
< link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;l&family=Imperial+Script&family=Rubik+Distressed&display=swap" rel="stylesheet"›
CSS:
.dropcap p:first-of-type::first-letter {
font-family: 'Rubik Distressed';
color: #ffffff;
float: left;
font-size: 5rem;
line-height: 0.8;
margin-top: 0.1em;
margin-right: 0.1em;
margin-bottom: -0.1em;
text-shadow: 4px 4px 6px rgba(0, 0, 0, 0);
}
HTML on the page:
<p><span class="dropcap">I</span>’ve been affected on a personal level...</p>
The page is here.
Thanks, JL
Your CSS code is wrong, as there are no p tags inside the "dropcap" class. Moreover, pseudoclasses are unnecessary. So your CSS code should contain the class only.
Best regards