Exileking Posted December 15, 2023 Share Posted December 15, 2023 (edited) Hi all, I am having trouble with displaying a custom font on Windows OS. I had someone review my portfolio yesterday and the custom fonts converted to normal fonts. Any reason why this is happening? https://www.jefferyl.com/ The custom code it below: .header--menu-open a {font-family: pixChicago} .header-menu-nav-item a { font-size: 23px; } /* remove dark background from all sections of site */ body, .header, .page-section .section-border, :not(.has-background) .section-background { background-color: transparent !important; } /* add repeating seamless background image sitewide - replace url with locally hosted version of image file */ body { background-image: url(https://content.invisioncic.com/p289038/monthly_2023_11/Image.thumb.png.feabc75f3081e1db301ea993557e1567.png); background-repeat: repeat; } @font-face { font-family: 'pixChicago'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); } @font-face { font-family: 'NeueBit-Regular'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65427b3493577f32c73cdefb/1698855733001/NeueBit-Regular.ttf'); } h1, h2, h3, h4, .header-nav-item a { font-family: 'pixChicago' !important; } h1 { font-family: 'pixChicago' !important; } h2 { font-family: 'pixChicago' !important; } h3 { font-family: 'pixChicago' !important; } h4 { font-family: 'pixChicago' !important; } .sqsrte-large { font-family: 'NeueBit-Regular' !important; } p { font-family: 'NeueBit-Regular' !important; } .sqsrte-small { font-family: 'NeueBit-Regular' !important; } a.btn { font-family: 'pixChicago' !important; } /* Custom cursor for body */ body{ margin: 1 !important; height:10vh !important; cursor: url(https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/654ce8f422fc887ad4bc2f23/1699539188367/Cursor.png), auto !important; } body * { cursor: url(https://content.invisioncic.com/p289038/monthly_2023_11/Pixel.png.9b9f30f6eb0b1e89d19a49aad6337bdd.png), auto; } Edited December 15, 2023 by Exileking Change Link to comment
tuanphan Posted December 16, 2023 Share Posted December 16, 2023 The code looks correct If it works, what should it look like? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Exileking Posted December 16, 2023 Author Share Posted December 16, 2023 Below are the screenshots of what it looks like on MacBook which is the pixel font Chicago and on windows the font is not showing. Link to comment
tuanphan Posted December 19, 2023 Share Posted December 19, 2023 Do you have any other format? otf, woff, woff2,... we can add all to font face code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Exileking Posted December 20, 2023 Author Share Posted December 20, 2023 Hi @tuanphan Indeed I do! I have otfs of both fonts used on the website. DO i need to change? Link to comment
tuanphan Posted December 22, 2023 Share Posted December 22, 2023 Use some code like this to declare multi font formats @font-face { font-family: 'pixChicago'; src: url('https://static1.squarespace.com/static/653977e6631d6e2bb1418d04/t/65428be1564e95715793c4f8/1698860001828/pixChicago.ttf'); src: url('paste otf url here'), url('pass woff url here'); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment