Magazine Pro issue: icon font imported in styles.css

[cookieandkate]

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

[AnitaC]

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' );

}

---

Need help with customization or troubleshooting? Reach out to me.

[cookieandkate]

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?

[AnitaC]

No unfortunately I don't.

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

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

https://twitter.com/TheCre8tiveDiva/status/420960733875032064

---

Need help with customization or troubleshooting? Reach out to me.

[cookieandkate]

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.

[aaron1728]

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 ≡.

[cookieandkate]

@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;
}

[aaron1728]

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?

[cookieandkate]

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

[Author]

Posts