If your client lacks a specific font, there are effective ways to address this issue:
- Utilize a font CDN I recommend using Font-Awesome
- Provide the font upon request
Leverage a Font CDN
This method is ideal when you want to incorporate a font for displaying icons rather than randomly choosing one. I highly recommend using FontAwesome due to its wide selection of free and entertaining icons.
To integrate FontAwesome, follow the instructions on their start page:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
To use the Hamburger Icon, simply include it as follows:
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger"><i class="fas fa-bars"></i><span>Menu</span></div>
<div class="site-name">ABCD</div>
The
<i class="fas fa-bars"></i>
section represents the icon itself, with the class
fa-bars specifying the specific FontAwesome icon. You can easily switch it to
fa-caret-down to view
this alternate icon.
Note that it's uncertain whether your hamburger CSS class is still necessary since its code hasn't been shared. However, this solution should integrate the icon without any additional CSS.
Distribute Font Per Request
Upload your font to the wwwroot/font directory and link it within your CSS file:
/*default version*/
@font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font.eot');
src:
local('Lovely Font'),
local('Lovely-Font'),
url('fonts/lovely_font.otf')
format('opentype');
}
/*bold version*/
@font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font_bold.eot');
src:
local('Lovely Font Bold'),
local('Lovely-Font-Bold'),
url('fonts/lovely_font_bold.otf')
format('opentype');
font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }
Refer to this link for further guidance.
Conclusion
For practicality, I suggest opting for the CDN or FontAwesome approach as it offers extensive icon options for seamless integration. While it introduces a dependency to your project, it enhances usability significantly.
If needed, consider distributing your custom font. Ensure it includes the required icons for seamless usage. This method is preferable when incorporating a simplified version of your company's logo or similar elements.
I hope this clarifies things for you. For insights on resolving issues with your current setup, refer to Terence Eden's answer.