Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I downloaded this type of font, Nexa.otf and added it to the root of my project font/nexa/NexaBold.otf and font/nexa/NexaLight.otf. Then I added the @font-face style and added this style to a label but it only works the moment I add it. If I stop tomcat and start it again, the style is lost and the label is not output with this font.
css:
@font-face {
font-family: 'NexaBold';
src: url(../font/nexa/NexaBold.otf) format('truetype');
font-weight: bold;
font-style: normal;
}
.zul:
<label style="font-family:'NexaBold'">Inicia la Sesión</label>
In cases where things work once and fail reproducibly when trying again (e.g. after a server restart) the strategy is to compare the results between two tests.
In your case I'd assume some kind of browser caching or resource downloading issue. So the Network tab in the Developer tools of your browser would be a good starting point. As well as heck the console for errors (e.g. a download request failed or took longer than expected, or a cached old version of the CSS file was returned by the server).
What you can also do is trace the styles by Right Click -> Inspect Element of the label. The developer tools will open showing you all the styles applied to an element.
Somewhere you'll hopefully find a difference between the working and non working case. If the root cause of this is still not clear you can post the additional details here. (I'll increase your karma so you can post screenshots).
The problem is what you say. When it works is when it renders the font-face style well and I can see it from the developer tool. However, when the style does not work it is not rendered in the .css file. My question is, why sometimes it works and in most cases it doesn't? Could it be because of the browser's cache?
My question is, why sometimes it works and in most cases it doesn't?
That's something I can't tell from the description yet.
Could it be because of the browser's cache?
Yes id could (but no guarantee), and if so that information should be visible in the Network tab of the developer tools (Disk Cache/Memory Cache in the Size Column). Also the Network Tab shows the URLs which are downloaded if there's a difference in the urls, that could also be the cause. Last it's very easy to disable the browser cache temporarily to verify whether that makes any difference.
(It seems this problem is difficult to explain, and debug via forum, so I'd suggest to have a look into your system directly. If you contact our support we can arrange a call (e.g. ZOOM) to investigate the problem together.)
I have finally been able to do it. Thank you very much for your intention to help me.
@font-face{
font-family: ubuntu;
src: url("../font/ubuntu/Ubuntu-Bold.ttf") format("truetype");
src: url("../font/ubuntu/Ubuntu-BoldItalic.ttf") format("truetype");
src: url("../font/ubuntu/Ubuntu-Italic.ttf") format("truetype");
src: url("../font/ubuntu/Ubuntu-Light.ttf") format("truetype");
src: url("../font/ubuntu/Ubuntu-LightItalic.ttf") format("truetype");
src: url("../font/ubuntu/Ubuntu-Medium.ttf") format("truetype");
src: url("../font/ubuntu/Ubuntu-MediumItalic.ttf") format("truetype");
src: url("../font/ubuntu/Ubuntu-Regular.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
body{ font-size: 100%; font-family: ubuntu,helvetica55roman,arial,sans-serif; }
Asked: 2021-09-09 01:05:20 +0800
Seen: 18 times
Last updated: Sep 17 '21