@TomJNowell – Thanks for this detail info, clarification and advice. I didn’t know about the new debug constant so will learn how to utilize that, and will use a child theme. I wasn’t able to fix this issue, so I spun up a new server and my font updates worked. So I’ll just abandon the … Read more
What are System fonts and where are they used?
Most of the time when I have an issue with @font-face is because my src path isn’t right. Maybe check the console to see if the call to your fonts files return a 404. If your font-face is being called in the style.css in the root of your theme then your font path is more … Read more
There are various ways to accomplish this, but I think it’s neatest and “most WordPress” to enqueue the fonts in your functions file, and then you can specifiy that they should load in the footer using the appropriate parameter: function wpb_add_google_fonts() { wp_enqueue_style( ‘wpse-google-fonts’, ‘http://fonts.googleapis.com/css?family=Roboto’, ”, ”, true ); } add_action( ‘wp_enqueue_scripts’, ‘wpse_add_google_fonts’ );
WordPress default editor have no support for any font change option on it’s tool bar. You have to do some css tricks but its not so easy if you are not a developer. Also its not a good idea to change theme functions or css. But there have a good solution: You can do this … Read more
you should use @font-face for including webfonts. src is not valid outside @font-face (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src) – nevertheless, there are a few very tolerant browsers. Remove your styles from style.css line 45–52 and put the following on the top of the file: @font-face { font-family: ‘nafeesnastaleeq’; src: url(‘fonts/nafees/nafeesnastaleeq.eot’); src: url(‘fonts/nafees/nafeesnastaleeq.eot?#iefix’) format(’embedded-opentype’), url(‘fonts/nafees/nafeesnastaleeq.woff’) format(‘woff’), url(‘fonts/nafees/nafeesnastaleeq.ttf’) format(‘truetype’), url(‘fonts/nafees/nafeesnastaleeq.svg#nafeesnastaleeq’) format(‘svg’); … Read more
You have to clarify which custom font, as your question is too broad. Is the custom font available through Google Fonts or which other source? If it is accessible through Google Fonts then use one of the Google Fonts plugins you can find in your WP backend, this will apply the Google Fonts script all … Read more
This is because your the icon is being output outside of the anchors. To fix this issue, add another class, for example my-class to the menu classes. Now, try to position the icon absolutely, and fix the padding: .fa.my-class::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .fa.my-class { margin-left: 10px; padding-left: 10px; … Read more
It’s probably how you’re referencing the fonts from the css. Assuming “style.css” and “fonts” directories are on the same level, your code should work. Are you using a bundler (Webpack or Gulp)? Either could resolve your issue quickly.
Download CSS with info about embedded fonts from Googleapis.com. Example link: https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap Save the file right into your child theme directory so it’s now: https://www.example.com/wp-content/themes/theme-child/fonts.css When you open this fonts.css file, there is content which looks like this: /* latin-ext */ @font-face { font-family: ‘Montserrat’; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format(‘woff2’); unicode-range: … Read more