Okay
  Public Ticket #1679918
Font Issues
Open

Comments

  •  1
    Sheryl L started the conversation

    Under Appearance > Customize, there is a tab for Global Theme Text where I can set fonts for HEADLINE 1 through 6 and Default Text. There's another tab for Content Area Text, where I can set size, color, and font for Title Text, Entry Text, and HEADING 1 through 6.

    1. What's the difference between Global Theme Text and Content Area Text?
    2. What's the difference between Headline and Heading?
    3. What's the difference between Default Text and Entry Text?
    4. What are Title Text and Entry Text?

    I'm working on two separate laptops, a Toshiba and a Lenovo. The fonts (Roboto for headings, Roboto Slab for text) seem to be displaying correctly on the Toshiba, where I'm doing most of my work. On the Lenovo, the body text is correct, but the heading/header and title fonts are a serif similar to Times New Roman.

    I went back to Appearance > Customize and corrected my font selections so that what I specified in Global matched that in Content. Then I cleared the cache on the Lenovo and reloaded the page. It's still displaying TNR. I've attached screenshots of the same page displaying on the two systems.

    Attached files:  Fonts Toshiba.jpg
      Fonts Lenovo.jpg

  •  1
    Sheryl L replied

    Following up on this one since I haven't received a response.

  •  114
    Charles replied

    The discrepancy could be related to this - https://themeisland.ticksy.com/ticket/1408585/. Following the workaround for that would confirm.

    Global theme text refers to the first layer in the cascade. H1 - H6 and some default, fallbacks for standard p tags and a tags. 

    All other sections isolate the area, so content area is everything below the tophat & header, but above the footer & sub-footer.

    Entry text is any text added to the content area, including p tags, where default is essentially the same, but without isolation to #section-content (content area)

  •  1
    Sheryl L replied

    Are you referring to the @import? I'm not familiar with this but looked it up and copied the code provided by Google, which was: 

    <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab');
    </style>

    It said to paste it into the "head of my html document." Where do I find this document?

    Then it said to specify these fonts in css:

          • font-family: 'Roboto', sans-serif;
          • font-family: 'Roboto Condensed', sans-serif;
          • font-family: 'Roboto Slab', serif;

          What do I do with these?

          Sorry. I'm not a developer. :(

        1.  114
          Charles replied

          Oh sorry about that, you may be able to add it to the custom css section in the theme options (without the style tag). If not, you'll need to add it to one of the stylesheets (for example wp-content\themes\polytechnic\theme-core\theme-assets\stylesheets\theme-3-typography.css)

          If you make any mod/updates to core theme files, though, I recommend using a a child theme (there is one included with the theme-download-package).

        2.  1
          Sheryl L replied

          Adding it in the Theme Options > Custom CSS did not work. Can you please be specific about what I'm adding in the child theme? Are these correct?

          Within head tags:

          <style>
          @import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab');
          </style> 

          Elsewhere:

          font-family: 'Roboto', sans-serif; 
          font-family: 'Roboto Condensed', sans-serif; 
          font-family: 'Roboto Slab', serif;
          
        3.  114
          Charles replied

          Hi Sheryl,

          Let's try this, navigate to wp-content/themes/polytechnic/theme-core/theme-assets/stylesheets/theme-7-custom.css and add it there with-out the style tags. Then just remember to back this up. A child theme is overkill if you don't plan on doing template customizations, and could have some other affects that you would need to navigate. Let me know if that works.

        4.  1
          Sheryl L replied

          To complicate matters, I don't have FTP access to the server, so I have to pass these instructions on to a third party. These are the instructions I sent him:

          Navigate to wp-content/themes/polytechnic/theme-core/theme-assets/stylesheets/theme-7-custom.css and add it there. Then just remember to back this up.

          Within the head tags:

          @import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab');
          

          Elsewhere:

          font-family: 'Roboto', sans-serif; font-family: 'Roboto Condensed', sans-serif; font-family: 'Roboto Slab', serif;

          Here's the response I got from him:

          That file is a css file, and other than comments, it is 
          empty.  In fact, here is the content:

          /* ==================================================== */
          /* This blank stylesheet is an option for users who would
          like to add their custom css here. This will be overridden
          in the event of an update, so we recommend backing up this
          file. This file is already enqueued for you, so go ahead
          and customize away */
          /* ==================================================== */

          So there are no head tags to put your code in.  Do you just want all of 
          the code in that file after the comments?

        5.  114
          Charles replied

          head tag is a different/alternative method:

          Option 1, same instructions, just add the @import to that blank stylesheet (see screenshot)

          Option 2, use wp-content/theme/polytechnic/header.php and add the stylesheet reference to the head tag.

          <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab" rel="stylesheet"> 
          

          don't do both, just one or the other, based on what works for you. The "else-ware" section that you have is just saying you can reference those font families in the css.

          Let me know if that helps

          Attached files:  css-custom-theme.PNG

        6.  1
          Sheryl L replied

          All fixed! Thank you!