• I’ve recently customised Twenty Sixteen using mainly Easy Font. I thought I would share the CSS Selectors I set up in case it saves others time.

    Twenty Sixteen uses: Montserrat (sans serif) and Merriweather (serif)

    For my version I wanted to change the fonts to Hind (sans serif) and Open Sans (sans serif)

    Below are the CSS Selectors I set up

    ===
    Blog Tag Line
    .site-description

    Blog Title

    .site-title a
    .site-title

    Captions Text

    .wp-caption
    .wp-caption-text
    .wp-caption img
    .gallery-caption

    Footer Powered by WordPress

    .site-info
    .site-info a
    .site-footer
    .entry-footer
    .site-title:after

    Navigation Menu
    .main-navigation

    Post Title
    .entry-title

    Widget Text

    .widget
    .widget p
    .textwidget
    .textwidget a

    Widget Title
    .widget-title

    ===
    Contact Form
    https://www.fastsecurecontactform.com/setting-styles
    If you use Fast Secure Contact Form you change the font settings by going to the Style tab and adding the following at the end of the: Form DIV:
    font-family: 'Hind'!important;

    In my case the full line is now :
    width:99%; max-width:555px;font-family: 'Hind'!important;

    What I’ve discovered is that without the !important it does not work

    ===
    Padding around header image I used the following added to the CSS Stylesheet Editor

    #masthead {
    	padding-top: 5px !important;
    	padding-bottom: 50px !important;
    }
    
    .header-image {
    	margin-top: 0 !important;
    	margin-bottom: 0 !important;
    }

    ===
    Here is a link to the finished site

Viewing 2 replies - 1 through 2 (of 2 total)
  • I’m having trouble getting the “.main-navigation” to change color. I can adjust it’s font style, size, spread, etc,… but not it’s color.

    Thoughts?

    When I review the elements of the page, I find the following CSS Selectors:

    .main-navigation a, .menu-toggle, .dropdown-toggle, .social-navigation a, .post-navigation a, .pagination a:hover, .pagination a:focus, .widget-title a, .site-branding .site-title a, .entry-title a, .page-links > .page-links-title, .comment-author, .comment-reply-title small a:hover, .comment-reply-title small a:focus

    I tried most of these that seem remotely close… still no luck

    • This reply was modified 8 years, 2 months ago by nikana2000.

    These selectors are exactly what I need now. Thanks so much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Sharing how I customised Twenty Sixteen using Easy Google Fonts’ is closed to new replies.