font-face
@font-face is a CSS rule which allows you to download a particular font from your server to render on a webpage if the user hasn’t got that specific font installed. This means that web designers no longer have to adhere to a particular set of ‘web safe’ fonts that the user has pre-installed on their computer, or rely on users having JavaScript enabled. This works by turning the font file into a @font-face kit using an online generator like Font Squirrel.The fix!
After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilities the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:@font-face{
font-family: 'raleway';
src: url('fonts/raleway-medium-webfont.eot');
src: url('fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/raleway-medium-webfont.woff') format('woff'),
url('fonts/raleway-medium-webfont.ttf') format('truetype'),
url('fonts/raleway-medium-webfont.svg#webfont') format('svg');
}
As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .SVG file.
@font-face{
font-family: 'raleway';
src: url('fonts/raleway-medium-webfont.eot');
src: url('fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/raleway-medium-webfont.woff') format('woff'),
url('fonts/raleway-medium-webfont.ttf') format('truetype'),
url('fonts/raleway-medium-webfont.svg#webfont') format('svg');
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'raleway';
src: url('fonts/raleway-medium-webfont.svg') format('svg');
}
}
Great! Thank you :)
ReplyDeleteYour welcome, thanks for ur comment.
DeleteI ADAMS KEVIN, a representative Aiico Insurance plc, we trust and respect for individual differences in day out a loan. We will provide 2% of the loan's interest rate. If you are interested in this business contact us by e-mail: (adams.credi@gmail.com) now transfer their loan documents issued properly. Do you need a loan to set up business or school if you are very welcome to Aiico Insurance plc. You can also contact us by e-mail: (adams.credi@gmail.com). We first week can request a balance transfer.
ReplyDeleteDO YOU NEED LOAN FOR PERSONAL BUSINESS? IF YOU CONTACT YOUR EMAIL ABOVE TO PROCEED WITH YOUR LOAN TRANSFER IMMEDIATELY OK.