@font-face doesn’t work

This article has some very helpful information regarding @font-face, and compatibility issues … just in case.

Here are some potential improvements in your @font-face section:

  • One of your src entries lists “local”. Try removing that.
  • Try using explicit addressing for your files.
  • Make sure you can actually open your font files, or at least do not get a 404 Error.
  • Try listing your files as I have, with two src entries: one for IE and one for modern browsers.
  • See if your font files provide a TTF file for Safari and mobile browsers.

`

@font-face {    font-family: 'newBaskerville';
    src: url('https://{your-domain}.com/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot');
    src: url('https://{your-domain}.com/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot?#iefix') format('embedded-opentype'),
    url('https://{your-domain}.com/wp-content/uploads/useanyfont/190811081519New-Baskerville.woff') format('woff'); 
}

Finally, apply the font to your body with fallback styles, like you have in your Courier example above:

body{ font-family: "newBaskerville", Courier, monospace; }

note: Be sure to use the same name when applying the name as you did when defining it. In my case “newBaskerville”, to avoid any issues with spaces and/or punctuation.

Related Posts:

  1. Failed to decode downloaded font
  2. Set line height in Html

    to make the html looks like a office word when

    has different font sizes

  3. font-weight is not working properly?
  4. How to add custom fonts in WordPress site
  5. How to set different font family based on text language?
  6. Where Do I Find The Astra Default Font Family That All Text Elements Are Inheriting From? [closed]
  7. How would one set or override a Fallback font for characters in second language?
  8. I have a wordpress website which uses a really weird font on Opera. What do I need to do to fix it?
  9. Font .woff files loaded don’t correspond to the displayed styles [closed]
  10. When changing theme’s font, why does font-size attribute not work? [duplicate]
  11. Fonts are not applying
  12. Fonts are parsed in one way but rendered in a different way
  13. Custom font isn’t active on all PCs
  14. Set line spacing
  15. Outline effect to text
  16. Using CSS for a fade-in effect on page load
  17. Transition of background-color
  18. How to add a color overlay to a background image?
  19. Change color of PNG image via CSS?
  20. css: how to center box div element directly in center?
  21. Transitions on the CSS display property
  22. How to completely remove borders from HTML table
  23. How to get current screen width in CSS?
  24. margin-right is not working with my HTML. How can I center my content?
  25. Overflow Scroll css is not working in the div
  26. Positioning background image, adding padding
  27. CSS Box Shadow – Top and Bottom Only [duplicate]
  28. How to place Text and an Image next to each other in HTML?
  29. Responsive iframe with max width and height
  30. Overflow-x not working
  31. Hexagon shape with CSS3
  32. CSS selector for first element with class
  33. Inbuilt style for jquery-ui-datepicker
  34. Why is style.css not being enqueued?
  35. How to add a class to ul tags created by the WordPress editor Tinymce?
  36. How to solve ‘Eliminate render-blocking JavaScript and CSS in above-the-fold’ content for multiple files?
  37. wp_tag_cloud inline CSS
  38. How Can I Use A Child Theme Effectively When Parent’s CSS Is Located in a ‘CSS folder’?
  39. Change CSS when user is logged in
  40. is it possible to use post-type as part of a css selector in block editor stylesheet?
  41. Sticky navigation and the wpadminbar
  42. Override load-styles.php with admin screen css
  43. What controls responsiveness in WordPress?
  44. Add Post Status to Body Class
  45. Why does my dissappear?
  46. Accessing Style Sheet Comment Like WordPress
  47. Dynamic sidebar nav with current page highlighting
  48. Bootstrap in theme
  49. How to integrate my HTML and javascript into my child theme
  50. How to align full div [closed]
  51. Font Awesome icons disappearing [closed]
  52. How to change the full capitals font title of my WordPress Blog?
  53. How to add inline css code with background image in page html code?
  54. Move Sidebar from Above Content To Below When Responsive [closed]
  55. Understanding how the class family `inner-container` works
  56. Page layout is broken when viewing search results.
  57. Style file inclusion
  58. Change Header Image on Blog Post for Mobile View
  59. adding the_custom_logo(); to header
  60. Apply custom css for user role
  61. override a css style [closed]
  62. How to avoid repeating similar properties for all tds of a table in a wordpress post
  63. Loading bbPress CSS file only on forum directory
  64. Common page width? [closed]
  65. Login validation on wordpress
  66. CSS properties in textarea in the Customizer
  67. WordPress default theme CSS version problem and not loading
  68. Penscratch 2 – changing color of the main block
  69. How can customized CSS on WordPress highlight the blog title in white when it’s not intended?
  70. Are there any CSS classes for the wordpress colours?
  71. how to modify html on homepage (no home-page.php in my theme)
  72. Remove dashicons.min.css conditionally
  73. Remove Parent Style on Carousel
  74. how does additional css rendering work?
  75. Text Not Wrapping Around Right Floated Image [closed]
  76. header background color changed after drop & import database in phpmyadmin
  77. Css style removed but still showing via CDN even after clearing browser cache and purging all caches for site
  78. I cannot make this position properly in WordPress [closed]
  79. How to include backend buttons css on frontend?
  80. vertical menu bar css
  81. After upload on server 404 on all pages, no css
  82. I need css code to divide my webpage sections into two columns
  83. Images at the same vertical position in multiple columns
  84. css .active dropdown selects all links
  85. background changed after WordPress update
  86. Put CSS on TOP, how?
  87. I am trying to apply these CSS rules to x3 Post-ID’s but I can’t get it to work – any idea how I can?
  88. In which file can I find the custom CSS code I entered?
  89. Some times CSS not Applying
  90. CSS does not take effects and it doesn’t show in inspect [closed]
  91. Add Quicksand for mobile devices
  92. Hiding site title for Twentyfifteen sidebar on (responsive) desktop display size
  93. Why is the image in div not displayed in full-size?
  94. can i custom rendered content from API?
  95. How enqueue CSS out of theme folder?
  96. Styling not refreshing for old visitors on WordPress
  97. How to add CSS to WordPress
  98. How to add arbitrary custom CSS to a WordPress Block Theme using Site Editor?
  99. Wrap post titles containing slashes on narrow viewports
  100. Import css file from node_modules using @wordpress/scripts

Leave a Comment