Preloading @font-face fonts?

by

Since 2017 you have preload

MDN: The preload value of the element’s rel attribute allows you to
write declarative fetch requests in your HTML , specifying
resources that your pages will need very soon after loading, which you
therefore want to start preloading early in the lifecycle of a page
load, before the browser’s main rendering machinery kicks in. This
ensures that they are made available earlier and are less likely to
block the page’s first render, leading to performance improvements.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
<link rel="preload" href="/fonts/mywofffont.woff2" as="font" type="font/woff2" crossorigin>

Always check browser compatibility.

It is most useful for font preloading (not waiting for the browser to find it in some CSS). You can also preload some logos, icons and scripts.

More Related Contents:

  1. How to know if a font (@font-face) has already been loaded?
  2. list every font a user’s browser can display
  3. How to detect which one of the defined font was used in a web page?
  4. How to get the actual rendered font when it’s not defined in CSS?
  5. How to change FontSize By JavaScript?
  6. Using jQuery to know when @font-face fonts are loaded?
  7. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  8. How to hide css and js version details from weppalyzer in PHP
  9. toggle show/hide div with button?
  10. Textarea Auto height [duplicate]
  11. How to change CSS property using JavaScript
  12. Relative Paths in Javascript in an external file
  13. Dynamically loading css stylesheet doesn’t work on IE
  14. Stop fixed position at footer
  15. How do I use the Spacing Utility Classes in Bootstrap
  16. Convert TD columns into TR rows
  17. Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x – y), where y is unknown
  18. show loading icon until the page is load?
  19. webkit-transform overwrites z-index ordering in Chrome 13
  20. Adding a new line in a JSX string inside a paragraph – React
  21. how to remove css property using javascript?
  22. TypeError: $(…).modal is not a function with bootstrap Modal
  23. jsPDF can’t get any styling to work
  24. Adding Google Translate to a web site
  25. Specify parent divs opacity but make it not affect children HTML elements
  26. How to get border width in jQuery/javascript
  27. Include CSS,javascript file in Yii Framework
  28. How to do page numbering in header/footer htmls with wkhtmltopdf?
  29. Scroll Position of div with “overflow: auto”
  30. How to keep elements non-refreshed

Leave a Comment