Magazine Pro issue: icon font imported in styles.css

Community Forums Forums Design Tips and Tricks Magazine Pro issue: icon font imported in styles.css

This topic is: resolved

This topic contains 9 replies, has 3 voices, and was last updated by  cookieandkate 10 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #83914

    cookieandkate
    Member
    Post count: 60

    Hi,

    I noticed the following code in the default Magazine Pro theme’s styles.css:

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

    I believe the font’s icons pertain to the mobile responsive menu.

    I’ve read that it is better to enqueue the fonts in functions.php than to use @import in styles.css. I see that my theme calls Google fonts in the functions.php already. Can someone please tell me how to enqueue the icon font in my functions.php so I don’t have to import it in styles.css?

    Thank you so much!
    Kate

    #83915

    AC
    Blocked
    Post count: 7712

    Are you sure you have Magazine Pro or just Magazine. I just opened the functions.php file and they are using the “enqueue” function already.

    //* Enqueue Google Fonts and JS script
    add_action( 'wp_enqueue_scripts', 'magazine_enqueue_scripts' );
    function magazine_enqueue_scripts() {
    
    	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400|Raleway:400,500,900', array(), CHILD_THEME_VERSION );
    
    	wp_enqueue_script( 'magazine-entry-date', get_bloginfo( 'stylesheet_directory' ) . '/js/entry-date.js', array( 'jquery' ), '1.0.0' );
    	wp_enqueue_script( 'magazine-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
    
    }
    
    #84009

    cookieandkate
    Member
    Post count: 60

    Yes, I’m sure I’m using Magazine Pro. You’re right, the google font code is enqueued in functions.php. However, there is another font called Icon, which is stored locally, and called in my styles.css. I want to enqueue the Icon font in my functions.php instead of styles.css. Do you know how to do that?

    #84013

    AC
    Blocked
    Post count: 7712

    No unfortunately I don’t.

    #84018

    AC
    Blocked
    Post count: 7712

    Ah haaaa! I posted this on my Twitter. Here is the response.

    #84501

    cookieandkate
    Member
    Post count: 60

    That’s awesome. I asked Genesis support about the issue. They explained that @font-face is fine to use in styles.css to call fonts stored locally. I think I got confused because the section for @font-face in styles.css is labelled “import fonts” or something like that, which led me to believe that they were using the @import option.

    #90178

    aaron1728
    Participant
    Post count: 23

    Sigh… not fond of the three horizontal lines icon. I do a ton of assisted living facility websites and having anyone over the age of 50 required to learn this week’s hieroglyphic “standard” for what an icon means is beyond frustrating.

    For Firefox users, 3 horizontal lines look like a “thumb grip” on the browser’s right scrollbar.
    In Chrome, 3 horizontal lines is akin to the cog and means “Customize and Control Chrome”.

    Unless an icon is truly universal, it’s an exercise in frustration. Does an equilateral triangle pointing to the right ALWAYS mean “play media”?

    Going back to hieroglyphics is a step backward in unambiguous communication.

    For the first visitor to a site, coming via smartphone, who has never seen my top primary menu, the text-based navigation is utterly hidden.

    Where is this all leading? I want to change that into ≡ MENU or MENU ≡.

    #90382

    cookieandkate
    Member
    Post count: 60

    @aaron, good news! I know how you can do that. Open up your styles.css and search for #responsive-menu-icon. That code should look similar to the following.

    #responsive-menu-icon::before {
    	-webkit-font-smoothing: antialiased;
    	color: #000;
    	content: "\e00e";
    	font-family: 'Icon';
    	font-size: 1.6rem;
    	font-size: 16px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: normal;
    	line-height: 1;
    	margin: 0 auto;
    	speak: none;
    	text-align: center;
    	text-transform: none;
    }

    content: "\e00e"; is the code for the menu icon. Change it to content: "\e00e MENU"; and specify your preferred font for “MENU” after the Icon font family, like this: font-family: 'Icon', Georgia, sans-serif;

    Final code should look like the following:

    #responsive-menu-icon::before {
    	-webkit-font-smoothing: antialiased;
    	color: #000;
    	content: "\e00e  MENU";
    	font-family: 'Icon', Georgia, sans-serif;
    	font-size: 1.6rem;
    	font-size: 16px;
    	font-style: normal;
    	font-variant: normal;
    	font-weight: normal;
    	line-height: 1;
    	margin: 0 auto;
    	speak: none;
    	text-align: center;
    	text-transform: none;
    }
    #90640

    aaron1728
    Participant
    Post count: 23

    Regarding the “over 50″ comment, I’m 51. I’ve been around computers since I was almost still in diapers at the Dartmouth computer labs when BASIC was being invented in the mid-1960’s and remember punch-cards. While many of us AARP-prospects are more than tech-savvy, the “new for new’s sake” attitude of modern UI folk needs some serious cluebat-therapy. My assisted living website clients, typically the Baby Boomer kids of more aged parents in their 70’s, 80’s an 90’s, are not interested in a new experience when shopping for a community.

    New icons. Links that don’t differ in appearance from body text or which aren’t standardized through a site. Stuff like that. It’s all a frustration.

    Don’t get me started on automobile controls and how most “designers” ought to be imprisoned (flogged) for hiding controls for wiper blades, headlights, parking brakes, high beams, radio controls, and whatever else in novel locations. If one steps into the latest year’s rental car, it shouldn’t require a 10 minute tour to find the usual controls. If one steps into a new vehicle in the summertime when it isn’t rainy season and the windshield gets splattered by something while driving at 60mph, there shouldn’t be a moment’s wondering where to quickly find the wipers and washer fluid controls… without having to dangerously look around for them.

    Likewise, a designer better have such confidence in any new hieroglyphic that there’s a willingness to pay each client $1000 if that icon isn’t still the standard 10 years from now. Develop 100 websites with an icon that vanishes in 2019? You should be forced to pay out $100,000. Better to use unambiguous WORDS or a symbol that combines both.

    Oh… and for the blind who access the Intenet? Don’t get me started on the inconsiderate aesthete who eschews word-based menus.

    Don’t make a visitor have to guess what you mean. Ever.

    And thanks for the code cookieandkate. That worked. I’d like to make the text “MENU” a smaller font than the “\e00e”. Is that possible?

    #90802

    cookieandkate
    Member
    Post count: 60

    Sorry, I don’t know how to make that happen!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.