Using webfont-based glyphs in your Joomla!TM website discusses using glyphs created from webfonts rather than images. Glyphs are elemental symbols that can represent readable characters. Traditionally glyphs were created using fonts installed on users' computers, but HTML5 relies on "safe" fonts and CSS. The document demonstrates how to employ webfonts using the @font-face CSS rule to access a wider range of glyphs beyond safe fonts, and provides examples using the Glyphicons Halflings font.
Successful Web Typography - The Developer's AmpersandwichJenn Lukas
Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!
How to utilize web fonts and icon fonts within your projects
How icon fonts can help your site performance
Tools for crafting an efficient type system on the web
A presentation about webfont services and how to stop using the same old 15 web-safe fonts we've been using for two decades. Examples from four webfont providers: FontSquirrel, Google Font API, Typekit, and Extensis WebINK. Includes implementation details.
The Sankofa of CSS3: Moving forward while looking backDenise Jacobs
In order to respect users with older browsers but still stay on the leading edge, designers and front-end developers should practice the Sankofa of CSS3: graceful degradation that allows us to move forward while looking back.
Let's talk about web typography!
Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!
Successful Web Typography - The Developer's AmpersandwichJenn Lukas
Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!
How to utilize web fonts and icon fonts within your projects
How icon fonts can help your site performance
Tools for crafting an efficient type system on the web
A presentation about webfont services and how to stop using the same old 15 web-safe fonts we've been using for two decades. Examples from four webfont providers: FontSquirrel, Google Font API, Typekit, and Extensis WebINK. Includes implementation details.
The Sankofa of CSS3: Moving forward while looking backDenise Jacobs
In order to respect users with older browsers but still stay on the leading edge, designers and front-end developers should practice the Sankofa of CSS3: graceful degradation that allows us to move forward while looking back.
Let's talk about web typography!
Ever spent countless hours crafting a totally awesome type system for your beautiful design, only to have it lost in translation when it goes to development? Examine type and icon fonts through a developer lens, and learn how designers and front-end developers can work together to get everyone on the same (elegantly designed) page!
Presentation delivered to the Auckland Web Meetup on 20 May 2010, regarding the use of type on the web, its history and the new techniques and services that are emerging in this space.
Web fonts offer great flexibility for brands and designers to use a wider range of fonts online.
Using a custom font on the web was only achievable through various techniques, all with certain limitations. Most designers opted to stick with Web Safe Fonts – which are fonts that are already installed by default across different operating systems.
Fine typography has always been one of the stumbling points of web design. Limited at most to a handful of cross-platform specific fonts, web designers have often found it necessary to hack their way into typographically nuanced territory. Technologies such as sIFR and Cufon utilize Flash and Javascript techniques to achieve typographic variety, but often at the expense of clumsy technological implementation. @font-face brings with it the hope of a standard, cross-platform, cross-browser, lightweight method for referencing font-files not found on end users' computer. In other words: it allows web designers to store fonts on their server and reference them in CSS, regardless of what fonts the user browsing the page has installed.
We finally have a support of the CSS @font-face rule, on most browsers on the market. There will be an overview of their implementations, advantages and constraints that this brings, as well as some good practices for its use.
(This is a translation of my original french presentation http://www.slideshare.net/yvg/css-fontface-des-polices-personnalises)
Icon fonts are becoming an increasingly popular way to delivery iconography for websites. They reduce HTTP requests, provide a resolution-independent way to scale icons, and are often smaller than sprites. In this session we'll explore what icon fonts are, the pros and cons of using them, best practices for creating them, and deployment options for mobile devices.
Given at the Western MA WordPress meetups, 5/30/12. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.
Slides from my 2013 Breaking Development conference workshop. We explore the tools and techniques behind building your own icon fonts, covering the entire process from sketching icon concepts to properly deploying your font. Topics cover include: designing icons, considerations for designing font glyphs, setting up Illustrator templates, working with Glyphs, exporting fonts, creating web fonts, and using icon fonts semantically.
Icon fonts are becoming an increasingly popular way to delivery iconography for websites. They reduce HTTP requests, provide a resolution-independent way to scale icons, and are often smaller than sprites. In this session we'll explore what icon fonts are, the pros and cons of using them, how to make your own, and best practices for deploying them.
Presentation delivered to the Auckland Web Meetup on 20 May 2010, regarding the use of type on the web, its history and the new techniques and services that are emerging in this space.
Web fonts offer great flexibility for brands and designers to use a wider range of fonts online.
Using a custom font on the web was only achievable through various techniques, all with certain limitations. Most designers opted to stick with Web Safe Fonts – which are fonts that are already installed by default across different operating systems.
Fine typography has always been one of the stumbling points of web design. Limited at most to a handful of cross-platform specific fonts, web designers have often found it necessary to hack their way into typographically nuanced territory. Technologies such as sIFR and Cufon utilize Flash and Javascript techniques to achieve typographic variety, but often at the expense of clumsy technological implementation. @font-face brings with it the hope of a standard, cross-platform, cross-browser, lightweight method for referencing font-files not found on end users' computer. In other words: it allows web designers to store fonts on their server and reference them in CSS, regardless of what fonts the user browsing the page has installed.
We finally have a support of the CSS @font-face rule, on most browsers on the market. There will be an overview of their implementations, advantages and constraints that this brings, as well as some good practices for its use.
(This is a translation of my original french presentation http://www.slideshare.net/yvg/css-fontface-des-polices-personnalises)
Icon fonts are becoming an increasingly popular way to delivery iconography for websites. They reduce HTTP requests, provide a resolution-independent way to scale icons, and are often smaller than sprites. In this session we'll explore what icon fonts are, the pros and cons of using them, best practices for creating them, and deployment options for mobile devices.
Given at the Western MA WordPress meetups, 5/30/12. A short presentation on webfonts. The talk featured a brief introduction to webfonts, considerations for picking the right webfont, and integrating webfonts into WordPress.
Slides from my 2013 Breaking Development conference workshop. We explore the tools and techniques behind building your own icon fonts, covering the entire process from sketching icon concepts to properly deploying your font. Topics cover include: designing icons, considerations for designing font glyphs, setting up Illustrator templates, working with Glyphs, exporting fonts, creating web fonts, and using icon fonts semantically.
Icon fonts are becoming an increasingly popular way to delivery iconography for websites. They reduce HTTP requests, provide a resolution-independent way to scale icons, and are often smaller than sprites. In this session we'll explore what icon fonts are, the pros and cons of using them, how to make your own, and best practices for deploying them.
Italy Agriculture Equipment Market Outlook to 2027harveenkaur52
Agriculture and Animal Care
Ken Research has an expertise in Agriculture and Animal Care sector and offer vast collection of information related to all major aspects such as Agriculture equipment, Crop Protection, Seed, Agriculture Chemical, Fertilizers, Protected Cultivators, Palm Oil, Hybrid Seed, Animal Feed additives and many more.
Our continuous study and findings in agriculture sector provide better insights to companies dealing with related product and services, government and agriculture associations, researchers and students to well understand the present and expected scenario.
Our Animal care category provides solutions on Animal Healthcare and related products and services, including, animal feed additives, vaccination
Understanding User Behavior with Google Analytics.pdfSEO Article Boost
Unlocking the full potential of Google Analytics is crucial for understanding and optimizing your website’s performance. This guide dives deep into the essential aspects of Google Analytics, from analyzing traffic sources to understanding user demographics and tracking user engagement.
Traffic Sources Analysis:
Discover where your website traffic originates. By examining the Acquisition section, you can identify whether visitors come from organic search, paid campaigns, direct visits, social media, or referral links. This knowledge helps in refining marketing strategies and optimizing resource allocation.
User Demographics Insights:
Gain a comprehensive view of your audience by exploring demographic data in the Audience section. Understand age, gender, and interests to tailor your marketing strategies effectively. Leverage this information to create personalized content and improve user engagement and conversion rates.
Tracking User Engagement:
Learn how to measure user interaction with your site through key metrics like bounce rate, average session duration, and pages per session. Enhance user experience by analyzing engagement metrics and implementing strategies to keep visitors engaged.
Conversion Rate Optimization:
Understand the importance of conversion rates and how to track them using Google Analytics. Set up Goals, analyze conversion funnels, segment your audience, and employ A/B testing to optimize your website for higher conversions. Utilize ecommerce tracking and multi-channel funnels for a detailed view of your sales performance and marketing channel contributions.
Custom Reports and Dashboards:
Create custom reports and dashboards to visualize and interpret data relevant to your business goals. Use advanced filters, segments, and visualization options to gain deeper insights. Incorporate custom dimensions and metrics for tailored data analysis. Integrate external data sources to enrich your analytics and make well-informed decisions.
This guide is designed to help you harness the power of Google Analytics for making data-driven decisions that enhance website performance and achieve your digital marketing objectives. Whether you are looking to improve SEO, refine your social media strategy, or boost conversion rates, understanding and utilizing Google Analytics is essential for your success.
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC
Ellisha Heppner, Grant Management Lead, presented an update on APNIC Foundation to the PNG DNS Forum held from 6 to 10 May, 2024 in Port Moresby, Papua New Guinea.
2. Using webfont-based glyphs in your Joomla!™
website
What are glyphs and where
did they come from
Font-based glyphs in HTML
What are “safe” fonts
The magic of CSS3 and
webfont-based glyphs
A practical demonstration Ancient Maya glyph for Day 10 of the tzolkin calendar
3. What are glyphs
The Macquarie Dictionary
defines glyph
Archaeology—a pictograph
or hieroglyph
Wikipedia defines glyph
Typography—an elemental
symbol within an agreed set
of symbols, intended to
represent a readable
character for the purposes of
writing and thereby
expressing thoughts, ideas
and concepts.
4. Glyphs and icons
Glyphs are like icons
Most icons used on websites
are based on images
Most glyphs used on websites
are created using fonts
Glyph usage originated via the
<FONT FACE="... ">
HTML attribute
Example:
<FONT FACE="Webdings">i</FONT>
Icon usage (as images)
originated via the <IMG
SRC="URL" /> HTML tag
5. JPEGs, GIFs, PNGs
Different image
formats
JPEG – full colour but
no transparency
GIF – transparent, 256
colours + transparency
PNG – full colour +
transparency
Depending on browser
support, you can also
BMP, SVG and some
other formats
Problems with using images:
■ Each image has to be stored as a separate file.
■ Images have to be downloaded when the page is loaded. If you have lots
of images this adds to the time it takes before the page is rendered.
■ If the image is not available or it takes too long to get the file, the image is
replaced by the “red X” placeholder.
■ Antialiasing (particularly noticeable on dark backgrounds) issues.
■ Scaleability versus quality.
■ If you don’t have the images, you have to spend time finding them and
make sure that you don’t run into copyright/ownership problems.
7. Once upon a time …
… you could use the <FONT FACE="... "> HTML
tag
HTML5 changed all that
Before HTML4, the web browser relied on fonts
installed on user’s computer
From HTML4, the <FONT> tag was deprecated
HTML5 relies on CSS and “safe” fonts
So ...
Where have all
the “cute” fonts
gone?
Why can’t I use
Webdings,
Wingdings or
ZapfDingbats?
8. Unicode character set
The Unicode Standard covers (almost) all the
characters, punctuations, and symbols in the
world.
Unicode enables processing, storage, and
transport of text, independent of platform and
language.
See also
http://www.w3schools.com/charsets/
http://unicode-table.com/en/#miscellaneous-symbols
9. Glyphs created with “safe” fonts
For example, you could display the “envelope”
character (U2709) like this
<style>
p.envelope:before {
content: '2709';
}
</style>
<p class="envelope">
<a href="mailto:testing@test.com">Email me</a>
</p>
... and this would probably look
like
10. Glyphs created with HTML entities
Another way of displaying the “envelope” character
(U2709) is this
<p>✉
<a href="mailto:testing@test.com">Email me</a>
</p>
Not all characters are available in all the so-called
“safe” fonts
11. A complete list of CSS safe fonts
Sans-serif
Arial, Arial Black, Arial Narrow, Arial Rounded MT Bold, Avant Garde, Calibri,
Candara, Century Gothic, Franklin Gothic Medium, Futura, Geneva, Gill Sans,
Helvetica, Impact, Lucida Grande, Optima, Segoe UI, Tahoma, Trebuchet MS,
Verdana
Serif
Baskerville, Big Caslon, Bodoni MT, Book Antiqua, Calisto MT, Cambria, Didot,
Garamond, Georgia, Goudy Old Style, Hoefler Text, Lucida Bright, Palatino,
Perpetua, Rockwell, Rockwell Extra Bold, Times New Roman
Monospaced
Andale Mono, Consolas, Courier New, Lucida Console, Lucida Sans Typewriter,
Monaco
Fantasy
Copperplate
Script
Brush Script MT
13. “Safe” font-based glyphs issues
Your users may not have all fonts referenced on
your site.
Limitations of the CSS font-family rule fallback.
Character set limitations within the so-called “safe”
fonts.
What if you want to use “other” fonts?
14. How to employ webfonts
With the @font-face
CSS rule, web
designers no longer
have to use the “safe”
fonts.
Syntax
@font-face
{
font-properties
}
It is a good idea to look at webfont
developers’ websites for examples of how
they recommend using the @font-face
CSS rule
16. Examples of webfonts used as
glyphs
Character-based
glyphs require the use
of downloadable
webfonts
Examples of
webfonts/font-families
used as glyphs:
IcoMoon,
FontAwesome,
Glyphicons Halflings
IcoMoon is used by Joomla (in the
Hathor adminstrator template) and
available from http://icomoon.io/
FontAwesome is available from
http://fortawesome.github.io/Font-
Awesome/
Glyphicons Halflings is available from
http://glyphicons.com/
18. What you need for webfonts
The webfont source files
The CSS rule to load the fonts
A bit of imagination and creativity ... and some
patience
19. Copy the font files to your
website
Copy the webfont file(s) to your site
Remember the /path
You may have to copy different formats of the font,
e.g.
WOFF
TTF
EOT
SVG
20. CSS rule to create the Glyphicons
Halflings font
Add the following rule to your Joomla site template
CSS file (or to a custom CSS file, if you have one):
@font-face {
font-family: 'Glyphicons Halflings';
src: url(‘path/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('path/glyphicons-halflings-regular.woff') format('woff'),
url('path/glyphicons-halflings-regular.ttf') format('truetype'),
url('path/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Editor's Notes
The dictionary definition of a glyph is “a pictograph or hieroglyph” …
[C] … however, as you can see, a glyph has a slightly different meaning when related to typography
Glyphs are like icons …
[C] The use of images as icons originated with the implementation of the <IMG> HTML tag
[C] The use of glyphs, on the other hand, started off with the use of the <FONT> HTML tag
Not all browsers support all image formats
To display an HTML page correctly, the browser must know what character set (character encoding) to use.
For HTML5, the default character encoding is UTF-8. This has not always been the case. The character encoding for the early web was ASCII.
Later, from HTML 2.0 to HTML 4.01, ISO-8859-1 was considered the standard. With XML and HTML5, UTF-8 finally arrived, and solved a lot of character encoding problems.
Here’s another way of achieving the same result that we saw on the previous slide
But, no matter how you look at it, an “envelope” (Unicode character 2709) still looks the same.
Your users may not necessarily have all fonts referenced on your site.
The CSS font-family rule offers a fallback capability if your users do not have the same fonts that you used when you designed your site, but their experience may be different and may suffer because of it.
You are restricted when you use only the so-called “safe” fonts.
If you want to use other fonts—instead of “safe” font ones—you are going to need something else. That’s where downloadable webfonts come into play.
Not all browsers support all webfont formats
Not all browsers support @font-face
Here we see some of the characters available in Glyphicons Halflings