Archived topic
Font is not properly loading on mobile site
6 replies · Started by Jennifer on October 19, 2022
Hi - So I was able to upload a local font, and it seems to working on desktop, but not on mobile browsers (tested on Chrome and Safari).
What might be going wrong?
Below is my CSS:
/* aracne https://www.dafont.com/aracne.font */
@font-face {
font-family: ‘Aracne’;
font-style: normal;
font-weight: 400;
src: url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.eot’) format(’embedded-opentype’); /* IE9 Compat Modes */
}
src: local(”),
url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.svg#PermanentMarker’) format(‘svg’); /* Legacy iOS */
}
Hi Jeniffer,
Can you double check the links you've added?
For instance, this doesn't seem to be working: https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.ttf
Hi Fernando - Wordpress doesn't allow me to upload TTF. Do you know of any way around this? Should I just delete this?
Jen
I deleted the TTF url and I still have problems...does iphone mobile require a certain type of font file?
Hi there,
just to cover. The only font types you really require today is woff and woff2 so you can ignore OTF, EOT or SVG unless the font specifically requires features only available to that font.
Now your @font-face CSS has some errors in it.
Replace it with this:
@font-face {
font-family: 'Aracne';
font-style: normal;
font-weight: 400;
src: local(''),
url('https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://kunarolls.com/wp-content/uploads/2022/10/ARACNE_regular.woff') format('woff'); /* Modern Browsers */
}worked like a charm. thank you, David.
i was using the template from the google font helper, so there was probably a lot of ancillary stuff in the script.
thanks!
Glad to be of help :)
